JS倒计时效果
Posted dlx609
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS倒计时效果相关的知识，希望对你有一定的参考价值。
倒计时实现思路：
1-用户输入的时间减去当前的时间就是剩余的时间，即倒计时
2-不能用时分秒直接相减，因为出来的结果会是负数，比如01分减去15分，结果是负14分
3-需要引入时间戳的概念，用户输入时间的总毫秒数减去当前时间的总毫秒数，得到的就是剩余时间的毫秒数
4-最后把剩余时间的毫秒数转化成天、时、分、秒的格式化展示
静态倒计时
// 定义变量，用于接收用户输入的截止时间，初始化时默认2020-12-01 18:29:59
var deadline = prompt(\'请输入截止时间：\', \'2020-12-01 18:29:59\');
// 定义倒计时函数
function countDown()
var currentTime = +new Date(); // 当前时间距离1970-01-01 00:00:00的毫秒数
var futureTime = +new Date(deadline); // 用户输入的截止时间距离1970-01-01 00:00:00的毫秒数
var times = (futureTime - currentTime) / 1000; // 截止时间减去当前时间还剩下多少秒
var d = parseInt(times / 60 / 60 / 24); // 将剩余秒数转化成天数，舍弃了不足1天的部分
d = d < 10 ? \'0\' + d : d; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var h = parseInt(times / 60 / 60 % 24); // 将不足1天的部分，转化为小时，舍弃了不足1小时的部分
h = h < 10 ? \'0\' + h : h; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var m = parseInt(times / 60 % 60); // 将不足1小时的部分，转化为分钟，舍弃了不足1分钟的部分
m = m < 10 ? \'0\' + m : m; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var s = parseInt(times % 60); // 将不足1分钟的部分，转化为秒数，舍弃了不足1秒的部分
s = s < 10 ? \'0\' + s : s; // 三元表达式，小于10，在数字前面补0，实现两位数展示
// 页面输出倒计时
document.write(\'距离活动结束，还有<br/>\' + d + \'天\' + h + \'时\' + m + \'分\' + s + \'秒\');
// 调用倒计时函数
countDown();
动态倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时效果</title>
</head>
<body>
<!-- 设置一个空div用于接收倒计时 -->
<div id="showCountDownTime"></div>
<script>
// 定义变量，用于接收用户输入的截止时间，初始化时默认2020-12-01 18:29:59
var deadline = prompt(\'请输入截止时间：\', \'2020-12-01 18:29:59\');
// 定义倒计时函数
function countDown()
var currentTime = +new Date(); // 当前时间距离1970-01-01 00:00:00的毫秒数
var futureTime = +new Date(deadline); // 用户输入的截止时间距离1970-01-01 00:00:00的毫秒数
var times = (futureTime - currentTime) / 1000; // 截止时间减去当前时间还剩下多少秒
var d = parseInt(times / 60 / 60 / 24); // 将剩余秒数转化成天数，舍弃了不足1天的部分
d = d < 10 ? \'0\' + d : d; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var h = parseInt(times / 60 / 60 % 24); // 将不足1天的部分，转化为小时，舍弃了不足1小时的部分
h = h < 10 ? \'0\' + h : h; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var m = parseInt(times / 60 % 60); // 将不足1小时的部分，转化为分钟，舍弃了不足1分钟的部分
m = m < 10 ? \'0\' + m : m; // 三元表达式，小于10，在数字前面补0，实现两位数展示
var s = parseInt(times % 60); // 将不足1分钟的部分，转化为秒数，舍弃了不足1秒的部分
s = s < 10 ? \'0\' + s : s; // 三元表达式，小于10，在数字前面补0，实现两位数展示
// 通过id获取div对象，并赋值给变量oDiv
var oDiv = document.getElementById(\'showCountDownTime\');
// 利用HTML对象的innerHTML属性，将倒计时写入div
oDiv.innerHTML = \'距离活动结束，还有<br/>\' + d + \'天\' + h + \'时\' + m + \'分\' + s + \'秒\';
// 设置定时器，每个1秒钟调用倒计时函数
setInterval(countDown, 1000);
</script>
</body>
</html>最终实现效果：
js实现60s倒计时效果
适用于获取验证码等其他场景，下面代码直接粘贴句可以使用
// 60s获取验证码的js与html
var timer = null;
var count = 60;
$(‘.box>button‘).click(function() {
var codeText = $(‘.code‘).text();
if (codeText == ‘获取验证码‘) {
timer = setInterval(function(){
count--;
$(‘.code‘).text(count+‘后获取验证码‘);
if (count <=0) {
clearInterval(timer);
$(‘.code‘).text(‘获取验证码‘);
}
},1000);
}
});
html:
<!-- 60s倒计时 -->
<div class=‘box‘>
<button class=‘code‘>获取验证码</button>
</div>
以上是关于JS倒计时效果的主要内容，如果未能解决你的问题，请参考以下文章