JavaScript上机练习Word格式文档下载.docx
《JavaScript上机练习Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JavaScript上机练习Word格式文档下载.docx（100页珍藏版）》请在冰豆网上搜索。
varheight=6;
//使用循环输出数字金字塔
for（vari=1;
i<
=height;
i++）{
for（varj=height-i;
j>
=1;
j--）{
document.write（"
&
"
）;
}
for（varj=1;
j<
=i;
j++）{
document.write（j+"
for（varj=i-1;
）
document.write（"
br/>
}
/script>
/head>
body>
/body>
/html>
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的时候，输出倒三角形
//varheight=6;
//当height小于或者等于5的时候，输出倒三角形接着一个正三角形
varheight=5;
//height为任何数都会打印出倒三角形
for（vari=0;
height;
for（varj=0;
i;
height-i;
*&
//当height<
=5的时候，再接着倒三角形的下端打印出正三角形
if（height<
=5）{
for（vari=0;
for（varj=height-i-1;
0;
document.write（"
}
for（varj=0;
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事件，当网页加载时候被触发，调用其关联的函数。
无标题文档<
functionwelcome（）{
//为时间变量赋值
//将time赋值为清晨的时间段
//vartime=8;
//将time赋值为工作时间
vartime=10;
//根据time的不同取值，弹出提示窗口
if（time>
=9&
time<
=17）{
alert（"
你好，请用饱满的精神开始工作!
}elseif（time>
17&
23）{
=23||time<
6）{
辛勤劳作了一天了，该休息了!
=6&
9）{
一日之计在于晨，清新的早晨来临了，早上好!
//页面加载完毕的时候，调用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）将转换后的商品价格和单价的乘积结果作为总价显示在指定位置。
styletype="
text/css"
body{
text-align:
center;
table{
border:
1pxsolidgray;
margin:
10pxauto;
th{
line-height:
30px;
border-left:
background-color:
lightblue;
td{
width:
150px;
border-top:
/style>
script>
functioncal（）{
varstrPrice=document.all.price.value;
varprice=parseFloat（strPrice）;
varstrQuantity=document.all.quantity.value;
varquantity=parseInt（strQuantity）;
vartotalPrice=quantity*price;
document.all.totalPrice.value=totalPrice;
<
h3>
简易购物车<
/h3>
hr/>
tablecellpadding="
0"
cellspacing="
tr>
th>
编号<
/th>
名称<
单价〔元〕<
数量<
总价<
/tr>
td>
A-01<
/td>
ThinkPadSL300<
inputtype="
text"
name="
price"
id="
size="
10"
quantity"
inputtype="
totalPrice"
readonly="
readonly"
/>
button"
calculate"
value="
计算价格"
onclick="
cal（）"
/table>
5：
parseInt和parseFloat的应用-2
自定义函数的定义与调用
扩展实训任务4中的购物车，使得一次能够购置多件物品，并计算出价格小计和总售价。
效果如以下图1.2.7所示。
图1.2.7扩展购物车
（1）使用document.all.元素名称.value获得文本框中的单价和购置数量。
（3）将转换后的商品价格和单价的乘积结果作为小计，并计算总计。
（4）将计算完成的小计和总计显示在页面中的适宜位置。
第二章BOM编程
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（）方法。
//翻开窗口
functionshow1（）{
window.open（"
poster.html"
//翻开固定大小的窗口，无菜单栏等
functionshow2（）{
window.open（"
"
width=540,height=330,menubar=0,
scrollbars=0,status=0,toolbar=0,location=0"
}
//翻开模态窗口，并接收返回值
functionshow3（）{
vardialogValue=
window.showModalDialog（"
dialogWidth=540,
dialogHeight=330,menubar=0,scrollbars=0,status=0,toolbar=0,
location=0"
document.all.result.value=dialogValue;
document.all.result.value=dialogValue;
//全屏显示本页面
functionshow4（）{
open（document.location,"
fullscreen=yes"
//confirm确认对话框
functionshow5（）{
if（confirm（"
知识改变命运，对么？
））{
你相信知识改变命运，努力会有收获的!
模式窗口和主窗口之间的信息传递
showModalDialog（）方法的调用
模式窗口和主窗口的信息交互
JavaScript中定义对象和对象的属性
模拟购物车信息提交页面，实现送货地址确认页面，如图2.2.2~2.2.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中的<
内容。
functioncloseDialog（）{
varresult=newObject（）;
result.province=document.all.province.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（）;
下面是主窗口中的<
内容和页面元素内容。
vardialogValue;
functionshowDialog（）{
dialogValue=showModalDialog（"
address.html"
"
dialogHeight=260px,dialogWidth=400px,menubar=0,scrollbar=0,status=0,toolbar=0,location=0"
varaddress=dialogValue.province+dialogValue.city+
dialogValue.region+dialogValue.street+dialogValue.doorId;
document.all.address.value=address;
functionshow（）{
varmsg="
您本次购置的商品信息如下：
\n商品名称：
双飞燕键盘\n商品数量：
10件
\n商品单价：
50.5元\n运费：
25元\n费用合计：
530元\n"
;
varmsg=msg+"
送货地址：
+document.all.address.value
+"
\n请确认以上信息是否有误！
if（confirm（msg））{
您确认了送货信息！
}else{
您取消了送货信息！
border="
1"
--下面省略表格内容的编写-->
tdcolspan="
5"
ahref="
javascript:
showDialog（）;
请填写邮寄地址<
/a>
address"
60"
value="
提交订单"
show（）"
Date对象调用获得当前系统日期
Date对象的方法
获得系统日期的方法
各种根据日期字段处理信息的方法
在JavaScript代码中使用Date对象获取当前时间的完整信息，包括星期几、上下午〔AMorPM〕等，并按照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毫秒调用一次时间计算和显示函数，实现时钟动态显示。
vardate=newDate（）;
//略过的代码，可参考核心技能局部的介绍
vardayInWeek=date.getDay（）;
varday;
varperiod;
switch（dayInWeek）{
case0:
day="
星期日"
break;
case1:
星期一"
case2:
星期二"
case3:
星期三"
case4:
星期四"
case5:
星期五"
case6:
星期六"
if（hour>
12）{
hour=hour-12;
period="
PM"
AM"
//略过的代码，可参考核心技能局部的介绍
vartimeStr="
今天是：
+year+"
年"
+month+"
月"
+dayInMonth+
"
日"
+day+"
+hour+"
:
+
minute+"
+second+period;
document.getElementById（"
timmer"
）.innerHTML=timeStr;
淘宝网宝贝交易倒计时
根据秒数换算时间
setTimeout（）函数实现时钟倒计时
parseInt（）函数的使用
制作淘宝网宝贝交易时间，效果如图2.2.7右下角所示。
图2.2.7淘宝网宝贝交易倒计时
（1）定义全局变量seconds为交易时间，初始时间定为93600秒〔1天零
升级会员 