html,css,js实现老虎机游戏以及出现的问题

最新推荐文章于 2024-04-26 15:59:14 发布

是xiao可爱ya

最新推荐文章于 2024-04-26 15:59:14 发布

阅读量1.1w

点赞数 1

本文链接：https://blog.csdn.net/wankexinjiminfei/article/details/78131547

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

老虎机游戏：点击开始按钮，三个数字一起变化，再点击停止按钮，如果三个数字相同显示中奖，否则没有中奖。

代码：

tiger.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>老虎机</title>
<link rel="stylesheet" type="text/css" href="tiger.css">
<script type="text/javascript" src="tiger.js"></script>
</head>
<body>
<div>
<table id="tab">
<tr>
<td id='td1'>?</td>

<td id='td2'>?</td>

<td id='td3'>?</td>
</tr>
</table>
</div>
<div>
<p id="p1"></p>
<input type="button" name="" value="Go,Go,Go!!!" οnclick="start()">
<input type="button" name="" value="Ssssstop!!!" οnclick="stop()">
</div>

</body>
</html>

tiger.css

table,td{
text-align: center;
background-color:white;
border:1px solid;
border-collapse: collapse;
font-size: 200px;
}
table{
width: 900px;
height: 300px;
}
input{
position: relative;
left: 600px;
width: 150px;
height: 50px;
font-size: 100%;

}
p{
width: 900px;
height: 50px;
text-align: center;
padding-top: 25px;

}

tiger.js

var tag;
function num(){
var num1=Math.floor(Math.random()*9);
var num2=Math.floor(Math.random()*9);
var num3=Math.floor(Math.random()*9);
document.getElementById("td1").innerHTML=num1;
document.getElementById("td2").innerHTML=num2;
document.getElementById("td3").innerHTML=num3;
}
function start(){
tag=self.setInterval(num,50); //这里每点击一次就会产生一个tag，并且多次触发会导致速度加快
document.getElementById("p1").style.backgroundColor="";
document.getElementById("p1").innerHTML="";
document.getElementById("td1").style.backgroundColor="white";
document.getElementById("td2").style.backgroundColor="white";
document.getElementById("td3").style.backgroundColor="white";
}
function stop(){

clearInterval(tag);
if(document.getElementById("td1").innerHTML==document.getElementById("td2").innerHTML&&document.getElementById("td3").innerHTML==document.getElementById("td2").innerHTML){
document.getElementById("td1").style.backgroundColor="yellow";
document.getElementById("td2").style.backgroundColor="yellow";
document.getElementById("td3").style.backgroundColor="yellow";
document.getElementById("p1").style.backgroundColor="yellow";
document.getElementById("p1").innerHTML="您中奖啦！！！";
}
else{
document.getElementById("td1").style.backgroundColor="red";
document.getElementById("td2").style.backgroundColor="red";
document.getElementById("td3").style.backgroundColor="red";
document.getElementById("p1").style.backgroundColor="red";
document.getElementById("p1").innerHTML="很抱歉您未中奖！！！";
}

}

出现的问题就是如果连续点击两次及以上开始，再点击停止，他是无法停下来的，要怎么改呢

解决方法，每次生成新的tag之前把之前的tag给clear掉：

start（）方法改为：
function start(){
if(tag!=undefined){
clearInterval(tag);
}
tag=setInterval(num,100);
document.getElementById("p1").style.backgroundColor="";
document.getElementById("p1").innerHTML="";
document.getElementById("td1").style.backgroundColor="white";
document.getElementById("td2").style.backgroundColor="white";
document.getElementById("td3").style.backgroundColor="white";
}

优化的地方：怎么让数字滚动起来?

是xiao可爱ya

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
html,css,js实现老虎机游戏以及出现的问题

老虎机游戏：点击开始按钮，三个数字一起变化，再点击停止按钮，如果三个数字相同显示中奖，否则没有中奖。代码：tiger.html老虎机? ? ?tiger.csstable,td{text-align: center;background-c
复制链接

扫一扫