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 实用的文字链提示框效果
Jun 30 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
js中switch语句的学习笔记
Mar 25 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
第七节--类的静态成员
2006/11/16 PHP
优化PHP代码的53条建议
2008/03/27 PHP
php读取msn上的用户信息类
2008/12/05 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
tensorflow获取变量维度信息
2018/03/10 Python
Django 路由控制的实现
2019/07/17 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
《中国的气候》教学反思
2014/02/23 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
为自己工作观后感
2015/06/11 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android