JS控制GIF圖片的停止與顯示
更新時(shí)間：2019年10月24日 10:01:13 作者：henouren
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在擲骰子游戲中，通過需要控制骰子的轉(zhuǎn)動以及轉(zhuǎn)動結(jié)果的顯示，骰子的轉(zhuǎn)動可以用GIF動圖來實(shí)現(xiàn)，每次投擲骰子的結(jié)果可以通過點(diǎn)擊按鈕顯示靜態(tài)圖片。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS實(shí)現(xiàn)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) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link1.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 2) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link2.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 3) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link3.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 4) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link4.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 5) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link5.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 6) {
//靜態(tài)圖片，可以自定義控制顯示
image.src = "img/all/link6.jpg"
button.value = '播放';
console.log('已暫停');
} else{
//動圖
image.src = "img/all/webDemo4-1.gif"
button.value = '暫停';
console.log('已開始');
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
一文詳解JavaScript中的URL和URLSearchParams
URL，稱為統(tǒng)一資源定位器，指互聯(lián)網(wǎng)上能找到資源定位的字符串，而URLSearchParams對象是專門用于處理url網(wǎng)址信息中的查詢字符串，本文就來帶大家深入了解一下二者的使用2023-05-05
微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
JQuery 提供了兩種方式來阻止事件冒泡，Jquery阻止默認(rèn)動作即通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作，下文有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2013-11-11
typescript返回值類型和參數(shù)類型的具體使用
本文主要介紹了typescript返回值類型和參數(shù)類型的具體使用文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了觸屏中的JavaScript事件,實(shí)例分析了觸屏事件的種類、原理與相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法,結(jié)合實(shí)例形式分析了javascript冒泡排序，快速排序，插入排序算法的相關(guān)原理及實(shí)現(xiàn)方法,需要的朋友可以參考下2019-03-03
引入JavaScript時(shí)alert彈出框顯示中文亂碼問題
今天在HTML中引入JavaScript文件運(yùn)行時(shí)，alert彈出的提示框中文顯示為亂碼，怎么解決此問題呢？下面小編給大家?guī)砹艘隞avaScript時(shí)alert彈出框顯示中文亂碼問題的解決方法，一起看看吧2017-09-09
本篇文章的主要內(nèi)容包括高級動畫、像素操作、性能優(yōu)化等知識點(diǎn)，講解每個(gè)知識點(diǎn)的同時(shí)還會有一些酷炫的demo。下面跟著小編一起來看下吧2016-12-12
js實(shí)現(xiàn)點(diǎn)擊圖片自動提交action的簡單方法
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)點(diǎn)擊圖片自動提交action的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
大家好，本篇文章主要講的是JavaScript中深拷貝與淺拷貝詳解，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下2022-02-02