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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
再说下636单管机
2021/03/02 无线电
PHP开发中常用的字符串操作函数
2011/02/08 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
Django之模型层多表操作的实现
2019/01/08 Python
python计算二维矩形IOU实例
2020/01/18 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
局域网定义和特性
2016/01/23 面试题
商务专员岗位职责
2013/11/23 职场文书
前台接待岗位职责
2013/12/03 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
中学校庆方案
2014/03/17 职场文书
工作求职自荐信
2014/06/13 职场文书
社区护士演讲稿
2014/08/27 职场文书
2015入党自荐书范文
2015/03/05 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
雷锋观后感
2015/06/10 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL