JS控制GIF圖片的停止與顯示

更新時(shí)間：2019年10月24日 10:01:13 作者：henouren

這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在擲骰子游戲中，通過(guò)需要控制骰子的轉(zhuǎn)動(dòng)以及轉(zhuǎn)動(dòng)結(jié)果的顯示，骰子的轉(zhuǎn)動(dòng)可以用GIF動(dòng)圖來(lái)實(shí)現(xiàn)，每次投擲骰子的結(jié)果可以通過(guò)點(diǎn)擊按鈕顯示靜態(tài)圖片。代碼如下：

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title>CSS實(shí)現(xiàn)GIF動(dòng)圖的停止與開(kāi)始(骰子)</title>
 <style type="text/css">
 </style>
 </head>
 
 <body>
 <!--動(dòng)圖-->
 <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{
 //動(dòng)圖
 image.src = "img/all/webDemo4-1.gif"
 button.value = '暫停';
 console.log('已開(kāi)始');
 } 
 }
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
gif圖片

相關(guān)文章

JS給元素注冊(cè)事件的代碼
麥雞的TAB切換功能代碼
2008-10-10
JS文件中加載jquery.js的實(shí)例代碼
這篇文章主要介紹了JS文件中加載jquery.js的方法，JS文件添加其他JS的實(shí)例代碼，感興趣的小伙伴們可以參考一下，具體如下
2018-05-05
小程序使用分包的示例代碼
這篇文章主要介紹了小程序使用分包的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
JavaScript Event學(xué)習(xí)第八章事件的順序
在第一章中我提到一個(gè)初次看起來(lái)可能不是那么好理解的是一個(gè)問(wèn)題：“如果一個(gè)元素和他的父元素對(duì)于同樣的事件都有事件處理程序，那么哪個(gè)會(huì)首先執(zhí)行呢？”毫無(wú)疑問(wèn)，看是什么瀏覽器。
2010-02-02
JavaScript之map reduce_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之map reduce的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對(duì)于模塊的導(dǎo)出和引入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
純JavaScript實(shí)現(xiàn)櫻花飄落效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何純JavaScript實(shí)現(xiàn)櫻花飄落效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
JavaScript代碼執(zhí)行的先后順序問(wèn)題
今天就給大家介紹一個(gè)特別基礎(chǔ)的東西，javascript中函數(shù)的一點(diǎn)兒小知識(shí)之js代碼的執(zhí)行順序問(wèn)題，需要的朋友參考下吧
2017-10-10
javascript+css實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03