js實現簡單擲骰子效果

更新時間：2019年10月24日 10:37:42 作者：葉子_o

這篇文章主要為大家詳細介紹了js實現簡單擲骰子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本案例要實現的擲骰子效果：

點擊按鈕，使骰子轉動起來，轉動隨機時間之后，自動停止在某一個點數上。

思路：

點擊按鈕之后，將原本靜態(tài)的骰子圖片替換為一個動態(tài)轉動的gif圖片；
創(chuàng)建定時器，實現隨機時間之后，動態(tài)的圖片隨機替換為1~6點圖片的任意一張圖片。

注意：

1、要考慮用戶點擊一次按鈕后再連續(xù)多次點擊按鈕的情況。
2、為了防止不必要的問題，需要設置使定時器執(zhí)行完畢一次之后，再點擊按鈕才有效。
3、這里設置了一個開關：
用戶點擊按鈕時，先判斷開關是否關閉，如未關閉，可執(zhí)行函數內容；
若開關已關閉，則不執(zhí)行函數體，即沒有任何效果。

css部分

*{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;}

html部分

<div id="container">
  <img src="img/dice_1.png" id="dice" alt="">
</div>
<div id="command">
  <input type="button" onclick="shake();" value="搖一搖">
</div>

js部分

// 封裝函數，便于通過id獲取元素
function $(id) {
 return document.getElementById(id);
}

// 生成隨機數
function rand(min,max){
 if (min>max) {
 var mid = min;
 min = max;
 max = mid;
 }
 //65<=Math.random()*26+65<26+65
 return parseInt(Math.random()*(max-min+1)+min);
}

//創(chuàng)建一個開關，默認為true(打開狀態(tài))
var oPlay = true;

//點擊事件
function shake() {
 if(oPlay){ //判斷開關的狀態(tài)，若為true，執(zhí)行下邊的內容
 oPlay = false; //開始執(zhí)行后，關閉開關
 $("dice").src = "img/diceDynamic.gif"; //將靜態(tài)圖替換為動圖
 
 //隨機時間后，將動態(tài)圖替換為隨機點數的圖片
 var timer = setTimeout(function(){ 
  $("dice").src = "img/dice_" + rand(1,6) + ".png";
  oPlay = true; //執(zhí)行完畢后，再打開開關
 },rand(500,3000));
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: