Question

我有一个代码，根据天和月告诉什么符号而且我还有另一个代码，可以根据我在列和行中输入的圆圈数量来打印圆圈。

关于如何将它们结合起来的任何建议？

例如，如果我在列中输入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 != '' && 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>

2个代码怎么组合？

0 个答案: