您的位置：首页 > Web前端 > JavaScript

JavaScript拆炸弹

2015-11-06 00:00 701 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>倒计时炸弹效果</title>
<meta name="author" content='Rich'>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
.box{
position: relative;
width:500px;
height:300px;
margin:0 auto;
background-color: #233333;
border-radius: 15px;
text-align: center;
box-shadow:0 2px 4px #888;
}
.box .time{
width:80%;
height:30px;
background-color: #fff;
margin:0 auto;
position:relative;
top: 10px;
}
.box .time #time{
line-height: 30px;
color:#f00;
font-size: 18px;
}
.box .line{
width:80%;
height:240px;
position: absolute;
bottom: 10px;
left: 10%;
background-color: rgba(255,255,255,0.8);
}
.box .line li{
float: left;
margin:5px 60px;
cursor: pointer;
}
.box .line #red{
width:10px;
height:220px;
background-color: red;
}
.box .line #blue{
width:10px;
height:220px;
background-color: blue;
}
.box .line #yellow{
width:10px;
height:220px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="time">
<span id='time'>0:5:00</span>
</div>
<div class="line">
<ul>
<li id="red" onclick="cut(true);"></li>
<li id="blue" onclick="cut(false);"></li>
<li id="yellow" onclick="cut(false);"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var time = 300; // 倒计时时间，以秒为单位，默认五分钟
var hh = 0,mm = 0,ss = 0;
var showTime = document.getElementById('time');
var myTime = null;
function checkTime(){
if(time > 0){
ss = time%60; // 获取秒数
// 获取分钟数
var m1 = parseInt(time/60);
mm = m1%60;
// 获取小时数
hh = parseInt(m1/60);
}

return hh,mm,ss;
}

function doStart(){
checkTime();
myTime = setInterval("running()",1000);
}

function running(){
ss--;
if(ss < 0){
ss = 59;
mm--;
if(mm < 0){
mm = 59;
hh--;
if(hh <= 0){
alert('BOOM~~~');
clearInterval(myTime);
return false;
}
}
}
showTime.innerHTML = hh + ':' + mm + ':' + ss;
}

// 拆炸弹
var cutLine = 0;
function cut(e){
if(e){
if(cutLine == 2){
alert('Sorry,你已拆错线');
return;
}
if(myTime != null){
clearInterval(myTime);
cutLine = 1;
}
} else {
if(cutLine == 1){
alert('炸弹已拆除!');
return true;
}
myTime = setInterval("running()",10);

return cutLine=2;
}
}

doStart();

</script>
</body>
</html>

遇到两个问题，求指点：

爆炸之后，倒计时仍继续

拆错线之后，倒计时也继续

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航