time_change.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>时间单位转换器</title>
  6. </head>
  7. <body>
  8. <h1>时间单位转换器</h1>
  9. <label for="input-number">输入数字:</label>
  10. <input type="number" id="input-number"><br>
  11. <label for="input-unit">输入单位:</label>
  12. <input type="radio" name="input-unit" value="year">年
  13. <input type="radio" name="input-unit" value="month">月
  14. <input type="radio" name="input-unit" value="day">日
  15. <input type="radio" name="input-unit" value="hour">时
  16. <input type="radio" name="input-unit" value="minute">分
  17. <input type="radio" name="input-unit" value="second" checked>秒
  18. <input type="radio" name="input-unit" value="millisecond">毫秒
  19. <input type="radio" name="input-unit" value="microsecond">微秒
  20. <input type="radio" name="input-unit" value="nanosecond">纳秒
  21. <br>
  22. <label for="output-unit">输出单位:</label>
  23. <input type="radio" name="output-unit" value="year">年
  24. <input type="radio" name="output-unit" value="month">月
  25. <input type="radio" name="output-unit" value="day">日
  26. <input type="radio" name="output-unit" value="hour">时
  27. <input type="radio" name="output-unit" value="minute">分
  28. <input type="radio" name="output-unit" value="second" checked>秒
  29. <input type="radio" name="output-unit" value="millisecond">毫秒
  30. <input type="radio" name="output-unit" value="microsecond">微秒
  31. <input type="radio" name="output-unit" value="nanosecond">纳秒
  32. <br>
  33. <label for="output-value">转换结果:</label>
  34. <input type="text" id="output-value" readonly>
  35. <script>
  36. function truncateDecimals(num, decimalPlaces) {
  37. if (typeof num !== 'number') {
  38. throw new Error('The input value must be a number.');
  39. }
  40. if (typeof decimalPlaces !== 'number' || decimalPlaces < 0) {
  41. throw new Error('The decimalPlaces value must be a non-negative number.');
  42. }
  43. const factor = Math.pow(10, decimalPlaces);
  44. const truncatedNum = Math.trunc(num * factor) / factor;
  45. return truncatedNum;
  46. }
  47. function convertUnits() {
  48. var inputValue = document.getElementById("input-number").value;
  49. var inputUnit = document.querySelector('input[name="input-unit"]:checked').value;
  50. var outputUnit = document.querySelector('input[name="output-unit"]:checked').value;
  51. var outputValue;
  52. // 进行单位转换的逻辑
  53. // 将输入的时间转换为纳秒
  54. var inputValueInNs;
  55. switch (inputUnit) {
  56. case "year":
  57. inputValueInNs = inputValue * 31536000000000000; // 年到纳秒的转换率
  58. break;
  59. case "month":
  60. inputValueInNs = inputValue * 2592000000000000; // 月到纳秒的转换率
  61. break;
  62. case "day":
  63. inputValueInNs = inputValue * 86400000000000; // 日到纳秒的转换率
  64. break;
  65. case "hour":
  66. inputValueInNs = inputValue * 3600000000000; // 时到纳秒的转换率
  67. break;
  68. case "minute":
  69. inputValueInNs = inputValue * 60000000000; // 分到纳秒
  70. // 分到纳秒的转换率
  71. break;
  72. case "second":
  73. inputValueInNs = inputValue * 1000000000; // 秒到纳秒的转换率
  74. break;
  75. case "millisecond":
  76. inputValueInNs = inputValue * 1000000; // 毫秒到纳秒的转换率
  77. break;
  78. case "microsecond":
  79. inputValueInNs = inputValue * 1000; // 微秒到纳秒的转换率
  80. break;
  81. case "nanosecond":
  82. inputValueInNs = inputValue; // 纳秒单位不需要转换
  83. break;
  84. default:
  85. inputValueInNs = 0;
  86. }
  87. // 将纳秒转换为输出单位
  88. switch (outputUnit) {
  89. case "year":
  90. outputValue = inputValueInNs / 31536000000000000; // 纳秒到年的转换率
  91. break;
  92. case "month":
  93. outputValue = inputValueInNs / 2592000000000000; // 纳秒到月的转换率
  94. break;
  95. case "day":
  96. outputValue = inputValueInNs / 86400000000000; // 纳秒到日的转换率
  97. break;
  98. case "hour":
  99. outputValue = inputValueInNs / 3600000000000; // 纳秒到时的转换率
  100. break;
  101. case "minute":
  102. outputValue = inputValueInNs / 60000000000; // 纳秒到分的转换率
  103. break;
  104. case "second":
  105. outputValue = inputValueInNs / 1000000000; // 纳秒到秒的转换率
  106. break;
  107. case "millisecond":
  108. outputValue = inputValueInNs / 1000000; // 纳秒到毫秒的转换率
  109. break;
  110. case "microsecond":
  111. outputValue = inputValueInNs / 1000; // 纳秒到微秒的转换率
  112. break;
  113. case "nanosecond":
  114. outputValue = inputValueInNs; // 纳秒单位不需要转换
  115. break;
  116. default:
  117. outputValue = 0;
  118. }
  119. document.getElementById("output-value").value = truncateDecimals(outputValue,2);
  120. }
  121. // 在输入框值或单位选择发生改变时触发转换
  122. document.getElementById("input-number").addEventListener("input", convertUnits);
  123. var inputUnits = document.querySelectorAll('input[name="input-unit"]');
  124. inputUnits.forEach(function (inputUnit) {
  125. inputUnit.addEventListener("change", convertUnits);
  126. });
  127. var outputUnits = document.querySelectorAll('input[name="output-unit"]');
  128. outputUnits.forEach(function (outputUnit) {
  129. outputUnit.addEventListener("change", convertUnits);
  130. });
  131. </script>
  132. </body>
  133. </html>