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 相关文章推荐
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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新闻发布系统教程
2014/05/09 PHP
php实现无限级分类
2014/12/24 PHP
session 加入redis的实现代码
2016/07/15 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
深入探讨前端框架react
2015/12/09 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
详解React 条件渲染
2020/07/08 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python实现文字版扫雷
2020/04/24 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
五年级学生评语大全
2014/12/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
家庭贫困证明
2015/06/16 职场文书
创业计划书之家政服务
2019/09/18 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers
利用Python实现模拟登录知乎
2022/05/25 Python