溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本案例要實現的擲骰子效果：
點擊按鈕，使骰子轉動起來，轉動隨機時間之后，自動停止在某一個點數上。
思路：
點擊按鈕之后，將原本靜態的骰子圖片替換為一個動態轉動的gif圖片；
創建定時器，實現隨機時間之后，動態的圖片隨機替換為1~6點圖片的任意一張圖片。
注意：
1、要考慮用戶點擊一次按鈕后再連續多次點擊按鈕的情況。
2、為了防止不必要的問題，需要設置使定時器執行完畢一次之后，再點擊按鈕才有效。
3、這里設置了一個開關：
用戶點擊按鈕時，先判斷開關是否關閉，如未關閉，可執行函數內容；
若開關已關閉，則不執行函數體，即沒有任何效果。
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);
}
//創建一個開關，默認為true(打開狀態)
var oPlay = true;
//點擊事件
function shake() {
if(oPlay){ //判斷開關的狀態，若為true，執行下邊的內容
oPlay = false; //開始執行后，關閉開關
$("dice").src = "img/diceDynamic.gif"; //將靜態圖替換為動圖
//隨機時間后，將動態圖替換為隨機點數的圖片
var timer = setTimeout(function(){
$("dice").src = "img/dice_" + rand(1,6) + ".png";
oPlay = true; //執行完畢后，再打開開關
},rand(500,3000));
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
