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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
javascript html5实现表单验证
Mar 01 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
详解PHP中的PDO类
2015/07/06 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年平安夜寄语
2014/12/08 职场文书
四群教育工作总结
2015/08/10 职场文书
国庆节主题班会
2015/08/15 职场文书
趣味运动会口号
2015/12/24 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
mysql函数全面总结
2021/11/11 MySQL
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript