如何使用JQuery创建抽奖小游戏?(例题)

最新推荐文章于 2022-10-25 18:50:22 发布

林深～

最新推荐文章于 2022-10-25 18:50:22 发布

阅读量264

点赞数

分类专栏：例题文章标签： JQuery web前端 JS

本文链接：https://blog.csdn.net/weixin_45043021/article/details/93649295

版权

例题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖小游戏</title>
      <!--创建script标签,导入jquery-3.3.1.min.js架构-->
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script> 
</head>

<!--小相框-->
<div
        style="border-style:dotted;width:160px;height: 100px">  
        <!--在卡片div中设置这个卡片属性为边框样式为dotted,宽160px,高height: 100px-->
         <img id="img1ID" src="../img/man00.jpg" style="width: 160px" height=":100px"/> 
         <!--设置该卡片id为"img1ID",随机选择一张图片man00.jpg展示效果-->
</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",创建一个无属性按钮button,设置这个按钮的大小为宽150xp,高为150xp,字体大小为22xp  创建一个鼠标单击事件onclick,当单击该按钮时跳转到方法imgStart()-->
<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'>
    //准备一个一维数组，存放图片路径,以方便调用,具体使用图片时需要将图片存放到该项目module下
    var imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg"
    ];

 /* 解题思路:

    点击开始时:
    	在小相框里imgID不停的切换图片,20毫秒切换一次,从数组imgs中随机获取一张图片
    
        分析:
         20毫秒切换一次:使用setInterval
     	 从imgs里随机获取一个图片路径,使用java中的Mtah.random()范围是[0,1),但图片有6张这就需要转换成:[0,6]的随机整数
    */

 var timer;
    function imgStart() {
       timer= setInterval(function () {
       
          /* Mtah.random()范围是[0,1)需要*7,从而范围变为了[0,7)
            但现在得到的数可能为小数,所以需要向下取整,使用floor得到0-6之间的整数*/
            var index=Math.floor(Math.random()*7);
            
            //通过随机索引获取imgs数组中的图片,得到随机路径并将路径赋值给src
           var src=imgs[index];

           $("#img1ID").attr("src",src); },20);
        //找到img1ID所在的标签体,通过dom中attr(name,value)方法的操作属性设置时间20毫秒切换一张 name：属性名，value：属性值
        
        //定时器开启后,把开始按钮设置为禁言,因为多次点击开始按钮会执行多次定时器,导致无法关闭的bug
        $("#startID").attr("disabled",true)//开启disabled

    }

/*点击结束时:小相框里停止切换,把小相框里的图片,显示到大相框中
    分析:
           停止切换:清除定时器:clearInterval
           获取小相框的src属性值,赋值给大相框的src*/
           
    function imgStop() {
        clearInterval(timer);//清除这个定时器,接下来就是把小相框的图片给大相框
     
        var jq = $("#img1ID").attr("src");//获取到小相框中的属性值
        $("#img2ID").attr("src",jq);//设置大相框中属性名为"src"的属性为"jq"

        //停止定时器后,就是获取到一张图片停止后,再次恢复开始按钮
        $("#startID").attr("disabled",false)
    }

</script>
</body>
</html>

林深～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用JQuery创建抽奖小游戏?(例题)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖小游戏</title>  <script typ...
复制链接

扫一扫