微客导航 » 文章资讯 » JS控制GIF图片的停止与显示

JS控制GIF图片的停止与显示

2023-08-10 12:03:07 510

在掷骰子游戏中，通过需要控制骰子的转动以及转动结果的显示，骰子的转动可以用GIF动图来实现，每次投掷骰子的结果可以通过点击按钮显示静态图片。代码如下：






CSS实现GIF动图的停止与开始(骰子)











varimage=document.getElementById("gifImg");
varbutton=document.getElementById("btn");
functionstop(){
varmax=6;
varrandomNum=Math.floor(Math.random()*max)+1;
console.log(randomNum);
if((button.value=="暂停")&&randomNum==1){
//静态图片，可以自定义控制显示
image.src="img/all/link1.jpg"
button.value='播放';
console.log('已暂停');
}elseif((button.value=="暂停")&&randomNum==2){
//静态图片，可以自定义控制显示
image.src="img/all/link2.jpg"
button.value='播放';
console.log('已暂停');
}elseif((button.value=="暂停")&&randomNum==3){
//静态图片，可以自定义控制显示
image.src="img/all/link3.jpg"
button.value='播放';
console.log('已暂停');
}elseif((button.value=="暂停")&&randomNum==4){
//静态图片，可以自定义控制显示
image.src="img/all/link4.jpg"
button.value='播放';
console.log('已暂停');
}elseif((button.value=="暂停")&&randomNum==5){
//静态图片，可以自定义控制显示
image.src="img/all/link5.jpg"
button.value='播放';
console.log('已暂停');
}elseif((button.value=="暂停")&&randomNum==6){
//静态图片，可以自定义控制显示
image.src="img/all/link6.jpg"
button.value='播放';
console.log('已暂停');
}else{
//动图
image.src="http://dh.wk163.comimg/all/webDemo4-1.gif"
button.value='暂停';
console.log('已开始');
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS控制GIF图片的停止与显示

热门推荐

随机推荐