js实现简单掷骰子效果


Posted in Javascript onOctober 24, 2019

本案例要实现的掷骰子效果:

点击按钮,使骰子转动起来,转动随机时间之后,自动停止在某一个点数上。

思路:

点击按钮之后,将原本静态的骰子图片替换为一个动态转动的gif图片;
创建定时器,实现随机时间之后,动态的图片随机替换为1~6点图片的任意一张图片。

注意:

1、要考虑用户点击一次按钮后再连续多次点击按钮的情况。
2、为了防止不必要的问题,需要设置使定时器执行完毕一次之后,再点击按钮才有效。
3、这里设置了一个开关:
用户点击按钮时,先判断开关是否关闭,如未关闭,可执行函数内容;
若开关已关闭,则不执行函数体,即没有任何效果。

css部分

*{margin:0; padding:0}
#container{padding:10px;width:200px;margin:auto;height:200px;border:orange solid 1px; border-radius:8px;}
#dice{width:200px;height:200px;}
#command{margin:auto;width:100px;}
#command input{width:100px;height:30px;border:#ccc solid 1px;border-radius:8px;}

html部分

<div id="container">
  <img src="img/dice_1.png" id="dice" alt="">
</div>
<div id="command">
  <input type="button" onclick="shake();" value="摇一摇">
</div>

js部分

// 封装函数,便于通过id获取元素
function $(id) {
 return document.getElementById(id);
}

// 生成随机数
function rand(min,max){
 if (min>max) {
 var mid = min;
 min = max;
 max = mid;
 }
 //65<=Math.random()*26+65<26+65
 return parseInt(Math.random()*(max-min+1)+min);
}

//创建一个开关,默认为true(打开状态)
var oPlay = true;

//点击事件
function shake() {
 if(oPlay){ //判断开关的状态,若为true,执行下边的内容
 oPlay = false; //开始执行后,关闭开关
 $("dice").src = "img/diceDynamic.gif"; //将静态图替换为动图
 
 //随机时间后,将动态图替换为随机点数的图片
 var timer = setTimeout(function(){ 
  $("dice").src = "img/dice_" + rand(1,6) + ".png";
  oPlay = true; //执行完毕后,再打开开关
 },rand(500,3000));
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
JS控制GIF图片的停止与显示
Oct 24 #Javascript
js计时事件实现圆形时钟
Mar 25 #Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 #Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 #Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 #Javascript
You might like
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
实例讲解python函数式编程
2014/06/09 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python3标准库总结
2019/02/19 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
使用python制作一个解压缩软件
2019/11/13 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
装配车间主任岗位职责
2015/04/08 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python