今天看啥  ›  专栏  ›  70bba007301b

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

70bba007301b  · 简书  ·  · 2019-08-09 09:50

文章预览

一、总体思路:

实现抽奖,主要实现三部分即可:

参与抽奖姓名的显示部分 开始按钮 停止按钮

☆具体实现步骤:

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 (  定时器名称 );

三、代码实现




………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览