掷
<style>
*{margin:0; padding:0}
#container{padding:10px;width:200px;margin:auto;height:200px;border:orange solid 1px; border-radius:8px;}
#dice{width:200px;height:200px;}
#command{margin:auto;width:100px;}
#command input{width:100px;height:30px;border:#ccc solid 1px;border-radius:8px;}
</style>
<body>
<!-- 游戏区域 -->
<div id="container">
<img src="images/dice_1.png" id="dice" alt="">
</div>
<div id="command">
<input type="button" id = "shake" value="摇一摇">
</div>
</body>
</html>
<script>
//点击摇一摇 换gif图片
//得到一个随机时间 600---5000
//延时随机时间后 得到一个1--6之间的随机图片
//当timers时间换图时 阻止按钮点击
// 一次操作后,才可以实现继续 摇骰子
var shake = document.getelementbyid("shake");
var flag = true;//当flag值为true时 按钮可以点击
shake.onclick = function(){
if( flag ){
flag = false;//阻止按钮点击
var oimg = document.queryselector("#dice");
oimg.src = "images/dicedynamic.gif";
var times = math.round( math.random()*(5000-600) + 600 );
settimeout(function(){
var index = math.round( math.random()*5 + 1 );
oimg.src = "images/dice_"+index+".png";
//一次操作结束后 开启flag值为true
flag = true;
},times)
}
}
//3000
</script>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论