• 欢迎光临~

关于 js制作网页上的倒计时

开发技术 开发技术 2022-12-22 次浏览

最近在初学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>

程序员灯塔
转载请注明原文链接:关于 js制作网页上的倒计时
喜欢 (0)