JavaScript

超轻量级php框架startmvc

js实现转动骰子模型

更新时间:2020-09-18 18:24:01 作者:startmvc
本文创建了一个自动随机生成骰子数的模型,因为需要引入图片这里将图片省去了,自己导

本文创建了一个自动随机生成骰子数的模型,因为需要引入图片这里将图片省去了,自己导入图片即可验证代码


<!DOCTYPE html>
<html>
 <head>

 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <!--创建对象-->
 <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()函数使用
 var bt1=document.getElementById("button1");
 var bt2=document.getElementById("button2");
 var ims=document.getElementsByTagName("img");
 var a;
 //开始的函数
 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

js转动骰子模型 js转动骰子 js骰子模型