(名前くじによって)達成のjQuery ----宝くじの結果

まず、一般的な考え方:
実現の宝くじ、主に3つの部分を達成するために:
表示部抽選名がボタンスタートストップボタンを
具体的な実施手順を☆:
1.基本情報要素は、本体内に配置されました
1.1。設定画面(受賞名を表示するために、DIVことができ、入力、など)
1.2。[スタート]ボタン、終了ボタン(入力ボックス)を設定
 
2.スクリプトタグ内のスクリプトを書きます
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>
 

おすすめ

転載: www.cnblogs.com/Hubert-dzl/p/11125267.html