快捷導(dǎo)航

js實(shí)現(xiàn)轉(zhuǎn)動(dòng)骰子模型

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

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

本文創(chuàng)建了一個(gè)自動(dòng)隨機(jī)生成骰子數(shù)的模型，因?yàn)樾枰雸D片這里將圖片省去了，自己導(dǎo)入圖片即可驗(yàn)證代碼

<!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">
    //先獲取對象，并聲明一個(gè)全局變量，留給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);
      //點(diǎn)擊一次后，再次點(diǎn)擊沒有效果
      bt1.removeAttribute("onclick")
    }
    function stop(){
      clearTimeout(a)
      //點(diǎn)擊一次后，回復(fù)開始按鈕的功能
      bt1.setAttribute("onclick","tst()")
    }
    </script>
  </body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

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