擲骰子效果

時間 2019-11-26

標籤擲骰子效果简体版

原文原文鏈接

擲html

	<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。