JavaScript上机练习.docx

JavaScript上机练习.docx

《JavaScript上机练习.docx》由会员分享，可在线阅读，更多相关《JavaScript上机练习.docx（100页珍藏版）》请在冰豆网上搜索。

JavaScript上机练习

第一章JavaScript根本语法

1：

打印数字金字塔

训练技能点

Ø变量的声明与赋值

Ø使用for循环

需求说明

打印数字金字塔，效果如以下图1.2.1所示。

图1.2.1打印指定高度为6层的数字金字塔

实现思路

（1）定义一个变量，赋值为数字金字塔的高度。

（2）使用嵌套for循环打印数字金字塔。

（3）声明i控制外重循环的层数。

（4）声明j控制内层循环，分别打印空格、递增的数字和递减的数字。

（5）空格使用〞 〞来打印。

关键代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":

//w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//w3.org/1999/xhtml">

//为金字塔的高度赋值

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;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的时候，输出倒三角形

//varheight=6;

//当height小于或者等于5的时候，输出倒三角形接着一个正三角形

varheight=5;

//height为任何数都会打印出倒三角形

for（vari=0;i

for（varj=0;j

document.write（"    "）;

}

for（varj=0;j

document.write（"*      "）;

}

document.write（"
"）;

}

//当height<=5的时候，再接着倒三角形的下端打印出正三角形

if（height<=5）{

for（vari=0;i

for（varj=height-i-1;j>0;j--）{

document.write（"    "）;

}

for（varj=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事件，当网页加载时候被触发，调用其关联的函数。

关键代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":

//w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//w3.org/1999/xhtml">

functionwelcome（）{

//为时间变量赋值

//将time赋值为清晨的时间段

//vartime=8;

//将time赋值为工作时间

vartime=10;

//根据time的不同取值，弹出提示窗口

if（time>=9&&time<=17）{

alert（"你好，请用饱满的精神开始工作!

"）;

}elseif（time>17&&time<23）{

alert（"现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？

"）;

}elseif（time>=23||time<6）{

alert（"辛勤劳作了一天了，该休息了!

"）;

}elseif（time>=6&&time<9）{

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）将转换后的商品价格和单价的乘积结果作为总价显示在指定位置。

关键代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":

//w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//w3.org/1999/xhtml">

body{

text-align:

center;

}

table{

border:

1pxsolidgray;

text-align:

center;

margin:

10pxauto;

}

th{

line-height:

30px;

border-left:

1pxsolidgray;

background-color:

lightblue;

}

td{

width:

150px;

border-left:

1pxsolidgray;

border-top:

1pxsolidgray;

line-height:

30px;

}

简易购物车

编号

名称

单价〔元〕

数量

总价

A-01

ThinkPadSL300

readonly="readonly"/>

value="计算价格"onclick="cal（）"/>

5：

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（）方法调用模式窗口。

在模式窗口页面的

2：

模式窗口和主窗口之间的信息传递

训练技能点

Ø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中的

下面是主窗口中的

--下面省略表格内容的编写-->

showDialog（）;">请填写邮寄地址

3：

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:

day="星期一";break;

case2:

day="星期二";break;

case3:

day="星期三";break;

case4:

day="星期四";break;

case5:

day="星期五";break;

case6:

day="星期六";break;

}

if（hour>12）{

hour=hour-12;

period="PM";

}else{

period="AM";

}

//略过的代码，可参考核心技能局部的介绍

vartimeStr="今天是：

"+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天零