JS控制GIF图片的停止与显示


Posted in Javascript onOctober 24, 2019

在掷骰子游戏中,通过需要控制骰子的转动以及转动结果的显示,骰子的转动可以用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
js计时事件实现圆形时钟
Mar 25 #Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 #Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 #Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 #Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 #Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 #Javascript
JavaScript判断数组类型的方法
Oct 23 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php使用websocket示例详解
2014/03/12 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue实现拖拽效果
2019/12/23 Javascript
python flask实现分页效果
2017/06/27 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python字典快速保存于读取的方法
2018/03/23 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python mock测试的示例
2020/10/19 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
结婚典礼证婚词
2014/01/08 职场文书
地理教师岗位职责
2014/03/16 职场文书
酒店端午节活动方案
2014/08/26 职场文书
盲山观后感
2015/06/11 职场文书
运动会通讯稿50字
2015/07/20 职场文书
志愿服务心得体会
2016/01/15 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL