js-倒计时30秒

最新推荐文章于 2022-11-03 11:56:40 发布

原创最新推荐文章于 2022-11-03 11:56:40 发布 · 4.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #倒计时

本文介绍了一个简单的网页倒计时功能实现方法，使用HTML、CSS和JavaScript完成倒计时效果展示，并通过设置时间间隔更新剩余时间。

<html>
<head>
<title>倒计时</title>

<style type= "text/css">
.daojishi h2
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
margin-bottom:5px;
color:#151515;
}
.daojishi #timer
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
color:#151515;
font-weight:bold;
}
</style>

</script>
</head>
<body onload = "timer()">
<input type="redio" id="asd" name="asd" onclick="asd()">123
<div class = "daojishi">
<h2>剩余时间为：</h2>
<div id = "timer">
</div>
</div>
</body>
<script type="text/javascript">
var nowts=30000;
var aa=null;
function timer() {

showTime(nowts);

aa=setInterval("nowTimeOver()", 1000);

}
function nowTimeOver() {
console.info(12)
nowts = nowts - 1000;
showTime(nowts);
}
function showTime(ts) {
if(nowts<1000){
window.clearInterval(aa);

}
document.getElementById("timer").innerHTML = checkTime(parseInt(ts / 1000 % 60, 10)) + "秒";
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
</html>