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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
js调用刷新界面的几种方式
May 03 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
详解vue组件之间的通信
Aug 30 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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 mysql数据库操作类
2008/06/04 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php获取淘宝分类id示例
2014/01/16 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
sina的lightbox效果。
2007/01/09 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
JS实现图片切换特效
2019/12/23 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
特教教师先进事迹
2014/05/21 职场文书
班子四风对照检查材料
2014/08/21 职场文书
导游词书写之黄山
2019/08/06 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript