jquery经典案例之抽奖

最新推荐文章于 2023-09-19 14:16:11 发布

是西比尔！

最新推荐文章于 2023-09-19 14:16:11 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/Xuxuhh/article/details/104834049

版权

一、目的

当点击开始按钮，小相框中的图片随机循环出现。
当点击停止按钮，大相框中展示出的是小相框中停止时的图片。

二、分析

给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
```
 2. 给结束按钮绑定单击事件
     1.1 停止定时器
     1.2 给大相框设置src属性
```

三、实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">


<script language='javascript' type='text/javascript'>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg"
    ];

     $(function(){
    	 //1.开始让停止按钮 处于失效状态;开始按钮处于可以点击状态
    	  $("#startID").prop("disabled",false);
    	  $("#stopID").prop("disabled",true);
    	  //2.给开始按钮绑定单击事件
    	  function imgStart(){
    		  $("#startID").prop("disabled",true);
        	  $("#stopID").prop("disabled",false);
    		  //定义一个循环定时器 让它在规定的时间内不断播放图片
    		timeout =  setInterval(function(){ 
    		 //2.1生成随机整数 作为图片的下标值 *7再向下取整
    		 index = Math.floor(Math.random()*7);
    		 //2.2给小相框修改src资源 imgs是一个数组 index是下标值
    		 $("#img1ID").prop("src",imgs[index]);
    		  },30);
    	  };
    	  
          //3.给停止按钮绑定单击事件 
    	 function imgStop(){
    		 //点击停止按钮 开始按钮有效 停止按钮无效
    		 $("#startID").prop("disabled",false);
    	 	 $("#stopID").prop("disabled",true);
    		 //定时器停下 清除定时器
    		 clearTimeout(timeout);
             //修改大相框中属性src的值等于小相框中属性src的值
    		 $("#img2ID").prop("src",imgs[index]);
    	 }
   });
   
</script>
</body>
</html>

是西比尔！

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery经典案例之抽奖

一、目的当点击开始按钮，小相框中的图片随机循环出现。当点击停止按钮，大相框中展示出的是小相框中停止时的图片。二、分析给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数。数组索引 2. 给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性三、实现代码<!...
复制链接

扫一扫