个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我们正在为我们的月球研究使用 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 => sec => minutes => hrs => days)定义单位关系，您可能会发现在代码中保留这种关系逻辑会更清晰。
您最初拥有的是两个日期之间以 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>关于javascript - 在 Canvas HTML getSeconds() 中，有没有办法让时钟运行 56 秒 56 分 28 小时？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55645573/
26
4
0
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
在现代 IDE 中，有一个键盘快捷键可以通过键入文件名称来打开文件，而无需将手放在鼠标上。例如: Eclipse:Cmd|Ctrl + Shift + R -> 打开资源 IntelliJ:Cmd|C
有什么东西会等待事件发生(我正在等待的是 WebBrowser.DocumentCompleted)，然后执行代码吗？像这样: If (WebBrowser.DocumentCompleted) 不会
我使用 PHP Minify，它很棒。但我的问题是，是否有任何 PHP 插件或其他东西可以自动检测 javascript/css 代码并自动缩小它？谢谢。 最佳答案 Javascript 压缩器？ 看
有没有一种语言，类似什么CoffeeScript是JavaScript，编译成windows batch|cmd|command line的语言？ 我指的cmd版本是基于NT的，尤其是XP sp3及以
我知道我可以 ，但是，我真的宁愿有一个任务，我可以从任何可以使用所有(或至少大部分)属性的操作系统调用 copy ，但这并没有消除 unix 上的权限。 我想知道是否已经有解决方案，或者我必须自己编
我正在使用 Vuejs(不使用 jQuery)开发一个项目，该项目需要像 jvectormap 这样的 map 但正如我所说，我没有使用 jQuery，那么是否有任何其他库可以在不使用 jQuery
想要进行一个简单的民意调查，甚至不需要基于 cookie，我不在乎投了多少票。有没有类似的插件或者简单的东西？ 最佳答案 这是一个有用的教程 - 让我知道它是否适合您 using jQuery to
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
var FileBuff: TBytes; Pattern: TBytes; begin FileBuff := filetobytes(filename); Result := Co
我想要一个 vqmod xml 文件来添加一次上传多个图像的功能。身边有这样的事吗？ 编辑:Opencart版本:2.1.0.1 最佳答案 最后我写了一个xml来添加到opencart 2.1.0.1
所以考虑这样的函数: public void setTemperature(double newTemperatureValue, TemperatureUnit unit) 其中Temperatur
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我是 ggplot2 的新手，一直在尝试找到一个全面的美学列表。我想我理解它们的目的，但很难知道哪些可以在各种情况下使用(主要是几何图形？)。 Hadley 的网站偶尔会在各个几何图形的页面上列出可用
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
是否有任何 PHP 函数可以将整数转换为十万和千万？ 900800 -> 9,00,800 500800 -> 5,00,800 最佳答案 由于您已在问题标签中添加了 Yii，因此您可以按照 Yii
使用 Clojure 一段时间后，我积累了一些关于它的惰性的知识。我知道诸如map之类的常用API是否是惰性的。然而，当我开始使用一个不熟悉的API(例如with-open)时，我仍然感到怀疑。 是否
我的项目需要一个像 AvalonDock 这样的对接系统，但它的最后一次更新似乎是在 2013 年 6 月。是否有更多...积极开发的东西可以代替它？ 最佳答案 AvalonDock 实际上相当成熟并
我正在寻找一个可以逆转 clojure 打嗝的函数 所以 turns into [:html] 等等 根据@kotarak的回答，这现在对我有用: (use 'net.cgrand.enliv
我是一名优秀的程序员,十分优秀！