ZG前端学习第四天2020-10-31

最新推荐文章于 2024-06-20 20:20:21 发布

短腿小萝卜

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量109

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_43707498/article/details/109409466

版权

周六自习今日学习利用js做一个简单的倒计时
演示效果：
在这里插入图片描述
核心思想：

因为直接通过 new Date()获取的时间存在某些问题，所以通过使用输入时间和当前时间的时间戳来进行修改
定时的显示时间的变化所以用到setInterval()定时器来控制
计算时的公式转换

d = parseInt(times/60/60/24);
h = parseInt(times/60/60%24);
m = parseInt(times/60%60);
s = parseInt(times%60)

代码展示：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title></title>
 <style>
  *{margin: 0;padding: 0;}
  ul{list-style: none;}
  ul li {float: left;margin: 10px 10px;font-size: 40px;text-align: center;background: #0000ff;line-height: 100px;width: 100px;height:100px;border:1px solid #000000;
  
 </style>
</head>
<body>
 <ul>
  <li class="box0">天</li>
  <li class="box1">时</li>
  <li class="box2">分</li>
  <li class="box3">秒</li>
 </ul>
<script type="text/javascript">
 var dd = document.querySelector('.box0');
 var hh = document.querySelector('.box1');
 var mm = document.querySelector('.box2');
 var ss = document.querySelector('.box3');
    var time = prompt('请输入你想输入的时间');
 // var time = '2020-10-31 12:00:00'
 var inputTime = + new Date (time);//获取输入时间的时间戳
 // console.log(m);
 // console.log(inputTime);
 countDown();//先调用这个函数 防止第一次刷新的时候出现空白
 setInterval(countDown,1000);
 
    function countDown (){
 var nowTime = + new Date();//获取当前时间的时间戳
 // console.log(nowTime);
 var times = (inputTime - nowTime) / 1000;//获得总的秒数
 var d = parseInt(times/60/60/24);//获取倒计时的天数
 d = d<10? '0'+d : d;
 dd.innerHTML = d + '天';
 var h = parseInt(times/60/60%24);//获取倒计时的小时
 h = h<10? '0'+h : h;
 hh.innerHTML = h + '时';
 var m = parseInt(times/60%60);//获取倒计时的分钟
 m = m<10? '0'+m : m;
 mm.innerHTML = m + '分';
 var s = parseInt(times%60);//获取倒计时的秒数
 s = s<10? '0'+s : s;
 ss.innerHTML = s + '秒';
 return d +'天' + h + '时' +m +'分' + s +'秒';
}
</script> 
</body>
</html>

以上代码可以添加if条件判断等语句进行更好的优化（比如输入时间的时间戳小于当前时间的时间戳或者所输入的月份日份不合理的话可以设置显示框来提示用户所输入的时间是错误的）（当然对于电商等倒计时由管理给定默认时间就行）

短腿小萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZG前端学习第四天2020-10-31

周六自习今日学习利用js做一个简单的倒计时演示效果：核心思想：因为直接通过 new Date()获取的时间存在某些问题，所以通过使用输入时间和当前时间的时间戳来进行修改定时的显示时间的变化所以用到setInterval()定时器来控制计算时的公式转换d = parseInt(times/60/60/24);h = parseInt(times/60/60%24);m = parseInt(times/60%60);s = parseInt(times%60)代码展示：
复制链接

扫一扫