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