快捷導(dǎo)航

js實現(xiàn)轉(zhuǎn)動骰子模型

更新時間：2019年10月24日 16:07:49 作者：Danker01

這篇文章主要為大家詳細介紹了js實現(xiàn)轉(zhuǎn)動骰子模型，自動隨機生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文創(chuàng)建了一個自動隨機生成骰子數(shù)的模型，因為需要引入圖片這里將圖片省去了，自己導(dǎo)入圖片即可驗證代碼

<!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)
      //點擊一次后，回復(fù)開始按鈕的功能
      bt1.setAttribute("onclick","tst()")
    }
    </script>
  </body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

淺談DOM的操作以及性能優(yōu)化問題-重繪重排
下面小編就為大家?guī)硪黄獪\談DOM的操作以及性能優(yōu)化問題-重繪重排。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
PHP捕捉異常中斷的方法
相信每位PHP程序員都知道，當(dāng)PHP程序出現(xiàn)異常情況，如出現(xiàn)致命錯誤、超時或者不可知的邏輯錯誤導(dǎo)致程序中斷，這個時候就可以用 register_shutdown_function進行異常處理。下面本文給出了詳細的示例代碼，有需要的朋友們下面來一起看看吧。
2016-10-10
webpack cjs運行時分析示例詳解
這篇文章主要介紹了webpack cjs運行時分析，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-12-12
js實現(xiàn)動態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實現(xiàn)動態(tài)改變字體大小，感興趣的額朋友不要錯過
2014-01-01
Javascript尾遞歸編程的實現(xiàn)
本文主要介紹了Javascript尾遞歸編程的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
javascript中的delete使用詳解
在這篇文章中作者從《JavaScript面向?qū)ο缶幊讨改稀芬粫嘘P(guān)于 delete 的錯誤講起，詳細講述了關(guān)于 delete 操作的實現(xiàn)，局限以及在不同瀏覽器和插件（這里指 firebug）中的表現(xiàn)
2013-04-04
js日歷功能對象
問題產(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)
這篇文章主要介紹了微信小程序點擊滾動到指定位置的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
詳解wepy開發(fā)小程序踩過的坑(小結(jié))
這篇文章主要介紹了詳解wepy開發(fā)小程序踩過的坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05