掷骰子效果
掷
<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>
