JavaScript爆弾解体
3499 ワード
<!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>