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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
小程序关于请求同步的总结
May 05 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python的concat等多种用法详解
2018/11/28 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
房屋产权共有协议书范本
2014/11/03 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
nginx 配置指令之location使用详解
2022/05/25 Servers
mysql中关键词exists的用法实例详解
2022/06/10 MySQL