首页 > 代码库 > Date应用计时器和倒计时

Date应用计时器和倒计时

2024-09-16 20:48:15   208人阅读

计时器应用

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

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

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

技术分享图一

技术分享图二

代码如下：

<script>

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=http://www.mamicode.com/i;>

inp2.value=http://www.mamicode.com/j;>

inp3.value=http://www.mamicode.com/k;>

var oTime = null;

btn1.onclick = function () {

clearInterval(oTime);

oTime = setInterval(function () {

k++;

inp3.value=http://www.mamicode.com/k;>

if (k > 59) {

k = 0;

j++;

inp2.value=http://www.mamicode.com/j;>

if(j>59 ){

j=0;

i++;

inp1.value=http://www.mamicode.com/i;>

};

};

}, 1000);

};

</script>

 

倒计时器应用

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

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

代码如下：

<body>

<div id=box><box>

<script type="text/javascript">

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应用计时器和倒计时


联系
我们