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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
three.js如何实现3D动态文字效果
Mar 03 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
生成缩略图
2006/10/09 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
解决Python中回文数和质数的问题
2019/11/24 Python
pytorch梯度剪裁方式
2020/02/04 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
工作总结与自我评价
2014/09/18 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
SQL之各种join小结详细讲解
2021/08/04 MySQL
小程序自定义轮播图圆点组件
2022/06/25 Javascript