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表格内容筛选实现思路及代码
Apr 16 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php文件操作实例代码
2012/05/10 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Python中函数的用法实例教程
2014/09/08 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python如何求解两数的最大公约数
2018/09/27 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python列表切片操作实例总结
2019/02/19 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
教育专业自荐书范文
2013/12/17 职场文书
李敖北大演讲稿
2014/05/24 职场文书
专科生就业求职信
2014/06/22 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python