javascript上机实训指导手册

用。本例主要实现的功能为：当页面打开时，显示“尊敬的客户，欢迎光临您光临本”窗口，<!DOCTYPE<title>第一个<!DOCTYPE<title>第一个Javascript程序步骤2：保存HTML文件，选择相应的保存位置，文件名为 步骤3：在HTML文档的head部分，键入如下代码。functionshowEnter(){ functionshowEnter(){ }functionshowLeave(){}//页面加 图1-1页面加载时效 图1-2页面关闭时效<scriptsrc=外 文件路径新建文件新建文件 // 按照以前的方法创建HTML文件并保存注意为了能够保证示例的正常运行请将该文件 <!DOCTYPE<metacharset="utf-8"<title>JavaScript嵌入HTML5文件<script 图1- olvo<!DOCTYPE<!DOCTYPE<p<scripttype="text/javascript">functionmyFunction(){var }1-41-5图1-4程序运行结 图1-5程序运行结4typeof掌握typeof<!DOCTYPE<!DOCTYPE<scripttype="text/javascript"> .write("typeof(1):.write("typeof(NaN):.write("typeof(Infinity):.write("typeof(\"123\"):.write("typeof(true):.write("typeof(window):.write ): .write("typeof(null):.write("typeof(eval):.write("typeof(Date):.write("typeof(sss):.write("typeof(undefined):1-61-6<!DOCTYPE<!DOCTYPE<script<!-varscope="全局变量function{varscope="局部变量}//--1-71-7JavaScript没有块级作用域，函数中的所有变量无论是在哪里的，在整个函数中都有意义<!DOCTYPE<!DOCTYPE<script<!-varscope="全局变量function{);//varscope="局部变量 }//-- 图1-8程序运行结 图1-9程序运行结6if…elsefunctioncountdown(title,Intime,divId){varonline=newDate(Intime);varnow=newfunctioncountdown(title,Intime,divId){varonline=newDate(Intime);varnow=newvarleave=online.getTime()-varday=Math.floor(leave/(1000*60*60*24))+1;if(day>1){ divId.innerHTML="<b>——距"+title+"还有"+day+"天 }if(day==1) }ifday0)divId.innerHTML="<b>今天就是"+title+" }}}}}<table<tablewidth="350"height="450"border="0"align="center"cellpadding="0"<tdvalign="bottom"><tablewidth="346"height="418"border="0"cellpadding="0"<tdwidth="76"><td<div<b>——<scriptcountdown("2019年元旦","1/1/2019",countDown);<!--JavaScript函数1-107<!DOCTYPE<meta<!DOCTYPE<metacharset="utf-8"}{}<h1><imgsrc="images/logo.gifwidth="240height="31" <formaction=""method="post"name="myform"<h3><imgsrc="images/shop.gifwidth="54"height="54">购物简易计算器<p>第一个数<inputname="txtNum1type="textclass="textBaroderid="txtNum1<p>第二个数<inputname="txtNum2type="textclass="textBaroderid="txtNum2<p><inputname="addButton2"type="button"id="addButton2"value="＋"<input<inputname="subButton2"type="button"id="subButton2"value="－<inputname="mulButton2"type="button"id="mulButton2"value="×<inputname="divButton2"type="button"id="divButton2"value="÷""""function{varnum1,num2;if(op=="+")if(op=="-iffunction{varnum1,num2;if(op=="+")if(op=="-ifif(op=="/"&&num2!=0)}<inputname="addButton2"type="button"id="addButton2"<inputname="addButton2"type="button"id="addButton2"<inputname="subButton2"type="button"id="subButton2"<inputname="mulButton2"type="button"id="mulButton2"<inputname="divButton2"type="button"id="divButton2"＋—×"onClick="compute('+')">"onClick="compute('-')">"÷"图1- <!<!DOCTYPE<SCRIPT//aArray,用于存放城市名称。varaCity=newArray();aCity[0]=newArray();aCity[1]=newArray();aCity[2]=newArray();aCity[3]=newArray(); function{var while(aCity[iProvinceIndex][iCityCount]!=null)for(i=0;i<=iCityCount-1;i++)//改变下拉菜单的内容frm.optCity[i]=newOption(aCity[iProvinceIndex][i]);frm.optCityfocus();}<BODY<FORM<SELECTNAME="optProvince"SIZE="1" 省<SELECTNAME="optCity"1-13所示。图1-12显示结 图1-13选择省份对应的城<!DOCTYPE<meta<!DOCTYPE<metacharset="utf-8" <span2getCode.jsfunction vars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZvarret="";//保存生成的 for(var{varindex=Mathfloor(Mathrandom()*62);//0-62 //s并入ret}return }functionshow(){ }//在id为msg //页面加载时执行函数3：在HTMLheadJavaScript<script<scriptsrc="getCode.js"4HTML文件中，修改“刷新”按钮代码，修改<inputtype="buttonvalue="刷新>这一行代<inputtype="button"value="刷新onclick="show步骤5：保存网页后，即可查看最终效果，如图<inputtype="button"value="刷新onclick="show图1-14随机 图1-15 刷新10MathMathrandom0~100之间（0，100）1-16所示；单击【计算】按钮，计算该随机数的平方、平方根图1-16产生随机整 图1-17计算随机整数的平方、平方根和自然对<!DOCTYPE<!DOCTYPE<formaction=""method="post"name="myform"<inputtype="button"value="随机数<inputtype="button"value="2：在HTMLheadJavaScriptvardata;// functiongetRandom(){data=Mathfloor(Mathrandom()*101);//0~100 }functioncal(){var varsquareRoot=Math.sqrt(data).toFixed(2);//计算随机整数的平方根varlogarithm=Math.log(data).toFixed(2); }<inputtype="button"value="随机数<inputtype="button"value="步骤3“随机数按钮“计算按钮添加单（onclick分别调“随机数函（getRandom）（cal<inputtype="button"value="随机数<inputtype="button"value="<!DOCTYPE<!DOCTYPE<script<!-functiontxtfocus(event){vare=window.event;varobj=e.srcElement;}functiontxtblur(event){vare=window.event;var}//--<tablealign="center"width="360"height="228"<tdwidth="226"><formname="form1"method="post"<input<inputtype="text"name="textfield" <td><formname="form2"method="post"<inputtype="text"name="textfield2"onfocus="txtfocus()" <td><formname="form3"method="post"<inputtype="text"name="textfield3"onfocus="txtfocus()" <td><formname="form4"method="post"<inputtype="text"name="textfield5"onfocus="txtfocus()" <td><formname="form5"method="post"<inputtype="text"name="textfield4"onfocus="txtfocus()"1-18在HTML代码中，创建了三个表单按钮，并分别为三个按钮添加了单击，即单击不同的按钮<!DOCTYPE<!DOCTYPE<scripttype="text/javascript">functiondis { 框}function{varname=prompt("请输入名称","")if(name!=null&&name!=""){.write("name}}}function{varr=confirm("按下按钮")if(r==true){}{}}<input<inputtype="button" y_alert()"value="弹 框"<inputtype="button"onclick="disp_prompt()"value="输 框"<inputtype="button"onclick="disp_confirm()"value="选 框"浏览效果如图1-19所示，当单击三个按钮时，会显示不同的 择框和输入框。图1-19框显13JavaScript <!DOCTYPE<!DOCTYPE<h1 修改页面<ol<li><labelclass="new_password">新的：</label><inputname=''type='password'id=''：</label><inputname=''type='password'id=''<li><label '1-20#need{margin:20px#need{margin:20pxauto0;width:#needli{height:26px;width:600px;font:12px/26pxArial,Helvetica,sans-serif;background:#FFD;border-bottom:1pxdashed#E0E0E0;dis y:block;cursor:text;padding:7px0px7px10px!important;padding:5px0px5px10px;}#needli:hover,#needli.hover{background:#needinput{line-height:14px;background:#FFF;height:14px;width:200px;border:1pxsolid#E0E0E0;vertical-align:middle;padding:6px;}#needlabel{padding-left:#needlabel.old_password{background-position:0-277px;}#needlabel.new_password{background-position:0-1576px;}#need#needlabel.rePassword{background-position:0-1638px;}#needlabel. {background-position:0-429px;}#needdfn y:#needli:hoverdfn,#needlihoverdfn y:inline;margin-left:7px;color:1-21CSS<scriptfunctionsuckerfish(type,tag,parentId){if(window.attachEvent){window.attachEvent("onload",<scriptfunctionsuckerfish(type,tag,parentId){if(window.attachEvent){window.attachEvent("onload",function(){=}} hover=function(sfEls)for(vari=0;i<sfEls.length;i++){sfEls[i].onmouseover=function(){this.className+="hover";} ce(newRegExp("hover\\b"),}}}都是使用JavaScript完成的，此处共调用了onload加载、ommouseover等。IE9.01-22所示，可以看到当鼠标放到第二个输入文本框上时，其背景色变1-22JavaScript实现数据的即时验证，需要利用onblur，即当前文本框失去焦点时，就会触发验证处理程if条件语句判断当前数据格式，最后判断数据是<!DOCTYPE<!DOCTYPE<body<form<inputtype="text"id="aaa"name="aaa"value="0.00"<inputtype="text"id="bbb"name="bbb"HTML代码中，创建了一个表单，表单中包含两个文本输入框，其中第一个文本输入框定义了onblur，即失去焦点。1-23所示，可以看到页面显示了一个表单，包含两个文本域。此时在第一个文本1-23<scripttype="text/javascript">functioncheckDecimal(element){vartmp=<scripttype="text/javascript">functioncheckDecimal(element){vartmp=element.value.split(".")myForm.aaafocus(); alert("2位小数！"); return}} returnfalse;}}1-241231-24<!DOCTYPE<!DOCTYPE<body<form<inputtype=textIE9.01-251-25<scriptlanguage="javascript">varmsg="品味中原文化，寄情varinterval=400;var<scriptlanguage="javascript">varmsg="品味中原文化，寄情varinterval=400;varfunctionLenScroll()nextForm.lenText.value=msg.substring(seq,msg.length)+ "+if(seq>msg.length)seq=0;}

1-26<