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中各种trim的实现详细解析
Dec 10 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php实现简单四则运算器
2020/11/29 PHP
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
scrapy-splash简单使用详解
2021/02/21 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
本科毕业生自荐信
2014/05/26 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
员工生日活动方案
2014/08/24 职场文书
自荐信怎么写
2015/03/04 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
宪法宣传标语100条
2019/10/15 职场文书
js Proxy的原理详解
2021/05/25 Javascript
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Vue2.0搭建脚手架
2022/03/13 Vue.js