JS控制GIF圖片的停止與顯示
更新時(shí)間：2019年10月24日 10:01:13 作者：henouren
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在擲骰子游戲中，通過需要控制骰子的轉(zhuǎn)動(dòng)以及轉(zhuǎn)動(dòng)結(jié)果的顯示，骰子的轉(zhuǎn)動(dòng)可以用GIF動(dòng)圖來實(shí)現(xiàn)，每次投擲骰子的結(jié)果可以通過點(diǎn)擊按鈕顯示靜態(tài)圖片。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS實(shí)現(xiàn)GIF動(dòng)圖的停止與開始(骰子)</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('已開始');
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
麥雞的TAB切換功能代碼2008-10-10
這篇文章主要介紹了JS文件中加載jquery.js的方法，JS文件添加其他JS的實(shí)例代碼，感興趣的小伙伴們可以參考一下，具體如下2018-05-05
這篇文章主要介紹了小程序使用分包的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JavaScript Event學(xué)習(xí)第八章 事件的順序
在第一章中我提到一個(gè)初次看起來可能不是那么好理解的是一個(gè)問題：“如果一個(gè)元素和他的父元素對于同樣的事件都有事件處理程序，那么哪個(gè)會(huì)首先執(zhí)行呢？”毫無疑問，看是什么瀏覽器。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ò)問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對于模塊的導(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)行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
純JavaScript實(shí)現(xiàn)櫻花飄落效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何純JavaScript實(shí)現(xiàn)櫻花飄落效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
今天就給大家介紹一個(gè)特別基礎(chǔ)的東西，javascript中函數(shù)的一點(diǎn)兒小知識(shí)之js代碼的執(zhí)行順序問題，需要的朋友參考下吧2017-10-10
javascript+css實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03