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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
为原生js Array增加each方法
Apr 07 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
浅谈克隆 JavaScript
Nov 02 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/09/30 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
师说教学反思
2014/02/07 职场文书
年终总结会主持词
2014/03/25 职场文书
护士求职信范文
2014/05/24 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
校运会新闻稿
2015/07/17 职场文书
售房协议书范本
2015/08/11 职场文书