<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有个bug你是否能帮助找出并修改 </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="./css/base.css"/>
<style>
.move_info{
height:5000px;
width: 100%;
}
.move_info div{
float: left;
width: 33.33%;
}
.alert_box{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: " ";
z-index: 99;
background-color: transparent;
}
.alert_num{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: " ";
z-index: 99;
background-color: transparent;
}
.alert{
width: 4rem;
height: 1.5rem;
line-height: 1.5rem;
background-color: darkgoldenrod;
position: fixed;
top: 3rem;
left: 1.8rem;
text-align: center;
border-radius: 10px;
}
.relase{
width: 4rem;
height: 1.5rem;
line-height: 1.5rem;
background-color: darkgoldenrod;
position: fixed;
top: 4.7rem;
left: 1.8rem;
text-align: center;
border-radius: 10px;
}
.num{
height: 4rem;
width: 4rem;
border-radius: 100%;
line-height: 4rem;
text-align: center;
position: fixed;
top: 3rem;
left: 1.8rem;
font-size: 60px;
color: red;
}
.sumNum{
width: 100%;
height: 1rem;
line-height: 1rem;
background-color: indianred;
position: fixed;
top: 0;
text-align: center;
color: greenyellow;
transform: translateY(-2rem);
}
.move{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: " ";
background-color: transparent;
}
</style>
</head>
<body>
<div class="move">
<div class="move_info">
<div class="A">
</div>
<div class="B">
</div>
<div class="C">
</div>
</div>
</div>
<div class="alert_box" style="display: none;">
<div class="alert" >
笨蛋只能点击白色
</div>
<div class="relase" οnclick="relase()">从新开始</div>
</div>
<!--倒计时-->
<div class="alert_num" >
<div class="num">4</div>
</div>
<div class="sumNum">当前分数:<span class="dj_num" style="font-size: 30px;">0</span> 分 </div>
<script>
var moveInfo = document.getElementsByClassName('move_info')[0];
moveInfo.addEventListener('touchstart',function(){
});
var A = document.getElementsByClassName('A')[0];
var B = document.getElementsByClassName('B')[0];
var C = document.getElementsByClassName('C')[0];
var sumNum = document.getElementsByClassName('sumNum')[0];
var djNum = document.getElementsByClassName('dj_num')[0];
var num = document.getElementsByClassName('num')[0];
var alertNum = document.getElementsByClassName('alert_num')[0];
var height = [3,2,3,4,5,6,4,3,4,5,3];
var color = ['red','royalblue','darkgoldenrod','indianred','aquamarine','darkgrey','darkgreen','darkmagenta','greenyellow','darkturquoise','orange'];
for(var i=1;i<10000;i++){
for( var j=1;j<4;j++){
var h = height[Math.round(Math.random()*9+1)];
var bgc;
var divString;
if(parseInt(h)%2==0){
divString = '<div class="line addEven" style="height:'+h+'rem;width: 100%;background-color: white;border: 1px solid darkgrey;" ></div>';
}else{
divString = '<div class="line line_'+j+'" style="height:'+h+'rem;width: 100%;background-color: black;border: 1px solid darkgrey;" οnclick="setStatus(this)"></div>';
}
if(j==1){
A.insertAdjacentHTML('beforeend', divString);
}else if(j==2){
B.insertAdjacentHTML('beforeend', divString);
}else if(j==3){
C.insertAdjacentHTML('beforeend', divString);
}
}
}
//停止移动
function setStatus(ele){
var alert = document.getElementsByClassName('alert_box')[0];
alert.style.display = 'block';
moveInfo.style.cssText = 'transition-duration:3000000000000s;';
}
var addEven = document.getElementsByClassName('addEven');
for(var z=0;z<addEven.length;z++){
addEven[z].addEventListener('touchstart',function(even){
var c = color[Math.round(Math.random()*9+1)];
this.style.backgroundColor = c;
var num = parseInt(djNum.innerHTML)+1;
djNum.innerHTML = num;
})
}
//重新开始
function relase(){
location.reload(true);
}
//盒子向上移动
function move(){
moveInfo.style.cssText = 'transform: translateY(-50000px);transition-duration:70s;transition-timing-function:ease-in';
}
//倒计时
var djsNum = 4;
var clear = setInterval(function(){
console.log(djsNum);
num.innerHTML = djsNum;
if(djsNum == 0){
alertNum.style.display = 'none';
move();
clearInterval(clear);
sumNum.style.cssText = 'transform: translateY(0rem);transition-duration:2s;';
}
djsNum--;
},1000)
</script>
</body>
</html>
h5 游戏 黑白格
最新推荐文章于 2021-06-15 15:44:51 发布