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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 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教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php写的AES加密解密类分享
2014/06/20 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python中的sort方法使用详解
2014/07/25 Python
python传递参数方式小结
2015/04/17 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Python hashlib模块的使用示例
2020/10/09 Python
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python