JavaScript实验实训内容Word下载.docx
- 文档编号:21728848
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:31
- 大小:25.24KB
JavaScript实验实训内容Word下载.docx
《JavaScript实验实训内容Word下载.docx》由会员分享,可在线阅读,更多相关《JavaScript实验实训内容Word下载.docx(31页珍藏版)》请在冰豆网上搜索。
,"
);
nb++;
document.write(n);
if(nb%6==0)document.write("
\n"
}
document.write("
\n\n"
共有"
+nb+"
个数"
/pre>
/body>
/html>
实验三
实验目的:
常用函数的使用。
实验内容:
利用全局变量和函数,设计模拟幸运数字机游戏。
设幸运数字为8,每次由计算机随机生成3个1~9之间的随机数,当这3个随机数中有一个数字为8时,就算赢了一次。
Ex050309.html
HTML>
HEAD>
METAname="
GENERATOR"
content="
MicrosoftFrontPage5.0"
>
ProgId"
FrontPage.Editor.Document"
SCRIPTlanguage="
javascript"
varwin_rate=0;
//赢率
varplay_times=0;
//总次数
varwins=0;
//赢的次数
varlast_digits;
//上次数字串
varlast_win;
//上次是否赢?
functionPlayOnce()
{//模拟玩一次数字机游戏
vari,digit;
play_times++;
last_digits="
;
last_win=false;
for(i=0;
i<
3;
i++)
digit=Math.floor(Math.random()*9)+1;
last_digits+=digit;
if(digit==8)last_win=true;
if(last_win)wins++;
win_rate=Math.floor(100*(wins/play_times));
/SCRIPT>
/HEAD>
BODY>
PRE>
while(true)
PlayOnce();
if(!
confirm(last_digits+"
+(last_win?
赢"
:
输"
)+"
\n胜率"
+win_rate+"
%,继续吗?
))break;
/PRE>
/BODY>
/HTML>
事件与对象
实验四
表单的设计。
设计一个表单,放入两个按钮,单击它们时将显示不同问候语。
S07_02.HTM
TITLE>
处理事件-HTML标记方式<
/TITLE>
functionhello_girl()
alert("
小姐,您好!
FORMname="
form1"
<
INPUTtype="
button"
value="
问侯先生"
name="
hello1"
onclick="
alert('
先生,您好!
'
/P>
问侯小姐"
hello2"
returnhello_girl();
/FORM>
实验五
内置对象的使用。
1.在页面中显示当天日期。
S06_03.HTM:
使用new运算符<
vartoday;
today=newDate();
今天是"
+today.getFullYear()+"
年"
+(today.getMonth()+1)+"
月"
+today.getDate()+"
日"
实验六
2.在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM
访问对象的属性<
window.status=navigator.appVersion;
实验七
3.将用户输入的字符串反向输出到页面上,并且要求将其中的小写字母转换成大写字母。
S06_07.HTM
使用String<
varorigin_s,upper_s,i;
origin_s=prompt("
请输入一行文字:
upper_s=origin_s.toUpperCase();
for(i=upper_s.length-1;
i>
=0;
i--)document.write(upper_s.charAt(i));
实验八
4.求PI的5次方,并四舍五入取整。
S06_04.HTM
使用Math对象<
alert(Math.round(Math.pow(Math.PI,5)));
实验九
5.由图像表示日期。
ch3_14.htm
scriptlanguage="
JavaScript"
varsWeek=newArray("
一"
二"
三"
四"
五"
六"
varmyDate=newDate();
//当天的日期
varsYear=myDate.getFullYear();
//年
varsMonth=myDate.getMonth()+1;
//月
varsDate=myDate.getDate();
//日
varsDay=sWeek[myDate.getDay()];
//星期
document.write(imageDigits(sYear)+"
nbsp;
+
imageDigits(sMonth)+"
imageDigits(sDate)+"
br>
//如果输入数是1位数,在十位数上补0
functionformatTwoDigits(s){
if(s<
10)return"
0"
+s;
elsereturns;
//将数转换为图像,注意,在本文件的相同目录下已有0-9的图像文件,文件名为0.gif,1.gif……以此类推
functionimageDigits(s){
varret="
vars=newString(s);
for(vari=0;
i<
s.length;
i++){
ret+='
imgsrc="
+s.charAt(i)+'
.gif"
returnret;
JavaScript对象的理解和使用
实验十
掌握JavaScript的常用的对象类型;
掌握JavaScript对象属性和方法的引用方式;
了解JavaScript对象的常用属性和方法;
1、任意输入一个字符串,单击“确定”按钮,输出字符串的长度。
2、猜数游戏,实现效果如下:
3、设计实现一个带开关的时钟。
JavaScript事件的理解和使用
实验十一
掌握JavaScript的常用的事件;
掌握JavaScript事件的处理方式;
了解如何通过HTML属性和JavaScript属性处理事件;
1、设计实现一个页面,当进入页面时提示“您好,欢迎光临”,当离开页面时提示“您好,欢迎您下次再来”。
2、设计实现如下页面,要求
(1)单击“提交”按钮时逐一验证页面各项信息不允许为空;
(2)如果哪一项信息不满足要求,页面焦点停留在该信息处;
(3)单击“重置”按钮时,将页面各项元素信息清空。
JavaScript的浏览器对象模型
实验十二
掌握JavaScript浏览器对象的层次结构;
掌握JavaScript浏览器对象的属性和方法;
1、设计实现如下页面:
(1)单击“修改年龄”按钮,弹出一个对话框:
(2)单击“确定”按钮,将文本框内的年龄信息改为用户重新输入的信息;
(3)单击“取消”按钮提示用户“您按了’取消’按钮”。
2、设计实现如下页面:
(1)输入学生信息后,单击“提交”按钮,页面呈现方式如下:
(2)单击“复位”按钮,页面呈现方式如下:
实验十三
设计一个含有一个表单的页面,并且在表单上放入一个文本框。
编写程序,当鼠标在页面上移动时,鼠标的坐标将显示在这个文本框中。
ex070303.htm
SCRIPTid="
clientEventHandlersJS"
language="
functiondocument_onmousemove()
for="
document"
event="
onmousemove"
returndocument_onmousemove()
FORMid="
P>
text"
txtMousePosition"
size="
20"
1.在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中。
反之亦然。
ch4_07.htm
//moveList用于对两个多选列表进行选项的移动操作
//from为"
需要移动"
的列表名称,to为"
移动到"
列表名称
functionmoveList(from,to){
var
//current为"
列表中的当前选项序号
varcurrent=fromList.selectedIndex;
//如果"
列表中有选择项,则进行移动操作
while(current>
-1){
//o为"
列表中当前选择项对象
varo=fromList.options[current];
vart=o.text;
varv=o.value;
//根据已选项新建一个列表选项
varoptionName=newOption(t,v,false,false);
//将该选项添加到"
列表中
toList.options[toLen]=optionName;
toLen++;
//将该选项从"
列表中清除
fromList.options[current]=null;
current=fromList.selectedIndex;
formname="
myForm"
table>
trvalign="
top"
td>
selectname="
leftList"
multiplesize="
6"
style="
width:
50px;
option>
a<
/option>
b<
c<
/select>
/td>
--通过事件onclick调用JavaScript的moveList函数-->
inputtype="
to"
>
"
moveList('
leftList'
'
rightList'
)"
p>
backTo"
rightList"
50px;
d<
e<
f<
/tr>
/table>
/form>
实验十四
一.实验目的:
掌握表单的应用
设计一个有3个超链接的页面,单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
S08_01.HTM
打开和关闭窗口<
varnewwin;
functionopennewwin()
height=100,width=400,top=10,left=0,toolbar=no,menubar=no,"
+
scrollbars=no,resizable=no,location=no,status=no"
functionclosenewwin()
newwin.close();
Ahref="
javascript:
opennewwin()"
打开新窗口<
/A>
closenewwin()"
关闭新窗口<
close()"
关闭本窗口<
2.设计一个表单,该表单有姓名和某种卡号两个文本输入框,其中这种卡号的格式为“XXXX-XXXX-XXXX-XXXX”(每个X代表一个数字),要求用户单击提交按钮之前验证这两个输入数据的有效性。
S08_11.HTM
验证表单<
SCRIPTLanguage="
functionvalidate()
数据完全"
returntrue;
functioncheckName(s)
varok=(s.length>
0);
if(!
ok)alert("
名字输入有误,请查核!
)
returnok;
functioncheckNum(n)
varok,i,ch;
ok=(n.charAt(4)=="
-"
&
n.charAt(9)=="
n.charAt(14)=="
ok)
+n+"
卡号输入有误,请查核!
returnfalse;
i=0;
while(i<
19)
ch=n.charAt(i);
if(ch!
="
(ch>
9"
||ch<
)){
卡号输入有误,查核!
i++;
myform"
onSubmit="
returnvalidate();
姓名:
myname"
40"
FirstM.Last"
卡号:
mynumber"
0000-0000-0000-0000"
submit"
发送"
3.设计3个按钮,当单击他们时分别使页面的背景色变成红、蓝和绿色。
S08_13.HTM
使用按钮<
functionChangeBgColor(new_bgcolor)
document.bgColor=new_bgcolor;
红"
onClick="
ChangeBgColor('
red'
蓝"
blue'
绿"
green'
实验十五
掌握表单的验证
表单验证
单击.html
ScriptLanguage="
functioncheck()
{
varinst="
爱好:
{
alert("
请输入姓名!
}
else
elsealert("
性别:
女"
if(inst=="
赶快培养一个爱好吧!
else
alert(inst);
}
/Script>
center>
<
<
请输入您的姓名:
txt1"
请选择您的性别:
男<
radio"
男"
sex"
checked>
女<
请选择您的爱好:
游泳<
checkbox"
游泳"
inst"
滑冰<
滑冰"
散步<
散步"
Inputtype="
Click"
OnClick="
check()"
/center>
JavaScript的应用与实践
实验十六
掌握JavaScript的综合应用。
要求:
(1)“姓名”、“学号”要求输入本人的真实姓名与学号;
(2)“年龄”要求验证不允许为空,且只能是小于100的正整数;
(3)“出生日期”要求验证年不允许为空,且只能为4位数字;
(4)“身份证号”要求验证不允许为空,且为有效的身份证号;
(5)“家庭住址”要求验证不允许为空,且最大长度为50个字符,且需验证只能为中文、数字和字母;
(6)“性别”、“班级”、“课程”要求验证不允许为空;
(7)“兴趣”要求设置为高3行、宽30列,最大输入长度为200,且需验证不允许为空,且只能为中文、字母、符号。
浏览器对象
1.设计一个表单,可以
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 实验 内容
![提示](https://static.bdocx.com/images/bang_tan.gif)