html5模拟真实摇骰⼦,js实现简单掷骰⼦效果本案例要实现的掷骰⼦效果：
点击按钮，使骰⼦转动起来，转动随机时间之后，⾃动停⽌在某⼀个点数上。
思路：
点击按钮之后，将原本静态的骰⼦图⽚替换为⼀个动态转动的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部分
js部分
// 封装函数，便于通过id获取元素
function $(id) {
ElementById(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);js制作简单的焦点图效果
}
/
/创建⼀个开关，默认为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));
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。