Блог

Главная - Вопросы по программированию - Как выполнить комбинацию из 2 кодов?

Как выполнить комбинацию из 2 кодов?

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

У меня есть код, который указывает, какой знак соответствует дню и месяцу, и у меня есть другой код, который печатает круги в соответствии с количеством кругов, которые я ввожу в столбцы и строки.

есть предложения, как я могу объединить их?

например, если я ввожу 5 в столбцах и 5 в строках, я получаю сообщение с предупреждением о том, что мой знак — Телец

как это сделать? есть ли какой-либо код, который может сочетаться с обоими?

также есть ли какие-либо другие простые предложения, как объединить астрологию с кругами?

 $('#month, #day').on('input', maxDays);
$('button').on('click', zSign);

function maxDays() {
  var num = Number($(this).val());
  var max;

  if ($(this).is('#month')) {
    if (num % 2 === 0) {
      max = 30;
    } else if (num === 1) {
      max = 29;
    } else {
      max = 31;
    }
    return $('#day').attr('max', max).val('1');
  }

  if ($(this).is('#day')) {
    if (num < 1) {
      num = 1;
    } else if (num > max) {
      num = max;
    } else {
      num = num;
    }
    return $('#day').val(num);
  }
  return false;
}

function zSign() {
  var month = Number($('#month').val());
  var day = Number($('#day').val());
  var sign;

  switch (month) {
    case 0:
      sign = day < 21 ? "Capricorn" : "Aquarius";
      break;
    case 1:
      sign = day < 19 ? "Aquarius" : "Pisces";
      break;
    case 2:
      sign = day < 21 ? "Pisces" : "Aries";
      break;
    case 3:
      sign = day < 21 ? "Aries" : "Taurus";
      break;
    case 4:
      sign = day < 21 ? "Taurus" : "Gemini";
      break;
    case 5:
      sign = day < 22 ? "Gemini" : "Cancer";
      break;
    case 6:
      sign = day < 23 ? "Cancer" : "Leo";
      break;
    case 7:
      sign = day < 24 ? "Leo" : "Virgo";
      break;
    case 8:
      sign = day < 23 ? "Virgo" : "Libra";
      break;
    case 9:
      sign = day < 24 ? "Libra" : "Scorpio";
      break;
    case 10:
      sign = day < 23 ? "Scorpio" : "Sagittarius";
      break;
    case 11:
      sign = day < 23 ? "Sagittarius" : "Capricorn";
      break;
    default:
      sign = null;
      break;
  }
  return $('#output').val(sign);
}



function hoverTooltip(color, state) {
  tooltip = document.getElementById('tooltip');
  tooltip.innerHTML = ''
  if (state == 'True') {
    var mouseX = event.clientX,
      mouseY = event.clientY;
    console.log(color);
    tooltip.style.display = 'block';
    tooltip.innerHTML = `Fill color:<br>${color}`;
    console.log('top: '   mouseY   ' left:'   mouseX)
    tooltip.style.top = mouseY;
    tooltip.style.left = mouseX;
  } else {
    console.log("LEAVE");
    tooltip.style.display = 'none';
  }
}

window.onload = function() {
  /* Map HTML Button to JavaScript var */
  button = document.getElementById('userButton');
  button.onclick = function() {
    var rows = 0,
      cols = 0;
    tableHTMLContent = '';
    userRows = document.getElementById('userRows').value;
    userCols = document.getElementById('userCols').value;
    dynamicTable = document.getElementById('dynamicTable');
    if (userRows != '' amp;amp; userCols != '') {
      for (row = 0; row < userRows; row  ) {
        tableHTMLContent  = '<tr>'
        for (col = 0; col < userCols; col  ) {
          randomColor = "#"   ((1 << 24) * Math.random() | 0).toString(16);
          content = `<svg height="100" width="100"><circle onmouseenter="hoverTooltip('${randomColor}', 'True')" onmouseleave="hoverTooltip('', 'False')" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="${randomColor}" /></svg>`
          tableHTMLContent  = `<td class='cicrle-cell'>${content}</td>`
        }
        tableHTMLContent  = '</tr>'
      }
    } else {
      alert('Values are invalid, please insert numbers for both Rows an Cols')
    }
    dynamicTable.innerHTML = tableHTMLContent
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <style>
     :root {
      font: 500 16px/1.3 Verdana
    }
    
    select,
    input,
    output,
    button,
    label {
      display: inline-block;
      font: inherit;
      margin: 5px 1px;
    }
    
    #day {
      width: 4ch;
      text-align: center;
    }
    
    #output::before {
      content: "a0";
    }
    
    #sign {
      text-align: center;
    }
    
    #tooltip {
      position: fixed;
      background: rgba(0, 0, 0, 0.6);
      color: #eeffff;
      display: none;
    }
  </style>



  <div id=sign>
    <h1>what your sign?</h1>

    <form id="zodiac">
      <label for="month"> choose Month:</label>
      <select id="month">
        <option value='0' selected>January</option>
        <option value='1'>February</option>
        <option value='2'>March</option>
        <option value='3'>April</option>
        <option value='4'>May</option>
        <option value='5'>June</option>
        <option value='6'>July</option>
        <option value='7'>August</option>
        <option value='8'>September</option>
        <option value='9'>October</option>
        <option value='10'>November</option>
        <option value='11'>December</option>
      </select>
      <br />
      <label for="day"> choose Day: </label>
      <input id="day" type='number' min='1' max='30' value='1'><br />
      <button type='button'>Done</button><br>
      <label for="output">Your sign is </label><output id='output'></output>
    </form>
    <form>
      Rows:
      <input id="userRows" type='text'> Cols:
      <input id="userCols" type='text'>
      <input id="userButton" type="button" value="Generate" su>
    </form>
    <div id="tooltip">
    </div>
    <table id="dynamicTable"></table>
  </div>
</body>

Комментарии:

1. Я бы начал с исправления структуры вашей HTML-страницы. У вас нет открывающего head тега, и вы не можете иметь style в body .

2. Пожалуйста, не создавайте больше работы для других людей, вандализируя свои сообщения. Размещая в сети Stack Exchange, вы предоставляете Stack Exchange право, не подлежащее отзыву, в соответствии с лицензией CC BY-SA 3.0 , на распространение этого контента (т. Е. независимо от вашего будущего выбора). Согласно политике обмена стеками, распространяется версия post, не подвергшаяся вандализму. Таким образом, любой вандализм будет отменен. Если вы хотите узнать больше об удалении записи, пожалуйста, смотрите: Как работает удаление?