摇7小游戏

最新推荐文章于 2021-06-02 17:18:49 发布

赤兔马百花袍

最新推荐文章于 2021-06-02 17:18:49 发布

阅读量389

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xiao_qing_ge/article/details/102976400

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

交代背景

大家在繁忙的工作中也要放松一下，当当当小编给各位看官上的这道代码，看一看谁能摇到三个“7”！

代码

lucky.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
		<title>game</title>
		<link type="text/css" rel="stylesheet" href="stycle.css">
		<script type="text/javascript" src="luckyseven.js"></script>
		<script>
			window.onload = function(){
				init();
			}
		</script>
	</head>
	<body>
		<div id="box1" class="box">1</div>
		<div id="box2" class="box">2</div>
		<div id="box3" class="box">3</div>
		<div class="clear"></div>
		<div id="msg" style="display:none;"></div>
		<input type="button" id="btnStart" value="Start">
		<input type="button" id="btnStop1" value="Stop">
		<input type="button" id="btnStop2" value="Stop">
		<input type="button" id="btnStop3" value="Stop">
	</body>
</html>

stycle.css

{
	margin:0;
	padding:0;
}
.clear{
	clear:both;
}
.box{
	width:100px;
	border:1px solid black;
	float:left;
	margin:10px;
	background-color:#eee;
	font-size:36px;
	text-align:center;
	line-height:36px;
	padding:5px 0;
}
#box1{
	margin-left:50px;
}
input{
	border:1px solid #666;
}
#msg{
	border:1px solid #069;
	background-color:#FF0;
	width:460px;
	margin:10px 0;
}
#btnStop1{
	margib-left:35px;
}
#btnStop2{
	margin-left:75px;
}
#btnStop3{
	margin-left:75px;
}

luckyseven.js

/*
*取一个1～9之间的随机数
*
*/
function getRandom(){
	var md = Math.floor(Math.random()*10);
	return md;
}
/*
*开始设置游戏，设置定时期更新3个容器的内容，并绑定按钮事件处理
*/
function startGame(){
	document.getElementById("btnStart").disable = true;
	document.getElementById("msg").style.display = "none";
	interval1 = setInterval(function(){
		document.getElementById("box1").innerHTML = getRandom();
	},1);
	interval2 = setInterval(function(){
		document.getElementById("box2").innerHTML = getRandom();
	},1);
	interval3 = setInterval(function(){
		document.getElementById("box3").innerHTML = getRandom();
	},1);
	document.getElementById("btnStop1").onclick = function(){
		clearInterval(interval1);
		interval1=null;
		check();
	}
	document.getElementById('btnStop2').onclick = function(){
		clearInterval(interval2);
		interval2=null;
		check();
	}
	document.getElementById('btnStop3').onclick = function(){
		clearInterval(interval3);
		interval3=null;
		check();
	}
}
/*
*检查是否3个容器都已经停止了
*
*/
function check(){
	if(interval1 == null && interval2 == null && interval3 == null){
		endGame();
	}
}
/*
*结束游戏，判断是否为3个7，如果是，测显示中奖信息，日过不是，提示为中奖
*
*/
function endGame(){
	if(document.getElementById('box1').innerHTML == '7' && document.getElementById('box2').innerHTML == '7' && document.getElementById('box3').innerHTML == '7'){
		dicument.getElementById('msg').style.display = 'block';
		document.getElementById('msg').innerHTML = 'Lucky Seven!!'
	}else{
		document.getElementById('msg').style.display = 'block';
		document.getElementById('msg').innerHTML = 'Bad Lucky!!'
	}
	document.getElementById("btnStart").disabled =false;
}
/*
*初始化程序
*/
function init(){
	document.getElementById('btnStart').onclick = function(){
		startGame();
	}
}

在这里插入图片描述
无论小编怎么摇都不行，唉（-_-"）。这个艰难的任务就交给各位看官了（不可以改代码哦！）

赤兔马百花袍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
摇7小游戏

交代背景大家在繁忙的工作中也要放松一下，当当当小编给各位看官上的这道代码，看一看谁能摇到三个“7”！代码lucky.html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <script type="text/javascript" src="...
复制链接

扫一扫

专栏目录