js实现转动骰子模型

 更新时间:2019年10月24日 16:07:49   作者:Danker01  
这篇文章主要为大家详细介绍了js实现转动骰子模型,自动随机生成骰子数的模型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

<!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>

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

相关文章

  • JavaScript实现的九种排序算法

    JavaScript实现的九种排序算法

    这篇文章主要给大家介绍了关于利用JavaScript实现的九种排序算法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js变量值传到php过程详解 将php解析成数据

    js变量值传到php过程详解 将php解析成数据

    这篇文章主要介绍了js变量值传到php过程详解 将php解析成数据,传参数去后台,用ajax,或者原生js方式拼接url。明白原理,洞悉系统是先解析php,再执行html代码和js代码。,需要的朋友可以参考下
    2019-06-06
  • 用js来生成随机彩票号码清单

    用js来生成随机彩票号码清单

    用js来生成随机彩票号码清单...
    2007-02-02
  • javascript实现下拉菜单效果

    javascript实现下拉菜单效果

    这篇文章主要为大家详细介绍了javascript实现下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    这篇文章主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下
    2018-08-08
  • js清空form表单中的内容示例

    js清空form表单中的内容示例

    这篇文章主要介绍了js如何清空form表单中的内容,下面有个不错的示例,大家可以参考下
    2014-05-05
  • 微信小程序代码上传、审核发布小程序

    微信小程序代码上传、审核发布小程序

    这篇文章主要为大家详细介绍了微信小程序代码上传、审核发布小程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js实现删除li标签一行内容

    js实现删除li标签一行内容

    这篇文章主要为大家详细介绍了js实现删除li标签一行内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • javascript在当前窗口关闭前检测窗口是否关闭

    javascript在当前窗口关闭前检测窗口是否关闭

    检测窗口是否关闭,在当前窗口关闭前使用js做到这一点,下面是具体的实现,感兴趣的朋友可以参考下
    2014-09-09
  • 教你用wxml2canvas将微信小程序页面转为图片

    教你用wxml2canvas将微信小程序页面转为图片

    如果需要实现将小程序的页面转为图片,第一步是要先把页面转为canvas,再将canvas转为图片,下面这篇文章主要给大家介绍了关于用wxml2canvas将微信小程序页面转为图片的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论