倒计时封装

最新推荐文章于 2019-09-19 14:32:49 发布

weixin_33980459

最新推荐文章于 2019-09-19 14:32:49 发布

阅读量76

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/ochmdlc/blog/837579

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
.bj{
background-color:grey;
}
#djs{
text-align:center;
color:#fff;
font-size:15px;
margin-top:200px;
text-shadow:1px 1px 1px rgba(0,0,0,0.4)
}
.js-bj {
background:#505050;
color:#fff;
border-radius:5px;
width:35px;
font-family:Impact;
font-size:20px;
display:inline-block
}
</style>
</head>
<body class='bj'>
<div id="djs">
</div>
</body>

var interValObj; //定义计时器名称

function setRemainTime() {
if (sysSecond > 0) {
var second = Math.floor(sysSecond % 60) >= 10 ? Math.floor(sysSecond % 60) : ('0' + Math.floor(sysSecond % 60));// 计算秒
var minite = Math.floor((sysSecond / 60) % 60) >= 10 ? Math.floor((sysSecond / 60) % 60) : ('0' + Math.floor((sysSecond / 60) % 60));//计算分
var hour = Math.floor((sysSecond / 3600) % 24) >= 10 ? Math.floor((sysSecond / 3600) % 24) : ('0' + Math.floor((sysSecond / 3600) %24));//计算小时
var day = Math.floor((sysSecond / 3600) /24)%365 >= 10 ? Math.floor((sysSecond / 3600) /24)%365 : ('0' + Math.floor((sysSecond / 3600) /24)%365);//计算天
var year = Math.floor((sysSecond / 3600) / 24/365) >= 10 ? Math.floor((sysSecond / 3600) / 24/365) : ('0' + Math.floor((sysSecond / 3600) / 24/365));//计算年

二.改进后用定时器的方法

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>倒计时实现</title>
   </head>
   <script src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
.bj{
background-color:grey;
}
#djs{
text-align:center;
color:#fff;
font-size:15px;
margin-top:200px;
text-shadow:1px 1px 1px rgba(0,0,0,0.4)
}
.js-bj {
background:#505050;
color:#fff;
border-radius:5px;
width:35px;
font-family:Impact;
font-size:20px;
display:inline-block
}
</style>
   <body class='bj'>
<div id="djs">
</div>
</body>

var timeHtml = "<label><b>距离国足夺取世界杯还剩：</b></label><label class='js-bj'>" + year + "</label> 年 <label class='js-bj'>" + day + "</label> 天 <label class='js-bj'>" + hour + "</label> 时 <label class='js-bj'>" + minite + "</label> 分 <label class='js-bj'>" + second + "</label> 秒"

$("#djs").html(timeHtml);
sysSecond--;

}else{
   $("#djs").html("<label><b>恭喜国足成功夺取世界杯：</b></label><label class='js-bj'>00</label> 年 <label class='js-bj'>00</label> 天 <label class='js-bj'>00</label> 时 <label class='js-bj'>00</label> 分 <label class='js-bj'>00</label> 秒");
clearInterval(Timer);
}


   },1000)

</script>

</html>

转载于:https://my.oschina.net/ochmdlc/blog/837579