jQuery案例 : 抽奖小程序

2023-10-17 22:47:34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖小程序</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script language=‘javascript‘ type=‘text/javascript‘>
        //准备一个一维数组，装用户的像片路径
        var imgs = [
            "../img/scenery/1.jpg", "../img/scenery/2.jpg", "../img/scenery/3.jpg",
            "../img/scenery/4.jpg", "../img/scenery/5.jpg", "../img/scenery/6.jpg",
            "../img/scenery/7.jpg", "../img/scenery/8.jpg", "../img/scenery/9.jpg",
            "../img/scenery/10.jpg", "../img/scenery/11.jpg", "../img/scenery/12.jpg",
            "../img/scenery/13.jpg", "../img/scenery/14.jpg", "../img/scenery/15.jpg",
            "../img/scenery/16.jpg", "../img/scenery/17.jpg", "../img/scenery/18.jpg",
            "../img/scenery/19.jpg", "../img/scenery/20.jpg", "../img/scenery/21.jpg",
        ];

        /*
        需求分析:
	页面加载成功后,"点击停止"按钮失效
	给"点击开始"和"点击停止"按钮派发单击事件
	当"点击开始"按钮被点击时:
		"点击开始"按钮失效,"点击停止"按钮生效
		小图开始随机轮播
	当"点击停止"按钮被点击时:
		"点击开始"按钮生效,"点击停止"按钮失效
		小图停止轮播
		2秒后将选中的小图展示到大图区域
技术分析:
	页面加载事件: $(function(){});
	单击事件: click()
	操作属性:
		jq对象.attr("disabled",true);
	定时器:
		周期执行定时器:
			// 每隔多少毫秒调用一次对应的函数
			var interId = setInterval(函数名称,毫秒值);
			// 清除周期执行定时器
			clearInterval(interId);
		单次执行定时器:
			setTimeout(函数名称,毫秒值); // 多少毫秒后调用此函数
         */
        $(function () {
            //当页面加载成功后,点击停止按钮失效
            $("#stopID").attr("disabled", true);
        });

            function imgStart() {
                //点击开始按钮之后,停止按钮生效
                $("#stopID").attr("disabled", false);
                $("#startID").attr("disabled", true);
                //小图开始轮播

                //这种方式虽然能实现,但比较low而且随机性差
                /*var i = 0;
                //轮播图开始轮播
                var interId = setInterval(function () {

                    $("#img1ID").attr("src",imgs[i]);
                    i++;
                    if (i == imgs.length) {
                        i = 0
                    }
                }, 15);*/
                //js中定义变量如果不写var,那么此变量为全局变量
                interId = setInterval(function () {
                    //随机生成0到20之间的随机数
                    i = Math.round(Math.random() * 100)%21;

                    $("#img1ID").attr("src",imgs[i]);

                }, 15);
            }

            function imgStop() {
                $("#stopID").attr("disabled", true);
                $("#startID").attr("disabled", false);
                //清除定时器
                clearInterval(interId);
                //1秒后将小图展示到大图区域
                setTimeout(function () {
                    $("#img2ID").attr("src",imgs[i]);
                },500);
            }
    </script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:50px;height:50px">
    <img id="img1ID" src="" style="width:50px;height:50px"/>
</div>
<!-- 大像框 -->
<div style="border-style:double;width:700px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="" style="width:700px;height:500px"/>
</div>

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

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

</body>

</html>
jQuery案例 : 抽奖小程序
码农公寓

相关文章
