JS控制GIF图片的停止与显示（掷骰子实现）

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS实现GIF动图的停止与开始(骰子)</title><style type="text/css"></style></head><body><!--动图--><img src="img/all/webDemo4-1.gif" alt="gifImg" id="gifImg" /><input type="button" name="btn" id="btn" value="暂停" οnclick="stop()" /></body><script type="text/javascript">var image = document.getElementById("gifImg");var button = document.getElementById("btn");function stop() {  var max = 6;var randomNum = Math.floor(Math.random()*max)+1;console.log(randomNum);if((button.value == "暂停") && randomNum == 1) {//静态图片，可以自定义控制显示image.src = "img/all/link1.jpg"button.value = '播放';console.log('已暂停');} else if((button.value == "暂停") && randomNum == 2) {//静态图片，可以自定义控制显示image.src = "img/all/link2.jpg"button.value = '播放';console.log('已暂停');} else if((button.value == "暂停") && randomNum == 3) {//静态图片，可以自定义控制显示image.src = "img/all/link3.jpg"button.value = '播放';console.log('已暂停');} else if((button.value == "暂停") && randomNum == 4) {//静态图片，可以自定义控制显示image.src = "img/all/link4.jpg"button.value = '播放';console.log('已暂停');} else if((button.value == "暂停") && randomNum == 5) {//静态图片，可以自定义控制显示image.src = "img/all/link5.jpg"button.value = '播放';console.log('已暂停');} else if((button.value == "暂停") && randomNum == 6) {//静态图片，可以自定义控制显示image.src = "img/all/link6.jpg"button.value = '播放';console.log('已暂停');} else{//动图image.src = "img/all/webDemo4-1.gif"button.value = '暂停';console.log('已开始');} }</script>
</html>

以上！

JS控制GIF图片的停止与显示（掷骰子实现）相关推荐

java让gif图停止,JS控制GIF图片的停止与显示
在掷骰子游戏中,通过需要控制骰子的转动以及转动结果的显示,骰子的转动可以用GIF动图来实现,每次投掷骰子的结果可以通过点击按钮显示静态图片.代码如下: CSS实现GIF动图的停止与开始(骰子) var ...
html背景音乐bgsound,js控制网页背景音乐播放停止(bgsound)
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
js控制页面元素的隐藏与显示
2019独角兽企业重金招聘Python工程师标准>>> <body> <div> <button οnclick='javascript:Layer ...
一款js控制背景图片平铺
背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style>html,body{height:100%;padding:0;margin:0 ...
js控制html元素的隐藏和显示
方法一: document.getElementById("ElementId").style.visibility="hidden"; document.ge ...
JS控制图片显示的大小（图片等比例缩放）
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
html 禁止gif自动播放,通过CSS或JS实现gif动态图片的停止与播放
到需要可以随时随地停止gif动态图片播放的需求的时候,可以通过下面几种方法实现. 方法一:多img资源控制处理就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片,如jpg图片.然 ...
gif在html里为何会自动停止,CSS或JS实现gif动态图片的停止与播放
一.屋外:寒风吹,雪花飘:屋内:空调吹,代码飘上午出去买菜,正好下雨了,还夹杂着冰珠子.鄙人大意,穿的是一件帅气但单薄的黄色大衣,立马冻成了中华田园犬.原本计划去钓鱼的,科科,作罢,上午在家看CCT ...
CSS或JS实现gif动态图片的停止与播放
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5081 一. 对于习 ...

JS控制GIF图片的停止与显示（掷骰子实现）

JS控制GIF图片的停止与显示（掷骰子实现）相关推荐

最新文章

热门文章