简单的时间倒计时
<html>
<head>
<meta charset="UTF-8">
<title>js简单时分秒倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str="2017/5/17 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime,1000);
}
</script>
</head >
<body onload="countTime()" >
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
2:设置天数
<html>
<head>
<meta charset="UTF-8">
<title>js简单时分秒倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str="2017/5/17 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime,1000);
}
</script>
</head >
<body onload="countTime()" >
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
转摘自 https://www.cnblogs.com/heizai002/p/6862418.html 感谢参考
3:关于定时器
js 定时器有以下两个方法:
setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)等同于 setTimeout(),但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :在指定的毫秒数后调用函数或计算表达式 语法setTimeout(function, milliseconds);
。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
setInterval()语法setInterval(code,millisec,lang)
----实例
<html>
<head></head>
<body>
<p id="timer">点击开始计时!</p>
<div>
<button id="cutTimer" onclick="start()">开始</button>
<button id="cutTimer" onclick="stop()">停止</button>
</div>
<script>
var cutT = document.getElementById("cutTimer");
var timer1 = null;
function start(){
var countTime = function(){
date = new Date();
dateStr = date.toLocaleTimeString();
document.getElementById("timer").innerHTML = dateStr;
}
timer1 = window.setInterval(countTime,1000);
}
function stop(){
console.log("timer stop:"+timer1);
window.clearInterval(timer1);
};
</script>
</body>
</html>
----实例二 setTimeout() ;
<body>
<input type="text" value="0" id="time"/>
<input type="button" value="开始" onclick="timecount()" id="timesum" />
<input type="button" value="暂停" onclick="timestop()" />
<script>
var timeCount = 0;
function timecount(){
document.getElementById("time").value = timeCount;
timeCount++;
setTimeout("timecount()",1000);
}
function timestop(){
clearTimeout(timeCount); //停止当前计时
document.getElementById("timesum").value = "继续计时"
}
</script>
</body>
setInterval();
语法`setInterval(function, milliseconds);
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
----实例三setInterval()
<html>
<head></head>
<body>
<input type="text" value="0" id="time"/>
<input type="button" value="开始" onclick="setcount()" id="timesum" />
<input type="button" value="暂停" onclick="setstop()" />
<script>
var timecount = 0;
function setcount(){
document.getElementById("time").value =timecount;
timecount++;
}
var time = setInterval("setcount()", 1000);
function setstop(){
clearInterval(time);
}
</script>
</body>
</html>
其两个方法都不可带 window 前缀来写
小生在网上搜索相关资料是发现简书的一位博主写的很好 话不多说上链接
https://www.jianshu.com/p/5bbe3d12bb47
另外跟多相关js定时器的知识可参考W3cSchool以及js菜鸟教程中的js定时器