js實現(xiàn)轉動骰子模型
更新時間：2019年10月24日 16:07:49 作者：Danker01
這篇文章主要為大家詳細介紹了js實現(xiàn)轉動骰子模型，自動隨機生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文創(chuàng)建了一個自動隨機生成骰子數(shù)的模型，因為需要引入圖片這里將圖片省去了，自己導入圖片即可驗證代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--創(chuàng)建對象-->
<div id="c1">
<img src="img/img/sai3.png" />
</div>
<div id="c2">
<img src="img/img/sai4.png" />
</div>
<div id="c5">
<img src="img/img/sai5.png" />
</div>
<input type="button" value="開始" id="button1" onclick="tst()"/>
<input type="button" value="停止" id="button2" onclick="stop()"/>
<script type="text/javascript">
//先獲取對象，并聲明一個全局變量，留給setTimeout（）函數(shù)使用
var bt1=document.getElementById("button1");
var bt2=document.getElementById("button2");
var ims=document.getElementsByTagName("img");
var a;
//開始的函數(shù)
function tst(){
var num=Math.floor(Math.random()*6+1)
for (var i=0;i<3;i++) {
ims[i].src="img/img/sai"+num+".png";
}a=setTimeout(tst,500);
//點擊一次后，再次點擊沒有效果
bt1.removeAttribute("onclick")
}
function stop(){
clearTimeout(a)
//點擊一次后，回復開始按鈕的功能
bt1.setAttribute("onclick","tst()")
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄獪\談DOM的操作以及性能優(yōu)化問題-重繪重排。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
相信每位PHP程序員都知道，當PHP程序出現(xiàn)異常情況，如出現(xiàn)致命錯誤、超時或者不可知的邏輯錯誤導致程序中斷，這個時候就可以用 register_shutdown_function進行異常處理。下面本文給出了詳細的示例代碼，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了webpack cjs運行時分析，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
本文為大家介紹下使用js如何實現(xiàn)動態(tài)改變字體大小，感興趣的額朋友不要錯過2014-01-01
本文主要介紹了Javascript尾遞歸編程的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
在這篇文章中作者從《JavaScript面向對象編程指南》一書中關于 delete 的錯誤講起，詳細講述了關于 delete 操作的實現(xiàn)， 局限以及在不同瀏覽器和插件（這里指 firebug）中的表現(xiàn)2013-04-04
問題產(chǎn)生需求：做OA時弄到 備忘這個功能，想以日歷的形式展現(xiàn)2012-01-01
javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別分析
這篇文章主要介紹了javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了微信小程序點擊滾動到指定位置的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了詳解wepy開發(fā)小程序踩過的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05