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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
javascript网页随机点名实现过程解析
Oct 15 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
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
opencv+python实现均值滤波
2020/02/19 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Django在Model保存前记录日志实例
2020/05/14 Python
小学教师个人先进事迹材料
2014/05/17 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
JavaScript数组 几个常用方法总结
2021/11/11 Javascript