js实现转动骰子模型


Posted in Javascript onOctober 24, 2019

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

<!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 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
javascript实现获取字符串hash值
May 10 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 #Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 #Javascript
windows实现npm和cnpm安装步骤
Oct 24 #Javascript
JS实现简单随机3D骰子
Oct 24 #Javascript
JS合并两个数组的3种方法详解
Oct 24 #Javascript
js实现简单掷骰子小游戏
Oct 24 #Javascript
js实现GIF图片的分解和合成
Oct 24 #Javascript
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
一些PHP写的小东西
2006/12/06 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php session劫持和防范的方法
2013/11/12 PHP
php实现插入排序
2015/03/29 PHP
php检测文本的编码
2015/07/26 PHP
php二维码生成
2015/10/19 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
js如何取消事件冒泡
2013/09/23 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Django的models模型的具体使用
2019/07/15 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
入党转预备思想汇报
2014/01/07 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
医生辞职信范文
2015/03/02 职场文书
社团招新宣传语
2015/07/13 职场文书
婚宴父亲致辞
2015/07/27 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript