个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
如果数字只剩下一位数字，我需要创建什么 JavaScript 才能使倒计时器始终为两位数。如果秒为 6，我希望它说 06，如果小时为 2，我希望它说 02，依此类推。
笔:http://codepen.io/zepzia/pen/MmoVJm
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<body>
<div class="countdown-wrapper">
<div id="countdown-text">
<div class="timer">
<div id="daysTicker" class="countdown"></div>
<div class="counter-text">DAYS</div>
</div>
<div class="timer">
<div id="hoursTicker" class="countdown"></div>
<div class="counter-text">HOURS</div>
</div>
<div class="timer">
<div id="minsTicker" class="countdown"></div>
<div class="counter-text">MINS</div>
</div>
<div class="timer">
<div id="secsTicker" class="countdown"></div>
<div class="counter-text">SECS</div>
</div>
</div>
</div>
</body>
CSS
body {
background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
.countdown-wrapper {
position: relative;
height: 400px;
}
#countdown, #countdown-text {
font-family: 'Roboto', sans-serif;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown {
font-weight: 900;
font-size: 142px;
color: #fff;
opacity: .7;
letter-spacing: -4px;
}
.counter-text {
font-weight: 900;
font-size: 40px;
color: black;
opacity: .8;
text-align: center;
}
.timer {
display: inline-block;
margin: 10px;
}
JS
// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12:00:00").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 an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
最佳答案
您可以使用toLocaleString，并将最小数字设置为2，这样当只有一位数字时，它会在其前面加上0前缀
var x = 8;
console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var y = 12;
console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));关于javascript - 在 Javascript 倒计时器中创建两位数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43761047/
25
4
0
我需要在 文档就绪 触发后 5 秒调用我的函数 abc()。 这在 jQuery 中可能吗？ $(document).ready(function () { //Wait 5 seconds then
我发现 System.Diagnostics.Stopwatch 类即使在很短的时间段(即 20 秒)内似乎也存在可测量的不准确性。对于编码为运行 20 秒的进程，我的进程显示耗时为 20.3+ 秒:
我正在使用 Ionic Framework 使用 Angular 构建一个 Android/iPhone 食谱应用程序。 功能之一应该是每个成分/步骤的警报/计时器。 我猜 Ionic 是基于 Apa
我有一个 JS 计时器脚本，从 20 秒开始倒计时 var count = 0; var speed = 1000; countdown = setInterval( function
我的 JavaScript 计时器有一个大问题。一切正常，除了 1 个按钮:停止!我不知道如何停止计数器上的所有内容(例如重置每个输入和计数器)。有什么想法可以解决这个问题吗？
所以我有一个 TimerTask 任务 在其 run() 中调用函数 onTimerComplete() onTimerComplete() 看起来像这样: private void onTimerC
我在 Eclipse 中的 windowbuilder 创建的 run() 方法中有计时器。 我不知道如何通过另一种方法停止该计时器。例如通过添加 if(MenuWindow.gameStarted
我对java很陌生，我试图在按下按钮时启动计时器，但无法启动它。我尝试了几行代码，但似乎没有任何效果。 我已经声明了我的标签、文本字段和计时器: private JTextField JTFHours
import java.util.Scanner; import java.util.Timer; import java.util.TimerTask; public class Boggle {
我正在尝试在 JavaScript 中获取计时器的值，因此当计时器为零时它会显示不同的内容； var local_t = new Date(); local_t.setSeconds(local_t.
我需要使用 jquery 为网站创建自定义 slider 。到目前为止，如果我单击按钮，我已经设法让它按照我想要的方式运行，但我想实现一个自动计时器，以便幻灯片在 5 秒后切换。 这是我的 JS 代码
我正在制作一个计时器，记录点击“通过”按钮上的“确定”时的最长时间(个人最好成绩)。我似乎无法弄清楚如何让计数器回到 0，我确信有一种方法可以只用 2 个按钮(开始 + 通过)来完成。我希望计时器在我
我有一个 java.util.Timer 用于限制电子邮件发送(如果最近发送了状态电子邮件，那么现在不要发送，而是创建一个计时器任务以稍后发送任何新状态)。 我想要的是确保最终发送所有排队的电子邮件，
我已经建立了一个在线考试门户，允许学生使用网络浏览器在线参加考试。 现在我还开发了计时器功能，用户必须在规定的时间范围内完成考试。我遇到的麻烦是，当我刷新页面时，计时器再次从新开始，例如 40 分钟。
我想知道在一定时间内禁用按钮的最佳方法是什么。当用户使用其他按钮转到其他页面时，定时器不会被重置，按钮仍将被禁用。 我读过很多关于异步任务、线程的不同方法。但是我非常不确定哪种方法最好。 我希望计时器
我正在制作一个测验应用程序，我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式，从 00:00:00 开始，直到他选择答案。当用户每秒播放时，计时器应该每秒更新一次。另外，我想
您好，计划为该 Activity 开发 android 倒数计时器应用程序，当用户单击开始按钮时显示计时器倒计时并显示计时器倒计时，用户将转到剩余 Activity ，即使计时器在后台运行，如果用户单
我想知道是否有一种简单的方法可以使用 PHP 在数据库中创建计时器，我想在数据库中创建该行 30 分钟后将其删除。如果这不够具体，我很抱歉，但我不知道如何在其中提供更多细节，请随意发表评论，以便我可以
我试图制作一种与我的计时器一起使用的对象。问题是，当我只有裸函数(不在对象中)时，它就可以工作。但是当我把它放在对象内部时它不起作用。 使用此代码我只能看到 00:01 当我只使用函数本身时，它工作正
这个问题已经有答案了: How to format numbers as currency strings (67 个回答) 已关闭 9 年前。 我想显示从 1 到 2500 的美元计时器。当计时器增
我是一名优秀的程序员,十分优秀！