概述:
此文件实现了简单时间倒计功能并可自定义设置停止计时的时间量.
Web截图:
代码详情:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="卡布奇诺奶茶的独特">
<meta name="Keywords" content="倒计时,Count down">
<meta name="Description" content="此文件实现了简单时间倒计功能并可设置停止计时时间">
<title>倒计时</title>
</head>
<style type="text/css">
div{
width:500px;/*div宽度:500像素*/
margin:0 auto;/*div居中*/
padding-left:10px;/*div内部内容左边距:10像素*/
margin-top:230px;/*div外部上边距:230像素*/
}
li{
background:#F2F2F2;/*li标签背景色*/
width:90px;/*li标签宽度:90像素*/
float:left;/*li标签左浮动*/
list-style-position:inside;/*列表样式的位置在内部,在外部用:outside */
list-style-type:none;/*列表样式的类型:空心圆*/
text-align:center;/*文本居中*/
font-weight:bold;/*字体加粗*/
}
li:hover{
background:#CCCCCC;/*通过伪类元素:hover,来设置li标签动态背景色*/
}
</style>
<script type="text/javascript">
// var count = 0;
//创建“getTime”函数
function getTime(){
//最后时间(未来时间)【自定义设置】
var endTime = new Date('2022-01-01 00:00:00');
//现在时间(系统时间)
var nowTime = new Date();
//最后时间减去现在时间的【时间差】
var t = endTime.getTime()-nowTime.getTime();
//天
var d = 0;
//时
var h = 0;
//分
var m = 0;
//秒
var s = 0;
//if判断
if(t>=0){
d = Math.floor(t/1000/60/60/24);
h = Math.floor(t/1000/60/60%24);
m = Math.floor(t/1000/60%60);
s = Math.floor(t/1000%60);
}
/*
*在此设置停止时间量【10秒后停止倒计时】【与上方的“var count = 0;”语句相对应】
*/
// count++;
// if(count==10){
// window.clearInterval(time);
// }
//获取相关元素ID值得对象并对日期进行格式化操作
document.getElementById("t_d").innerHTML = (d<10?"0"+d:d) + "天";
document.getElementById("t_h").innerHTML = (h<10?"0"+h:h) + "时";
document.getElementById("t_m").innerHTML = (m<10?"0"+m:m) + "分";
document.getElementById("t_s").innerHTML = (s<10?"0"+s:s) + "秒";
}
//声明创建“time”时间对象及按照指定的周期(以毫秒计)来调用函数“getTime()”
var time = window.setInterval("getTime()",1000);
</script>
<body>
<!--ele start-->
<div>
<ul>
<li id="t_d"></li>
<li id="t_h"></li>
<li id="t_m"></li>
<li id="t_s"></li>
</ul>
</div>
<!--ele end-->
</body>
</html>
-----------------------------------------------
感谢您倾心的阅读