js倒计时10秒

<%@ 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" onclick="detonate();" value="引爆定时zd" />
<input id="t2" type="button" onclick="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>

你可能感兴趣的:(倒计时)