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 处理事件绑定的一些兼容写法
Dec 24 Javascript
js动态为代码着色显示行号
May 29 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
原生JS实现无缝轮播图片
Jun 24 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作的文本留言本的例子(二)
2006/10/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
用ADODB.Stream转换
2007/01/22 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
Django的信号机制详解
2017/05/05 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
pandas实现选取特定索引的行
2018/04/20 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python isinstance函数用法详解
2020/02/13 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
物业电工岗位职责
2013/11/20 职场文书
办理生育手续介绍信
2014/01/14 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
农村党员干部承诺书
2015/05/04 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
5道关于python基础 while循环练习题
2021/11/27 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python