最近在初学js。遇到定时器这个函数,就想想可以做一个十分钟的倒计时功能。(变量命名不规范,见谅见谅。。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function() {
var odiv = document.getElementById('div');
//将总时间以秒为单位进行计算10*60
var time = 600;
//设每秒减1
var sp = -1;
var btn = document.getElementById('ee');
function jishiqi(){
time += sp;
//总时间除以60取整即可以得到当前分钟数
var min = parseInt(time/60);
//同理,总的时间取余就是当前的秒数
var sec = time%60;
var sTr = '现在剩余时间是:'+ min+ '分:'+ sec +'秒';
//让div标签中显示这个字符串
odiv.innerHTML = sTr;
}
btn.onclick = function() {
//当前运行一次是因为刚打开网页后,计时器会延迟一秒显示,所以必须先运行一次,让网页无延迟显示
jishiqi();
//然后利用定时器每隔一秒运行一次
var timer = setInterval(jishiqi,1000);
}
}
</script>
<style>
.ww{
font-size: 30px;
}
</style>
<body>
<input type="button" value="dianjiwo" id="ee">
<div id="div" class="ww"></div>
</body>
</html>