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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
学习Vue组件实例
Apr 28 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
PHP中PDO的错误处理
2011/09/04 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
javascript中new关键字详解
2015/12/14 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python tornado上传文件的功能
2020/03/26 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 下划线的不同用法
2020/10/24 Python
用Python实现职工信息管理系统
2020/12/30 Python
应届护士推荐信
2013/11/16 职场文书
单位实习证明怎么写
2014/01/17 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
健康状况证明模板
2014/10/23 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
在校证明模板
2015/06/17 职场文书
2016银行求职自荐信
2016/01/28 职场文书
Redis批量生成数据的实现
2022/06/05 Redis