案例22-倒计时

最新推荐文章于 2023-02-09 21:27:53 发布

kino2046

最新推荐文章于 2023-02-09 21:27:53 发布

阅读量138

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/kino2046/article/details/101976136

版权

案例专栏收录该内容

40 篇文章 1 订阅

订阅专栏

老师版本

var input = document.querySelectorAll('#fill_in input');

var target = document.querySelector('#target strong');

var go = document.querySelector('#go');

var ps = document.querySelectorAll('#date p');

var nowDate = new Date();

var wishDate = null;

var timer = null;

var onOff = true;

//初始化

init();

/**

* 可以利用日期对象相减，得到他们之间的毫秒数的差值

go.onclick = function(){

if (!onOff){

return;

}

onOff = false;

var year = input[0].value;

var month = input[1].value - 1;

var day = input[2].value;

wishDate = new Date(year, month, day);

//把获取到的差值毫秒数换算成对应的天数

timer = setInterval(function(){

upDate();

},1000);

upDate();

}

//初始化

function init(){

input[0].value = nowDate.getFullYear();

input[1].value = nowDate.getMonth() + 1;

input[2].value = nowDate.getDate();

target.innerHTML = setFormat();

}

//设置格式

function setFormat(){

var txt = nowDate.getFullYear() + '年' + (nowDate.getMonth() + 1) + '月' + nowDate.getDate() + '日';

return txt;

}

//根据差值计算出对应的天数

function countDate(dis){

var timeArr = [];

var oneDay = 1000 * 60 * 60 * 24 ;

var oneHour = 1000 * 60 * 60;

var oneMinute = 1000 * 60;

var oneSecond = 1000;

timeArr[0] = parseInt(dis / oneDay);

dis = dis % oneDay;

timeArr[1] = parseInt(dis / oneHour);

dis = dis % oneHour;

timeArr[2] = parseInt(dis / oneMinute);

dis = dis % oneMinute;

timeArr[3] = parseInt(dis / oneSecond);

// console.log(timeArr);

for (var i = 0; i < timeArr.length;i++){

timeArr[i] = fillZero(timeArr[i]);

}

console.log(timeArr);

for (var i = 0; i < timeArr.length;i++){

ps[i].innerHTML = timeArr[i];

}

// console.log(days, hours, minutes, seconds);

}

//补零

function fillZero(value){

var str = '' + value;

// console.log(str.length);

if(str.length<2){

str = '0' + str;

}

return str;

}

function upDate(){

nowDate = new Date();

var dis = wishDate - nowDate;

if (dis <= 0) {

alert('不需要执行倒计时');

clearInterval(timer);

onOff = true;

return;

}

countDate(dis);

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>倒计时 - 妙味课堂 - www.miaov.com</title>

</head>

<body>

</div>

现在距离 -

- 还剩：

</p>

</div>

</div>

取整:

向上取整: Math.ceil()

向下取整: Math.floor()

四舍五入: Math.round()

取整: parseInt

function $(cssSelector){

var els = document.querySelectorAll(cssSelector);

return els.length > 1?els:els[0];

};

(function(){

var go2 = $("#go2");

var dateEl = $("#fill_in input");

var target = $("#target strong");

var dateTime;

var timer = 0;

go2.onclick = function(){

var year = dateEl[0].value;

var month = dateEl[1].value - 1;

var date = dateEl[2].value;

dateTime = new Date(year,month,date); // 目标时间

// 求目标时间和当前时间差了多少天

target.innerHTML = dateTime.getFullYear() + '年'+(dateTime.getMonth()+1)+'月'+dateTime.getDate()+'日';

timer = setInterval(toTime,1000);

toTime();

};

function toTime(){

var nowTime = Date.now();

//console.log(dateTime - nowTime);

var disTime = dateTime.getTime() - nowTime;

if(disTime <= 0){ // 到时间了

clearInterval(timer);

$("#day").innerHTML = 0;

$("#hour").innerHTML = 0;

$("#min").innerHTML = 0;

$("#sec").innerHTML = 0;

alert("到时间了");

} else {

var day = parseInt(disTime/86400000);//多少天

var hour = parseInt((disTime%86400000)/3600000);//多少小时

var minute = parseInt((disTime%3600000)/60000);

var second = parseInt((disTime%60000)/1000);

//console.log(day,hour,minute,second);

$("#day").innerHTML = day;

$("#hour").innerHTML = hour;

$("#min").innerHTML = minute;

$("#sec").innerHTML = second;

}

})();

</script>

</body>

</html>

kino2046

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录