• Jquery----实现抽奖效果(根据姓名抽奖)


    一、总体思路:
    实现抽奖,主要实现三部分即可:
    参与抽奖姓名的显示部分 开始按钮 停止按钮
    ☆具体实现步骤:
    1. 在body内设置元素基本信息
    1.1. 设置显示框(用于显示中奖人名,可以使div、input等等)
    1.2. 设置开始按钮、结束按钮(input框)
     
    2. 在script标签内编写脚本
    2.1 定义一个数组,用于存放抽奖人名信息
    2.2 设置开始按钮和停止按钮的可用或不可用状态
    点击按钮之前开始按钮可用状态结束按钮不可用状态
    3. 给开始按钮绑定事件
    3.1. 在开始按钮绑定的事件中设置循环定时器
    3.2. 在定时器中设置开始按钮和停止按钮的状态
    点击开始按钮之后开始按钮不可用状态结束按钮可用状态
    3.3. 获取(1-n)之间的随机数 (n代表数组中参与抽奖的人名个数
    3.4. 设置显示框(用于显示中奖人名)的文本内容(人名
    4. 给结束按钮绑定事件
    4.1 设置开始按钮和结束按钮的状态
    点击结束按钮之后开始按钮不可用状态结束按钮可用状态
    4.2 清除定时器(结束循环状态)
     
    二、使用到的方法
    1. 在js中定义数组: var 数组名 =【”元素1“,”元素2“..........】;
    2. jquery的函数入口:$ ( function ( ) { } );
    3. 获取/操作属性值: $("#id名") .prop("属性名",“属性值“);
    4. 绑定点击事件: $("#id名") .click(函数);
    5. 设置循环定时器: setInterval(函数,时间)
    6. 生成随机数:
    Math.random( ); 生成0-1之间的随机数;
    Math.random( )*n; 生成0-n之间的随机数 ( 包含小数 );
    Math.floor( Math.random( )*n ); 生成0-(n-1)之间的随机整数;
    Math.floor( (Math.random()*n)+1); 生成1-n之间的随机整数;
    7.清除定时器: clearInterval ( 定时器名称 );
    三、代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>抽签</title>
    <script src="jquery-3.3.1.min.js"></script>
    </head>
    <script>
    $(function(){
    //定义一个数组,用于存储姓名
    var names=[
    "张三",
    "李四",
    "诸葛亮",
    "刘备",
    "曹操",
    "韩非",
    "张良",
    "卫庄",
    "盖聂",
    ];
    var time;//定义成员变量,用于接收定时器,也是为清除定时器作准备
    var index;//定义成员变量,用于接收生成的随机数,也是为了给input框设置value值做准备
    //先设置按钮的可用性(在点击按钮之前,开水按钮是可用的,结束按钮是不可用的)
    $("#start").prop("disabled",false);//"disabled"代表可不可用的属性,系统默认的属性值是不可用;
    $("#stop").prop("disabled",true);//false代表可用,true代表不可用
    //给开始按钮绑定事件
    $("#start").click(function(){
    //设置定时器
    time=setInterval(function(){
    //设置爱按钮的可用性
    $("#start").prop("disabled",true);
    $("#stop").prop("disabled",false);
    //生成随机数
    index=Math.floor((Math.random()*10)+1);
    //给input框设置value值
    $("#name").prop("value",names[index]);
    });
    });
    //给结束按钮设置绑定事件
    $("#stop").click(function(){
    //清除定时器
    clearInterval(time);
    //设置按钮状态
    $("#start").prop("disabled",false);
    $("#stop").prop("disabled",true);
    });
    });
    </script>
    <body>
    //信息显示框(用于显示中间人名)
    <input type="text" id="name" value="张三"
    style="width: 250px;height: 50px;border: 2px solid black;text-align: center;
    margin-left:450px;margin-top: 100px;background-color: red;color: white; font-size: 26px">
    //开始按钮
    <input type="button" id="start" value="开始" style="width: 70px;height: 35px; margin-left: 100px" >
    //结束按钮
    <input type="button" id="stop" value="结束" style="width: 70px;height: 35px;">
    </body>
    </html>
     
  • 相关阅读:
    redis使用lua脚本遇到的问题
    redis使用scan count 返回数量不准确
    window系统下搭建本地的NuGet Server
    windows10使用docker发布.netcore程序
    windows10使用docker安装mysql
    windows10搭建redis4.0集群
    windows10配置redis主从复制
    windows10安装redis4.0
    mysql 共享排他锁
    mysql drop表以后恢复数据
  • 原文地址:https://www.cnblogs.com/Hubert-dzl/p/11125267.html
Copyright © 2020-2023  润新知