JavaScript脚本的使用Word文件下载.docx
《JavaScript脚本的使用Word文件下载.docx》由会员分享，可在线阅读，更多相关《JavaScript脚本的使用Word文件下载.docx（27页珍藏版）》请在冰豆网上搜索。
要编写JavaScript程序，一般可按下面的三步进行：
第一步：
选用编辑器，设计网页的编辑器都可以使用，如记事本、Dreamweaver等。
第二步：
在Web页面内加入JavaScript代码，JavaScript程序嵌入在HTML文档中的<
javascript"
和<
标记之间，理论上可以将JavaScript语句放置在HTML文档中的任何位置，然后将核心脚本语句放置在<
HEAD>
…<
/HEAD>
之间是一个良好的编程习惯，因为这确保了所有代码在从<
BODY>
部分调用之前被阅读和执行。
第三步：
将HTML文档保存为扩展名是.html或.htm的文件，然后使用浏览器就可以看到JavaScript程序运行效果。
打开Dreamweaver，新建一网页文件，并保存为js.html，打开代码视图，输入以下代码：
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
JavaScript脚本的基本结构<
/title>
javascript"
varcount=0;
//定义变量并初始化
document.write（"
"
）;
//屏幕输出“上海世博欢迎您！
”
for（i=0;
i<
5;
i++）//五次循环输出
h1>
上海世博欢迎您！
/h1>
//屏幕输出标题1格式的“上海世博欢迎您！
/head>
body>
这是属于BODY的内容
/body>
/html>
保存文档，按F12浏览效果，如图10.1所示。
图10.1使用JavaScript脚本的基本结构
10.1.2使用JavaScript基本语法编写一个简易计算器
下面通过学习一个简易的计算器学习JavaScript中自定义函数的创建使用方法以及表单元素的获取，效果如图10.2所示。
图10.2简易计算器
1.新建表单网页calc.html，并为表单及各个表单元素命名，如图10.3所示。
图10.3简易计算器表单设计
其HTML代码如下：
HTML>
METAhttp-equiv="
charset=gb2312"
TITLE>
计算器<
/TITLE>
FORMaction="
method="
post"
name="
myform"
id="
TABLEborder="
0"
bgcolor="
#C9E495"
align="
center"
<
TR>
TDcolspan="
4"
H3>
IMGsrc="
images/shop.gif"
width="
54"
height="
购物简易计算器<
/H3>
/TD>
/TR>
TD>
第一个数<
3"
INPUTname="
txtNum1"
type="
text"
class="
textBaroder"
size="
25"
TR>
第二个数<
txtNum2"
addButton2"
button"
value="
＋"
>
subButton2"
－"
mulButton2"
×
"
divButton2"
÷
计算结果<
txtResult"
/TABLE>
/FORM>
/BODY>
/HTML>
2.自定义函数
在JavaScript中，分别有内置函数和自定义函数，其中内置函数可在脚本任意位置随时调用（如alert函数）；
自定义函数则必须先定义，然后才可以调用。
在JavaScript中自定义函数的语法如下：
function函数名称（参数1，参数2，…）{
语句；
｝
其中，function是定义函数的关键字，函数名称最好定义成一个“见名知义”的合法的标识符。
参数列表是传递给函数使用或操作的值，其值可以是常量、变量或其他表达式。
函数可以没有任何参数，但仍然必须保留小括号，如下所示：
function函数名称（）{
}
函数的定义放在<
与<
/SCRIPT>
之间。
表单元素值的获取代码：
document.表单名.表单元素名称.value;
在<
下面添加脚本代码：
SCRIPTlanguage="
functioncompute（op）//op为形式参数，它代码运算符号
{
varnum1,num2;
//定义变量
num1=parseFloat（document.myform.txtNum1.value）;
//将“第一个数”的文本框的值获取并转化为浮点数赋值到变量num1中
num2=parseFloat（document.myform.txtNum2.value）;
//将“第二个数”的文本框的值获取并转化为浮点数赋值到变量num2中
if（op=="
+"
）//判断参数值是“+”
document.myform.txtResult.value=num1+num2;
//将两个变量累加的值赋值到“计算结果”的文本框中
-"
）//判断参数值是“-”
document.myform.txtResult.value=num1-num2;
//将两个变量相减的值赋值到“计算结果”的文本框中
*"
）//判断参数值是“*”
document.myform.txtResult.value=num1*num2;
//将两个变量相乘的值赋值到“计算结果”的文本框中
/"
&
&
num2!
=0）//判断参数值是“/”同时num2变量不等于0
document.myform.txtResult.value=num1/num2;
//将两个变量相除的值赋值到“计算结果”的文本框中
3.调用函数
要执行一个函数，必须先调用这个函数，要调用函数，必须指定函数名及其后面的参数列表（前提是有参数）。
函数的调用一般和表单元素的事件一起使用，调用格式如下：
事件名=“函数名（）”；
在“+”、“-”、“×
”、“/”四个命令按钮属性中调用函数，当鼠标单击命令按钮时调用函数，添加调用命令后的运算按钮代码：
onClick="
compute（'
+'
）"
-'
*'
/'
至此，一个简易的计算器设计完成，保存文件，F12浏览效果。
10.2JavaScript常用对象应用
10.2.1为网页编写一个日期显示的脚本
由于要用日期和时间和显示问题，所以要用到日期对象Date，要求时间能按秒钟显示动态效果，要用定时器setTimeout（）方法。
其中，日期对象是存储新Date对象的变量，下面为网页添加一个显示日期时间和脚本代码：
无标题文档<
text/javascript"
functionreloop（）{
vartime=newDate（）;
//获得当前时间
//获得年、月、日，Date（）函数中的月份是从0－11计算
varyear=time.getYear（）;
varmonth=time.getMonth（）+1;
vardate=time.getDate（）;
//获得小时、分钟、秒
varhour=time.getHours（）;
varminute=time.getMinutes（）;
varsecond=time.getSeconds（）;
//获得一个星期中的第几天,西方的星期是从星期日开始，星期六结束
varday=time.getDay（）;
if（minute<
10）//如果分钟只有1位，补0显示
minute="
+minute;
if（second<
10）//如果秒数只有1位，补0显示
second="
+second;
varapm="
AM"
;
//默认显示上午:
AM
if（hour>
12）//按12小时制显示
{
hour=hour-12;
apm="
PM"
;
varweekday=0;
switch（time.getDay（））{
case0:
weekday="
星期日"
break;
case1:
星期一"
case2:
星期二"
case3:
星期三"
break;
case4:
星期四"
case5:
星期五"
case6:
星期六"
document.myform.time.value="
今天是:
+year+"
年"
+month+"
月"
+date+"
日"
+weekday+"
+hour+"
:
+minute+"
+second+apm;
setTimeout（"
reloop（）"
1000）;
//每秒钟调用一次函数reloop（）"
STYLEtype="
text/css"
—
/*设置样式：
无边框的文本框*/
INPUT{
font-size:
30px;
border-style:
none;
background-color:
#FF8B3B;
}
/STYLE>
BODYonLoad="
formname="
INPUTid="
t"
time"
40"
/form>
保存网页，按F2浏览网页效果，如图10.4所示，显示的日期和时间与电脑中的内置时间相同。
图10.4显示日期和动态时钟
10.2.2设计弹出窗口
1.熟悉window常用方法
网站中有各种各样的弹出窗口，如网站公告，网站广告等，这就需要使用window对象的各种常用属性、方法和事件。
window对象的常用方法，如表10.1所示。
表10.1window常用方法
名称
说明
alert（"
提示信息"
）
显示一个带有提示信息和确定按钮的对话框
confirm（"
提示信息“）
显示一个带有提示信息和确定、取消按钮的对话框
open（"
url"
"
name"
feature"
打开具有指定名称的新窗口，并加载给URL所指定的文档；
如果没有提供URL，则打开一个空白文档
close（）
关闭当前窗口
setTimeout（"
函数"
毫秒数）
设置定时器：
经过指定毫秒值后执行某个函数
2.熟悉window窗口特征
制作网页弹出窗口的语法：
open（“打开窗口的url”,“窗口名”,“窗口特征”）
其中窗口特征属性如表10.2所示。
表10.2窗口特征属性
height
窗口高度
width
窗口宽度
toolbars
浏览器工具栏是否显示，yes或1为显示，no或0为不显示
scrollbars
是否显示滚动条
menubar
表示菜单栏是否显示
location
是否显示地址栏，yes或1为显示，no或0为不显示
status
是否显示状态栏，yes或1为显示，no或0为不显示
resizable
是否改变窗口的大小，yes或1为是，no或0为否
3.设计网页弹出窗口
设计思路：
打开首页的时候弹出一个大小固定，无滚动条、无菜单栏、无地址栏的广告窗口，主页的状态栏显示“上海世博欢迎您！
”，效果如图10.5所示。
图10.5自动弹出广告窗口
操作方法：
1）在站点中创建主页index.html，为方便之见，我们用插入图片表示首页。
2）在站点中创建一张广告网页adv.html，网页标题为“中国国家馆”，效果如图10.6所示。
图10.6广告页面
3）添加弹出窗口的JavaScript脚本。
世博网<
下面添下如下代码：
functionopenwindow（）
window.status="
//状态栏显示“上海世博欢迎您！
adv.html"
中国馆"
"
toolbars=0,location=0,statusbars=0,menubars=0,
width=500,height=250,scrollbars=0"
4）调用函数
由于要打开主页时自动弹出广告窗口，调用命令为网页加载事件onload。
中添加脚本调用命令：
bodyonLoad="
openwindow（）"
保存网页，按F12浏览效果。
10.3用JavaScript设计网页浮动广告
网站中经常除了弹出广告窗口之外，通常还有随滚动条移动的广告以及在网页中飘浮的广告，这就要使用window对象下的子对象——document对象，制作浮动广告主要涉及到document对象中的getElementById（）方法的应用，getElementById（）是根据HTML元素指定的ID，获得唯一一个HTML元素，如访问DIV层对象、图片img对象等。
10.3.1设计随滚动条移动的浮动的广告
1.任务分析
使用DIV层和JavaScript可以实现，先在页面中添加一个层，并把图片放在层中，然后使用JavaScript控制层的位置坐标，让其随滚动条同步移动，并且总保持层位于页面的左上角，如图10.7所示。
图10.7广告图片位于页面左侧
2.实现过程：
1）在dreamweaver中打开index.html，单击【布局】中“绘制APDiv”按钮
，在网页的左侧插入一个层，并设置层的相关属性，属性值如图10.8所示。
图10.8设置层的属性
2）切换到代码窗口，将层的属性修改为style=“……”。
当网页中插入层时dreamweaver会自动生成的样式代码：
#advleft{
position:
absolute;
left:
15px;
top:
40px;
width:
166px;
height:
335;
z-index:
1;
我们必须剪切advleft｛｝中的样式代码，然后复制到对应的<
divid="
advleft"
的style属性中，即将其修改为：
style="
，
中间的回车符不去也可以，注意层的宽度和高度应与插入的广告图片大小保持一致，最后去掉内嵌样式剩下的代码。
注意：
如果要在网页的右侧设计一个浮动广告，只要将上面代码中的“left”改变“right”即可。
3）在层中插入广告图片logo3.jpg。
4）编写JavaScrip脚本代码
varinitTop1=0;
functioninit（）//获取广告层的上边距的初始值
initTop1=document.getElementById（"
）.style.pixelTop;
functionmove（）//使广告图片层与滚动条同步移动
document.getElementById（"
）.style.pixelTop=initTop1+document.body.scrollTop;
}
window.onscroll=move;
//窗口的滚动事件，当页面滚动时调用move（）函数
5）调用函数
其中init（）在网页加载时调用，即在<
dody>
中添加调用代码后为<
bodyonload="
init（）"
，也就是能在网页加载时获取广告图片的初始位置；
move（）函数的在页面滚动时调用，即可以用代码window.onscroll=move;
来调用函数。
至此，与滚动条同步移动的广告设计完成，保存文档，按F12浏览网页效果，即可实现广告图片随滚动条同步移动，并且总保持同一个位置，如图10.9所示。
图10.9广告图片与滚动条同步移动
10.3.2带关闭按钮的浮动窗口
当我们在打开网站时，如果广告图片太多，会让浏览者感觉到很烦，如果给广告带上关闭的按钮，当用户用鼠标单击此按钮时广告层就可以隐藏起来，要实现此功能，只要在上述的广告层中插入一个子层，并把关闭图片插入其中，然后给“关闭图片”所在的层添加鼠标单击事件，当鼠标单击的时候，调用相关方法来关闭广告层即可。
2.实现过程
1）在dreamweaver打开10.3.1中带有随滚动条移动的广告网页，在层advleft中插入子层closeleft。
参考父层advleft的修改方法，将其样式代码，然后复制到对应的<
cloesleft"
的style属性中
3）在子层cloesleft中插入关闭图片close.gif，并调整层的大小，使其与关闭图片大小相同，如图所示，修改后的广告层代码：
imgsrc="
logo3.jpg"
174"
335"
closeleft"
92px;
19px;
72px;
31
升级会员 