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从右边截取指定字符串的三种实现方法
Nov 29 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
Vue中 axios delete请求参数操作
Aug 25 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 正则表达式小结
2009/08/31 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php实现监听事件
2013/11/06 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python生成excel的实例代码
2017/11/08 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
大学自主招生自荐信
2013/12/16 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
周一问候语大全
2015/11/10 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle