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调用WebService的示例
Apr 07 Javascript
jquery 选择器部分整理
Oct 28 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
Java中final关键字详解
2015/08/10 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python list的index()和find()的实现
2020/11/16 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
Java的五个基础面试题
2016/02/26 面试题
殡葬服务心得体会
2014/09/11 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
红白喜事主持词
2015/07/06 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server