Web系统与技术Word格式.docx
《Web系统与技术Word格式.docx》由会员分享，可在线阅读，更多相关《Web系统与技术Word格式.docx（14页珍藏版）》请在冰豆网上搜索。
2.2.9JavaScriptWhile循环13
2.2.10JavaScript表单验证14
1.Web系统——Javascript
1.1系统功能介绍
此程序是用javascript实现的一个简单抽奖小程序，主要是通过设定一个随机数区间，然后在此区间中抽取随机数来选出一等奖、二等奖、三等奖。
具体代码如下：
<
html>
head>
<
title>
抽奖小程序<
/title>
!
--javascript程序——Begin-->
scriptlanguage="
javascript"
>
//抽奖数字范围初始化
varfrom=1;
//起始值
varto=1523;
//终止值
numarray=newArray（）;
//保存抽奖数字的数组
flagarray=newArray（）;
//记录数字是否中奖的标示数组
countaward=newArray（0,0,0）;
//记录每组抽奖次数，这里只抽三组奖
/**
函数名:
sysInit
传入参数:
无
返回值:
ture/false
功能:
抽奖系统初始化,设定抽奖数字范围、初始化抽奖数字数组和标示数组
*/
functionsysInit（）
{
/*设定抽奖数字范围*/
//接受用户设定操作
mixNum=prompt（'
起始值'
1）;
maxNum=prompt（'
终止值'
1523）;
//判断用户没有输入任何数据或输入空字符
if（mixNum!
=null&
&
maxNum!
mixNum!
="
"
）
//判断用户输入的数据是否是合法的数字
strTemp="
0123456789"
;
for（i=0;
i<
（mixNum+maxNum）.length;
i++）
j=strTemp.indexOf（（mixNum+maxNum）.charAt（i））;
if（j==-1）
alert（"
起始数字范围不正确,程序中断!
）;
returnfalse;
}//endif
}//endfor
//若用户输入合法数字，则重新设定抽奖范围
from=parseInt（mixNum）;
to=parseInt（maxNum）;
//初始化抽奖数字数组和标示数组
for（i=0;
（to-from）;
numarray[i]=from+i;
flagarray[i]=0;
}
//抽奖按钮有效
first.disabled=false;
second.disabled=false;
third.disabled=false;
returntrue;
getLuck
奖次award,此项奖总数awardtotal
无重复抽取中奖数
functiongetLuck（award,awardtotal）
varmsg="
//当抽奖数大于等于20个时,使用每次抽取10个中奖数。
（awardtotal>
=20?
10:
1）;
//设定循环抽取随机数并判断,防止数字重复取
while（a=1）
//判断提示某项奖已经取完
if（countaward[award-1]==awardtotal）
alert（award+"
等奖已经取满"
+awardtotal+"
个"
return;
//在抽奖数字范围内抽取随机数
lucky=Math.round（（to-from+1）*Math.random（）+from）;
//判断上面抽取的随机数是否已经取过
if（numarray[lucky-from]==lucky&
flagarray[lucky-from]==0）
flagarray[lucky-from]=award;
countaward[award-1]++;
msg+=award+"
等奖N"
+countaward[award-1]+"
:
+lucky+"
\n"
break;
}//endwhile
alert（msg）;
showLuck
显示中奖的所有数
functionshowLuck（）
varstr1="
一等奖：
p>
varstr2="
二等奖：
varstr3="
三等奖：
switch（flagarray[i]）
case1:
str1=str1+numarray[i]+"
br>
case2:
str2=str2+numarray[i]+"
case3:
str3=str3+numarray[i]+"
//显示三个奖项的中奖数
document.write（str1）;
document.write（str2）;
document.write（str3）;
/script>
--javascript程序——End-->
/head>
body>
center>
strong>
fontsize="
3"
color="
red"
开始抽奖喽!
/font>
/strong>
/p>
inputtype="
button"
name="
range"
value="
设定抽奖系统"
onclick="
javascript:
sysInit（）;
first"
抽取一等奖"
disabledonclick="
getLuck（1,3）;
second"
抽取二等奖"
getLuck（2,20）;
third"
抽取三等奖"
getLuck（3,100）;
show"
显示抽奖结果"
showLuck（）;
/center>
/body>
/html>
1.2程序流程
该程序的流程如下图所示：
图1程序运行流程图
1.3程序运行效果
程序打开后显示如下页面：
图2.1程序开始页面
图2.2设定抽奖范围最小值
图2.3设定抽奖范围最大值
图2.4抽取一等奖
图2.5抽取二等奖
图2.6抽取三等奖
图2.7显示抽奖结果
2.代码分析及用法介绍
2.1JavaScript简介
JavaScript是一种轻量级的编程语言，是可插入HTML页面的编程代码。
JavaScript插入HTML页面后，可由所有的现代浏览器执行。
JavaScript可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
2.2JavaScript代码分析
标签
实例：
如需在HTML页面中插入JavaScript，请使用<
标签。
和<
会告诉JavaScript在何处开始和结束。
之间的代码行包含了JavaScript。
2.2.2JavaScript函数和事件
上面例子中的JavaScript语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。
2.2.3写到文档输出
只能在HTML输出中使用document.write。
如果您在文档加载后使用该方法，会覆盖整个文档。
2.2.4JavaScript字符串
字符串是存储字符的变量，可以是引号中的任意文本。
您可以使用单引号或双引号。
2.2.5创建JavaScript对象
JavaScript中的几乎所有事务都是对象：
字符串、数字、数组、日期、函数等等，你也可以创建自己的对象。
2.2.6JavaScript函数语法
functionsysInit（）
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由JavaScript在任何位置进行调用。
提示：
JavaScript对大小写敏感。
关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
2.2.7JavaScriptIf语句
在JavaScript中，我们可使用以下条件语句：
if语句-只有当指定条件为true时，使用该语句来执行代码
if...else语句-当条件为true时执行代码，当条件为false时执行其他代码
if...elseif....else语句-使用该语句来选择多个代码块之一来执行
switch语句-使用该语句来选择多个代码块之一来执行
在这个语法中，没有..else..。
您已经告诉浏览器只有在指定条件为true时才执行代码。
2.2.8JavaScriptFor循环
JavaScript支持不同类型的循环：
for-循环代码块一定的次数
for/in-循环遍历对象的属性
while-当指定的条件为true时循环指定的代码块
do/while-同样当指定的条件为true时循环指定的代码块。
2.2.9JavaScriptWhile循环
while（a=1）
While循环会在指定条件为真时循环执行代码块。
如果忘记增加条件中所用变量的值，该循环永远不会结束，可能导致浏览器崩溃。
2.2.10JavaScript表单验证
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证：
被JavaScript验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域（numericfield）中输入了文本？
上述实例用来验证抽取的随机数是否已经取过，是否在抽奖数字范围内抽取随机数。
升级会员 