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 相关文章推荐
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
前台js调用后台方法示例
Dec 02 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 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 网页过期时间的控制代码
2009/06/29 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP数组相关函数汇总
2015/03/24 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
举例讲解Python装饰器
2020/12/24 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
教师的实习鉴定
2013/12/15 职场文书
小组合作学习反思
2014/02/18 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
利用Python实现Picgo图床工具
2021/11/23 Python