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 关闭IE6、IE7
Jun 01 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python getopt 参数处理小示例
2009/06/09 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python的文件操作方法汇总
2017/11/10 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python中常用信号signal类型实例
2018/01/25 Python
python list转矩阵的实例讲解
2018/08/04 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
安全生产月标语
2014/10/07 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
律师催款函范文
2015/06/24 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书