[英]In Canvas HTML getSeconds(), Is there a way to Run a clock with 56 second 56 minutes and 28 hours?
我們在月球研究中使用了 28 小時的時鍾系統，
這是我們嘗試在 Canvas HTML 中創建它的方式，* 1 分鍾 = 56 秒 * 1 小時 = 56 分鍾在此基礎上，我們嘗試創建一個運行 112 分鍾的模擬。
為了實現這一點，我們為 w3schools 使用了以下兩個代碼庫， - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown用於生成模擬時鍾信息的數字時鍾值 - https://www .w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start基本地球時鍾，用於生成 28 小時制，鍾面上有 112 分鍾刻度。
我們無法使時鍾准確運行 56 秒和分鍾移動。 你能幫我們更正嗎？ 謝謝你。
// Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate + now; // Time calculations for days, hours, minutes and seconds var days = Math.floor((distance) / (1000 * (55.54920598892) * (55.54920598892) * 28)); var hours = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892) * 28)) / (1000 * (55.54920598892) * (55.54920598892))); var hours = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892) * 28)) / (1000 * (55.54920598892) * (55.54920598892))); var minutes = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892))) / (1000 * (55.54920598892))); var seconds = Math.floor(((distance - 75) % (1000 * (55.54920598892))) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { text-align: center; font-size: 60px; margin-top: 0px; } </style> </head> <body> <p id="demo"></p>
當前結果：分鍾在 34 秒標記處更改預期結果：而不是 56 秒標記。
面臨的額外問題：滴答時間在 56 秒輪班之前等待 60 秒。 因此在中間延遲了幾秒鍾。
我不得不承認我不太確定你的代碼最初的問題是什么。
但是，由於您是在一級距離（毫秒 => 秒 => 分鍾 => 小時 => 天）上定義單位關系，因此您可能會發現在代碼中保留這種關系邏輯會更清晰。
您最初擁有的是兩個日期之間以ms為單位的距離。 然后，您可以使用您自己對秒的定義（以下代碼段中的ms_per_sec ）計算該距離代表的your_seconds總數。 從那里你可以步行到天數。
然后，您只需要在您定義的基數上獲得總數的模數。
請注意，由於您現在沒有處理真實的地球秒，因此您必須在setInterval(fn, 1000)以外的其他基礎上處理動畫循環，因為可能有一些your_seconds落在兩個不同的真實秒上。 相反，您最好使用requestAnimationFrame循環，它會在每次屏幕刷新時觸發。
// our constants var ms_per_sec = 300; // 1000 var sec_per_min = 7; // 55.54920598892; var min_per_hr = 3; // 55.54920598892; var hrs_per_day = 28; // let's make our target date at some fixed distance in our own time system var countDownDate = new Date().getTime() + (1 * hrs_per_day * min_per_hr * sec_per_min * ms_per_sec) + // 1 day (2 * min_per_hr * sec_per_min * ms_per_sec) + // two hours (1 * sec_per_min * ms_per_sec) + // 1 minutes (5 * ms_per_sec); // 5 seconds // Update the count down every frame function loop() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var total_ms = (countDownDate - now); // from here our values are based on our own time system var total_seconds = (total_ms / ms_per_sec); var total_minutes = (total_seconds / sec_per_min); var total_hours = (total_minutes / min_per_hr); var total_days = (total_hours / hrs_per_day); var days = Math.floor(total_days); var hours = Math.floor(total_hours % hrs_per_day); var minutes = Math.floor(total_minutes % min_per_hr); var seconds = Math.floor(total_seconds % sec_per_min); // Output the result in an element with id="demo" document.getElementById("demo").textContent = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (total_ms < 0) { document.getElementById("demo").innerHTML = "EXPIRED"; return; } requestAnimationFrame(loop); } loop();
p { text-align: center; font-size: 60px; margin-top: 0px; }
<p id="demo"></p>
Android Widget 時鍾，運行 28 小時 56 分 56 秒的離線時鍾
[英]Android Widget clock that runs an offline clock for 28hours, 56minutes, 56 seconds
如何在基於Canvas的模擬時鍾中組裝以下代碼庫，Clockface有28小時112分鍾
[英]How to assemble the following code base in the Canvas based analog clock with Clockface having 28 hours and 112 minutes
有沒有一種方法只能禁用html5 type = time的分鍾或小時選擇？
[英]Is there a way to disable the minutes or hours selection only for html5 type=time?
帶有 Java 腳本的實時時鍾，顯示實際秒數和小時數
[英]Live clock with java script, that shows the actual seconds minutes and hours
如何在HTML中將文本字段輸入從1234567891234轉換為1234-56-789-1234？
[英]How can I convert textfield input from 1234567891234 to 1234-56-789-1234 in html?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.