快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單擲骰子效果

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

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

本案例要實(shí)現(xiàn)的擲骰子效果：

點(diǎn)擊按鈕，使骰子轉(zhuǎn)動(dòng)起來，轉(zhuǎn)動(dòng)隨機(jī)時(shí)間之后，自動(dòng)停止在某一個(gè)點(diǎn)數(shù)上。

思路：

點(diǎn)擊按鈕之后，將原本靜態(tài)的骰子圖片替換為一個(gè)動(dòng)態(tài)轉(zhuǎn)動(dòng)的gif圖片；
創(chuàng)建定時(shí)器，實(shí)現(xiàn)隨機(jī)時(shí)間之后，動(dòng)態(tài)的圖片隨機(jī)替換為1~6點(diǎn)圖片的任意一張圖片。

注意：

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

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

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

// 生成隨機(jī)數(shù)
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)建一個(gè)開關(guān)，默認(rèn)為true(打開狀態(tài))
var oPlay = true;

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: