Date应用计时器和倒计时

Posted 2020-09-13 bonly-ge

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Date应用计时器和倒计时相关的知识，希望对你有一定的参考价值。

计时器应用

目的：通过date设置一个计时器，实现图一效果，点击按钮开始计时，小时数、分钟数、秒数分别放到不同的表格中显示，中间用冒号相隔。

思路：第一步布局，要有3个input标签用来放置小时数、分钟数、秒数；要设置i、j、k三个变量来放置这三个value值，要有一个button按钮用来触发点击事件，还要一个计时器setInterval(function(){},1000);用来计时。

注意事项：为放置点击多次按钮导致的同时触发多个计时器累加的事情，我们需要提前声明 var oTime=null; 并在点击事件写一个 clearInterval(oTime);来清除之前的计时器。

图一

图二

代码如下：

var btn1 = document.getElementById(\'btn1\');

var inp1 = document.getElementById(\'inp1\');

var inp2 = document.getElementById(\'inp2\');

var inp3 = document.getElementById(\'inp3\');

var i, j, k;

i = 0;

j = 0;

k = 0;

inp1.value=i;

inp2.value=j;

inp3.value=k;

var oTime = null;

btn1.onclick = function () {

clearInterval(oTime);

oTime = setInterval(function () {

k++;

inp3.value=k;

if (k > 59) {

k = 0;

j++;

inp2.value=j;

if(j>59 ){

j=0;

i++;

inp1.value=i;

};

}, 1000);

};

</script>

倒计时器应用

目的：通过设置未来时间来显示距离现在还有多少时间，应用到淘宝京东等开抢，优惠倒计时等情况

思路：要设置一个未来时间需要用到new Date();在括号里可以设置未来时间，注意里面的格式是"2017/8/1,00:00:00"要用引号引起来。

代码如下：

<body>

setInterval(function () {

var box = document.getElementById("box");

var curTime = new Date();// 获取当前时间

var endTime = new Date("2017/8/1,00:00:00");//设置的时间

var shengyu = parseInt((endTime - curTime) / 1000);

var day = parseInt(shengyu / (60 * 60 * 24))//天

var hour = parseInt(shengyu / (60 * 60) % 24);//小时

var hour = parseInt(shengyu % (60 * 60 * 24) / 3600)

var min = parseInt(shengyu / 60 % 60) //分钟

var sec = shengyu % 60

box.innerhtml = "距离毕业还剩"+"<br/>"+day + "天" + hour + "小时" + min + "分钟" + sec + "秒";

}, 1000);

</script>

</body>

效果如下：

以上是关于Date应用计时器和倒计时的主要内容，如果未能解决你的问题，请参考以下文章

深入理解定时器系列第三篇——定时器应用(时钟倒计时秒表和闹钟)

带有年、月、日、小时和分钟的 date-fns 倒计时