脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS控制图片停止与显示

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

 更新时间：2019年10月24日 10:01:13   作者：henouren  
这篇文章主要为大家详细介绍了JS控制GIF图片的停止与显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS给元素注册事件的代码

    JS给元素注册事件的代码

    麦鸡的TAB切换功能代码
    2008-10-10
  • JS文件中加载jquery.js的实例代码

    JS文件中加载jquery.js的实例代码

    这篇文章主要介绍了JS文件中加载jquery.js的方法，JS文件添加其他JS的实例代码，感兴趣的小伙伴们可以参考一下，具体如下
    2018-05-05
  • 小程序使用分包的示例代码

    小程序使用分包的示例代码

    这篇文章主要介绍了小程序使用分包的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JavaScript Event学习第八章 事件的顺序

    JavaScript Event学习第八章 事件的顺序

    在第一章中我提到一个初次看起来可能不是那么好理解的是一个问题：“如果一个元素和他的父元素对于同样的事件都有事件处理程序，那么哪个会首先执行呢？”毫无疑问，看是什么浏览器。
    2010-02-02
  • JavaScript之map reduce_动力节点Java学院整理

    JavaScript之map reduce_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript之map reduce的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS中关于ES6 Module模块化的跨域报错问题解决

    JS中关于ES6 Module模块化的跨域报错问题解决

    这篇文章主要介绍了JS中关于ES6 Module模块化的跨域报错,ES6模块化提供了export命令和import 命令，对于模块的导出和引入，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-07-07
  • JavaScript事件委托实现原理及优点进行

    JavaScript事件委托实现原理及优点进行

    这篇文章主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 纯JavaScript实现樱花飘落效果的示例代码

    纯JavaScript实现樱花飘落效果的示例代码

    这篇文章主要为大家详细介绍了如何纯JavaScript实现樱花飘落效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JavaScript代码执行的先后顺序问题

    JavaScript代码执行的先后顺序问题

    今天就给大家介绍一个特别基础的东西，javascript中函数的一点儿小知识之js代码的执行顺序问题，需要的朋友参考下吧
    2017-10-10
  • javascript+css实现进度条效果

    javascript+css实现进度条效果

    这篇文章主要为大家详细介绍了javascript+css实现进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论