JavaScript上机练习.docx

第一章 JavaScript基本语法1：打印数字金字塔训练技能点 变量的声明与赋值 使用for循环需求说明打印数字金字塔，效果如下图1.2.1所示。图1.2.1 打印指定高度为6层的数字金字塔实现思路（1） 定义一个变量，赋值为数字金字塔的高度。（2） 使用嵌套for循环打印数字金字塔。（3） 声明i控制外重循环的层数。（4） 声明j控制内层循环，分别打印空格、递增的数字和递减的数字。（5） 空格使用” ”来打印。关键代码打印数字金字塔/ 为金字塔的高度赋值var height = 6;/ 使用循环输出数字金字塔for(var i=1; i=1; j-)document.write(    );for(var j=1; j=1; j-)document.write(j +   )document.write();2：打印三角形训练技能点 嵌套for循环语句 if条件语句的使用需求说明编写JavaScript脚本实现输出图1.2.2和图1.2.3的图形。图1.2.2输入数字为6的时候只需打印出倒三角形图1.2.3输入数字为5的时候需要打印出倒三角形和正三角形具体的要求如下：指定一个变量并赋值。当输入的数字大于5的时候，输出图1.2.2所示的倒三角形，三角形的层数等于输入的数字值；当输入的数字小于或等于5的时候，输出图1.2.3所示的倒三角形和正三角形，倒三角形和正三角形的层数均等于输入的数字值。实现思路（1） 指定一个变量并赋值。（2） 输出倒三角形。（3） 判断层数要求，当数字小于等于5的时候，再次输出正三角形，否则不再输出。关键代码/ 输入打印三角形的层数/ 当height大于5的时候，输出倒三角形/ var height = 6;/ 当height小于或者等于5的时候，输出倒三角形接着一个正三角形var height= 5;/ height为任何数都会打印出倒三角形for(var i=0; iheight; i+)for(var j=0; ji; j+)document.write(    );for(var j=0; jheight - i; j+)document.write(*      );document.write();/ 当height=5的时候，再接着倒三角形的下端打印出正三角形if(height = 5)for(var i=0; i0; j-)document.write(    );for(var j=0; j=i; j+)document.write(*      );document.write();3：函数的定义与调用训练技能点 使用function关键字自定义函数 多重if语句 onload事件需求说明根据时间段显示不同的提示信息。参考的提示信息如下： 上午9点至下午5点，显示：你好，请用饱满的精神开始工作！ 下午5点至晚上10点，显示：现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？ 晚上10点至次日5点，显示：辛勤劳作了一天了，该休息了！ 次日早上6点至8点，显示：一日之计在于晨，清新的早晨来临了，早上好！系统的提示信息如下图1.2.4和图1.2.5所示。图1.2.4根据当前时间显示提示信息-1图1.2.5根据当前时间显示提示信息-2实现思路（1） 使用function关键字自定义函数welcome()。（2） 定义一个变量，表示当前的时间。（3） 使用多重if判断不同时间，通过alert()输出提示信息。（4） 使用window的onload事件调用welcome()函数。window的onload事件，当网页加载时候被触发，调用其关联的函数。关键代码无标题文档function welcome()/ 为时间变量赋值/ 将time赋值为清晨的时间段/ var time = 8;/ 将time赋值为工作时间var time = 10;/ 根据time的不同取值，弹出提示窗口if(time=9 & time17 & time=23 | time=6 & time9)alert(一日之计在于晨，清新的早晨来临了，早上好!);/ 页面加载完毕的时候，调用welcome函数window.onload = welcome;4：parseInt和parseFloat的应用-1训练技能点 自定义函数的定义与使用 使用parseInt和parseFloat函数将字符串转化为数值需求说明制作根据商品数量和单价计算价格的简易购物车，如图1.2.6所示。图1.2.6简易购物车实现思路（1） 使用“document.all.元素名称.value”获得文本框中的单价和购买数量。document.all.元素名称.value可以设置和获得表单域中表单的value值的内容。（2） 使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。（3） 将转换后的商品价格和单价的乘积结果作为总价显示在指定位置。关键代码无标题文档bodytext-align:center;tableborder:1px solid gray;text-align:center;margin:10px auto;thline-height:30px;border-left:1px solid gray;background-color:lightblue;tdwidth:150px;border-left:1px solid gray;border-top:1px solid gray;line-height:30px;function cal()var strPrice = document.all.price.value;var price = parseFloat(strPrice);var strQuantity = document.all.quantity.value;var quantity = parseInt(strQuantity);var totalPrice = quantity * price;document.all.totalPrice.value = totalPrice;简易购物车编号名称单价（元）数量总价A-01ThinkPad SL3005：parseInt和parseFloat的应用-2训练技能点 自定义函数的定义与调用 使用parseInt和parseFloat函数将字符串转化为数值需求说明扩展实训任务4中的购物车，使得一次能够购买多件物品，并计算出价格小计和总售价。效果如下图1.2.7所示。图1.2.7扩展购物车实现思路（1） 使用document.all.元素名称.value获得文本框中的单价和购买数量。（2） 使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。（3） 将转换后的商品价格和单价的乘积结果作为小计，并计算总计。（4） 将计算完成的小计和总计显示在页面中的合适位置。第二章 BOM编程1：open常见应用训练技能点 窗口开启window.open( )方法 窗口关闭close( )方法 页面提示alert( )方法 信息确认对话框confirm( )方法需求说明根据要求，在页面上设置事件触发按钮，开启不同类型的窗口。页面按钮效果如下图2.2.1所示。图2.2.1 打开窗口实现思路（1） 通过设置window.open( )方法的参数，确定新窗口打开的类型。（2） 使用showModalDialog( )方法调用模式窗口。在模式窗口页面的代码中写上window.returnValue=XXX，将信息XXX传递到主窗口，并在主窗口以showModalDialog( )方法的返回值形式获得。关键代码在主页面，参照图2.2.1定义好各个按钮，定义好按钮的onclick事件，在事件中分别调用下列的show1( )show5( )方法。/ 打开窗口function show1()window.open(poster.html);/ 打开固定大小的窗口，无菜单栏等function show2()window.open(poster.html,width=540,height=330,menubar=0,scrollbars=0,status=0,toolbar=0,location=0);/ 打开模态窗口，并接收返回值function show3()var dialogValue = window.showModalDialog(poster.html,dialogWidth=540,dialogHeight=330,menubar=0,scrollbars=0,status=0,toolbar=0,location=0);document.all.result.value = dialogValue;document.all.result.value = dialogValue;/全屏显示本页面function show4()open(document.location,fullscreen=yes);/ confirm确认对话框function show5()if(confirm(知识改变命运，对么？)alert(你相信知识改变命运，努力会有收获的!);2：模式窗口和主窗口之间的信息传递训练技能点 showModalDialog( )方法的调用 模式窗口和主窗口的信息交互 JavaScript中定义对象和对象的属性需求说明模拟购物车信息提交页面，实现送货地址确认页面，如图.5所示。图2.2.2 点击订单提交页面填写邮寄地址的链接图2.2.3 在弹出的模式对话框中进行送货地址确认图2.2.4 送货地址信息成功反馈图2.2.5 点击提交订单后系统显示的确认信息实现思路（1） 定义好送货地址确认窗口的页面内容address.html，如图2.2.3所示。（2） 使用window.showModalDialog()方法开启送货地址确认模式窗口。（3） 在模式窗口的页面中，定义一个对象result。（4） 将模式窗口的表单域填写的值分别作为属性赋值给对象result。（5） 将result对象赋值给模式窗口的window.returnValue。（6） 在主窗口中获得模式窗口传过来的参数并计算完整的地址信息写到主窗口的表单中。（7） 在主窗口点击提交订单，提示订单信息。关键代码下面是模式窗口address.html中的内容。function closeDialog()var result = new Object();vince = vince.value;result.city = document.all.city.value;result.region = document.all.region.value;result.street = document.all.street.value;result.doorId = document.all.doorId.value;window.returnValue = result;window.close();下面是主窗口中的内容和页面元素内容。var dialogValue;function showDialog()dialogValue = showModalDialog(address.html, dialogHeight=260px, dialogWidth=400px, menubar=0, scrollbar=0, status=0, toolbar=0,location=0);var address = dialogVvince + dialogValue.city + dialogValue.region + dialogValue.street + dialogValue.doorId;document.all.address.value = address;function show()var msg = 您本次购买的商品信息如下：n商品名称：双飞燕键盘n商品数量：10件 n商品单价：50.5元n运费：25元n费用合计：530元n;var msg = msg + 送货地址： + document.all.address.value + n请确认以上信息是否有误！;if(confirm(msg)alert(您确认了送货信息！);elsealert(您取消了送货信息！);请填写邮寄地址 3：Date对象调用获得当前系统日期训练技能点 Date对象的方法 获得系统日期的方法 各种根据日期字段处理信息的方法需求说明在JavaScript代码中使用Date对象获取当前时间的完整信息，包括星期几、上下午（AM or PM）等，并按照12小时制制作一个实时显示时间信息的时钟。效果如下图2.2.6所示。图2.2.6信息完全的时钟实现思路（1） 获得一个Date对象。（2） 通过Date对象的getYear( )方法获得年份；getMonth( )方法获得月份（0-11）；getDate( )方法获得日期；getDay( )方法获得一个星期中的第几天（0-6）。（3） 使用getHours( )获得当前小时，getMinutes( )获得当前分钟，getSeconds( )获得当前秒。（4） 使用switch语句将0-6的星期几转化为类似“星期一”的汉字表述方式。（5） 判断当前小时，如果大于12则减去12并在日期字符串后加上PM字样，否则加上AM字样。（6） 使用setTimeout( )方法每隔1000毫秒调用一次时间计算和显示函数，实现时钟动态显示。关键代码var date = new Date();/ 略过的代码，可参考核心技能部分的介绍var dayInWeek = date.getDay();var day;var period;switch(dayInWeek)case 0: day = 星期日;break;case 1: day = 星期一;break;case 2: day = 星期二;break;case 3: day = 星期三;break;case 4: day = 星期四;break;case 5: day = 星期五;break;case 6: day = 星期六;break;if(hour12)hour = hour-12;period = PM;elseperiod = AM; / 略过的代码，可参考核心技能部分的介绍var timeStr = 今天是：+year+年+month+月+dayInMonth+ 日+day+    +hour+:+ minute+:+second+period;document.getElementById(timmer).innerHTML = timeStr;4：淘宝网宝贝交易倒计时训练技能点 根据秒数换算时间 setTimeout( )函数实现时钟倒计时 parseInt( )函数的使用需求说明制作淘宝网宝贝交易时间，效果如图2.2.7右下角所示。图2.2.7淘宝网宝贝交易倒计时实现思路（1） 定义全局变量seconds为交易时间，初始时间定为93600秒（1天零2小时整）。（2） 定义更新交易时间的函数，将剩余时间转化为小时、分钟、秒的格式。（3） 使用setTimeout( )每隔一秒更新一次时间；或者使用setInterval( )函数每隔1秒调用一次时间计算函数。关键代码时间的转换方式如下：var day = parseInt(seconds/86400);var hourLeft = seconds % 86400;var hour = parseInt(hourLeft / 3600);var minuteLeft = hourLeft % 3600;var minute = parseInt(minuteLeft / 60);var secondLeft = minuteLeft % 60;5：setTimeout方法的应用 训练技能点 open函数打开窗口 setTimeout函数的应用需求说明模拟电脑病毒效果，效果如图2.2.8所示。图2.2.8电脑病毒效果实现思路（1） 使用给定图片制作病毒界面。（2） window.open( )打开病毒界面。（3） setTimeout( )设置循环开启病毒页面。（4） 定义一个计数器作为开启页面数量控制。第三章 DOM高级编程1：制作可以关闭的浮动广告训练技能点 使用document.getElementById( )方法获取层对象 使用样式属性之display的不同取值实现层的隐藏和重新显示需求说明要求根据所给素材制作浮动广告，当点击广告中的关闭图标时，浮动广告隐藏。实现效果如图3.2.1所示。图3.2.1 可以关闭的浮动广告实现步骤（1） 设置广告层和关闭层，且二者拥有CSS属性position:absolute。（2） 定义JavaScript函数float( )，实现漂浮广告的浮动。（3） 定义JavaScript函数closePoster( )，实现点击关闭图标时，隐藏浮动广告层和关闭图标本身。关键代码可以关闭的浮动广告bodywidth:1345px;height:2000px;background-image:url(images/float_poster_bg.png);position:relative;#posterwidth:540px;height:290px;background-image:url(images/poster2.jpg);right:0px;top:0px;position:absolute;#closerwidth:34px;height:34px;background-image:url(images/close.png);position:absolute;right:0px;top:0px;function float()document.getElementById(poster).style.pixelTop = document.documentElement.scrollTop;function closePoster()document.getElementById(poster).style.display = none;document.getElementById(closer).style.display = none;window.onscroll = float; 2：制作可以关闭的对联广告训练技能点 使用document.getElementById( )方法获取层对象 使用样式属性之display的不同取值实现层的隐藏和重新显示需求说明要求根据所给素材制作对联广告，当点击广告中的关闭图标时，对联广告隐藏。对联广告是浮动广告的一种，广告层对称分布在页面左右两侧。实现的对联广告效果如下图3.2.2所示。图3.2.2 可以关闭的对联广告效果图3.2.3 关闭掉右侧对联广告后的效果实现步骤（1） 设置广告层和关闭层，均拥有CSS属性position:absolute。（2） 定义JavaScript函数float( )，实现浮动广告的浮动。（3） 定义JavaScript函数closePoster(obj)，实现点击关闭图标时，隐藏浮动广告层和关闭图标本身。（4） 在closePoster(obj)方法中，使用obj.style.display获得关闭图标本身的显示属性；使用obj.parentNode.style.display设置对联广告的显示属性。关键代码标签内的页面代码设计如下所示。 3：树形菜单的动态添加和删除训练技能点 document对象的getElementById( )方法 使用CSS的display属性控制层的显示和隐藏 使用JavaScript动态地改变CSS属性 innerHTML属性的使用 访问节点信息的方法需求说明使用给定的项目图片素材，用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，并且可以动态添加和删除一级菜单项。实现效果如下列图示3.2.4-3.2.7所示。图3.2.4 二级菜单收起的情况图3.2.5 二级菜单展开的情况图3.2.6 添加一个一级菜单项图3.2.7 删除最末位的一级菜单项实现步骤（1） 设计HTML页面的列表形式，并且设置列表的样式list-style:none;。（2） 当点击一级菜单时，使用样式表的display属性控制二级菜单的显示和收起。（3） 使用访问节点信息的方法控制一级菜单的添加和删除。关键代码树形菜单bodyfont-size:13px;acolor:black;text-decoration:none;imgborder:none;#pictures,#artlist-style:none;display:none;/ 点击一级菜单，实现二级菜单的显示和隐藏。function showArt()var status = document.getElementById(art).style.display;if(status = block)document.getElementById(art).style.display = none;elsedocument.getElementById(art).style.display = block;/ 添加节点的逻辑function addNode()var content = document.getElementById(content).value;var ul = document.createElement(ul);ul.innerHTML = + content +;document.getElementById(tree).appendChild(ul);/ 删除节点的逻辑function deleteLast()var father = document.getElementById(tree);var last = father.lastChild;father.removeChild(last);树形菜单 文学艺术 先锋写作 小说散文 精彩博文 贴图专区 节点内容： 4：根据所给信息动态追加表格的一行训练技能点 在JavaScript中使用document对象访问页面元素的常用方式 动态添加节点信息的方法需求说明要求使用文本域收集信息，并将收集到的信息经过处理后作为表格的一行追加到表格的最后。实现效果如下图所示。图3.2.8 动态添加节点信息实现步骤（1） 按照图片要求编写标签部分的网页内容，包括一个拥有2行信息的表格和一个拥有按钮和4个文本框的表单。（2） 按照文本框的提示输入商品的信息，并且根据商品数量、商品单价和商品的运费计算商品价格合计，然后将获得的信息作为表格的一行追加到现有表格的末尾。5：制作全选、全不选效果训练技能点 document.getElementsByName( )方法 复选框的checked属性 数组的遍历需求说明实现全选和全不选功能，效果如下图3.2.9所示。图3.2.9 页面加载后的结果图3.2.10 全选/全不选效果实现步骤（1） 通过document.getElementsByName( )方法获取复选框集合。（2） 判断按钮的值应该是“都喜欢”还是“都不喜欢”。（3） 根据判断的条件循环设置每一个checkbox的checked属性，如果按钮当前值是“都喜欢”，则将checked设置为true，同时改变按钮的值为“都不喜欢”；否则将checked设置为false，同时改变按钮的值为“都喜欢”。关键代码function changeSelect()var button = document.getElementById(select);var checkboxs = document.getElementsByName(favorite);if(button.value = 都喜欢)for(var i=0; icheckboxs.length; i+)checkboxsi.checked = true;button.value = 都不喜欢;else if(button.value = 都不喜欢)for(var i=0; icheckboxs.length; i+)checkboxsi.checked = false;button.value = 都喜欢;请自行编写页面标签部分的内容，注意所有checkbox的name都设为“favorite”。6：函数的定义与调用练习部分训练技能点（1） DIV+CSS样式控制（2） 函数的定义（3） onclick事件需求说明制作淘宝商品的详细介绍页面。根据用户的选择，显示不同商品颜色，效果如下图3.2.11和图3.2.12所示。图3.2.11 选中黄色后的效果图3.2.12 选中黑色后的效果实现思路（1） 使用CSS+DIV搭建程序界面。（2） 定义函数showColor(obj)，当点击不同颜色的选框的时候，在“已经选择”字体后面打印出相应的颜色，并改变选中的那个颜色的选框的样式。（3） 使用onclick事件调用showColor函数。关键代码第一部分：搭建标签的内容颜  色  黄色白色黑色 我要买：件（库存11件）已经选择：第二部分：撰写CSS+DIV的样式divwidth:400px;#outerheight:280px;border:1px solid blue;#outer divheight:70px;border:none;line-height:70px;.fontcolor:black;font-size:14px;font-weight:bold;#firstline spanheight:40px;width:40px;text-align:center;line-height:40px;display:inline-block;font-size:12px;border:1px solid gray;#outer #fourthline #buy,#cartbackground-image:url(images/buy_cart.png);height:35px;width:140px;overflow:auto;display:inline-block;#outer #fourthline #cartbackground-position: -280px 0px;height:35px;#outer #thirdline #resultcolor:red;第三部分：定义showColor(obj)函数function showColor(obj)var spanArray = document.getElementById(firstline).getElement