1、js倒计时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
// 倒计时函数
function djs(){
// 创建当前时间
var now_time = new Date();
// 创建未来时间
var fur_time = new Date(2019,0,22,10,0,0);
// 思路:计算差几天--分别获得上面的两个时间,用1970年1月1日做参考点他们的时间差,然后一减就获得它们两个的相差的毫秒数,然后毫秒数换算成天,小时,分钟,秒
// 计算两个日期之间的时间差
var dd = fur_time.getTime() - now_time.getTime();
// 先算天数 dd除以一天的86400000毫秒(一天24小时,一小时60分钟,一分钟60秒,1秒钟1000毫秒)
// var tian = dd/(86400000);
// 用公式写 parseInt() 解析一个字符串，并返回一个整数，这里可以简单理解成返回舍去参数的小数部分后的整数。
var tian = parseInt(dd/(24*60*60*1000));
// 算小时 第一种方法就是，时间差减去天数转成的毫秒数，等于不够一天的数
// dd - tian*24*60*60*1000;
// 第二种方法就是取余
// 取余 获得计算完天数后剩余的毫秒数
dd = dd%(24*60*60*1000);
// 也可以这样写 获得计算完天数后剩余的毫秒数
// var tt = dd%(24*60*60*1000);
// 计算小时 也要取个整 parseInt() 函数可解析一个字符串,并返回一个整数
var xiaoshi = parseInt(dd/(60*60*1000));
// 取余 获得计算完小时后还剩余的毫秒数
dd= dd%(60*60*1000);
// 计算分钟
var fenzhong = parseInt(dd/(60*1000));
// 获得计算完分钟后剩余的毫秒数
dd = dd%(60*1000);
// 计算秒
var miao = parseInt(dd/1000);
// document.write("距离百家惠全场打折活动还剩"+tian+'天'+xiaoshi+'小时'+fenzhong+'分钟'+miao+'秒')
// 抓标签
var kk = document.getElementById('time').getElementsByTagName('span');
kk[0].innerHTML = tian;
kk[1].innerHTML = xiaoshi;
kk[2].innerHTML = fenzhong;
kk[3].innerHTML = miao;
}
// 手动执行一次倒计时,因为每次刷新有一秒钟页面是回到原位开始的,手动执行一次补上那一秒钟
djs();
// 写一个定时器用来倒计时的
setInterval(djs,1000);
}
</script>
</head>
<body>
<div id="time">距离百家惠全场打折活动还剩<span>0</span>天<span>0</span>小时<span>0</span>分钟<span>0</span>秒</div>
</body>
</html>
上面代码效果图片：
原文链接：https://www.qiquanji.com/post/7688.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知