js倒计时10秒

最新推荐文章于 2023-06-28 10:34:33 发布

揽峰moc

最新推荐文章于 2023-06-28 10:34:33 发布

阅读量967

点赞数

本文链接：https://blog.csdn.net/big1989wmf/article/details/70144004

版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Time bomb</title>
<style type="text/css">
#t2{display:none;}
</style>

</head>
<body>
<div id="test">
<input id="t1" type="button" οnclick="detonate();" value="引爆定时zd" />
<input id="t2" type="button" οnclick="demolite();" value="拆除定时zd" />
</div>
</body>
</html>
<script type="text/javascript">
var x = document.getElementById("test");
var x2 = document.getElementById("t1");
var x3 = document.getElementById("t2");
var c = 10;
var timeId1 = 0;
function detonate(){
x3.style.display = "inline";
x2.value = "倒计时";
x2.value += c--;
if(c >= 0){
timeId1 = window.setTimeout(detonate,1000);
}else{
x2.style.display = "none";
x3.style.display = "none";
bomb = document.createElement("div");
bomb.innerHTML = "<img src='images/after/bomb.jpg' alt='bomb' />";
document.body.appendChild(bomb);
}
}
function demolite(){
window.clearTimeout(timeId1);
x3.style.display = "none";
alert("恭喜，zd拆除成功");
x2.value = "继续";
}
</script>