01页面特效Word文档格式.docx
- 文档编号:16445227
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:26
- 大小:353.17KB
01页面特效Word文档格式.docx
《01页面特效Word文档格式.docx》由会员分享,可在线阅读,更多相关《01页面特效Word文档格式.docx(26页珍藏版)》请在冰豆网上搜索。
)
}
/script>
需要创建一个名为“以频道模式打开页面2.htm”的页面,内容不限。
【运行效果】
打开的频道模式页面如图1-10所示。
图1-10打开的频道模式页面
【难点剖析】
本例使用了“window.open”方法,用来打开一个新的页面,同时指定打开的参数“channelmode”,表示以频道模式打开新页面。
1.24使用JavaScript传递页面参数
ASP和ASP.NET都提供获取页面参数的对象,而JavaScript只能通过自定义方法实现。
本例将学习如何获取页面传递过来的参数。
scriptLANGUAGE="
JavaScript"
functionGetArgs(parms,parmName)
varargIndex=parms.indexOf("
?
"
)//获取?
所在的位置
vararg=parms.substring(argIndex+1);
//获取?
后面的字符串
varvalArg="
;
args=arg.split("
&
);
//使用split将参数分解为数组
for(vari=0;
i<
args.length;
i++)
{
str=args[i];
vararg=str.split("
="
if(arg.length<
=1)continue;
//没有参数的时候
if(arg[0]==parmName)
valArg=arg[1];
//获取指定参数的值
}
returnvalArg;
functionPageParm()
varmyname=GetArgs(window.location.href,"
name"
document.write("
您请求的参数值为:
+myname);
带传递参数的页面效果如图1-14所示。
本例的重点是浏览器中参数传递的格式。
从一个页面传递参数到另一个页面的格式为“页面地址?
参数1名=参数值&
参数2名=参数值”,其中“?
”表示后面紧跟的字符串是参数,“&
”用来连接两个参数。
获取页面地址使用的是“window.location.href”。
获取页面地址后使用“string”对象的一些方法分解字符串,以实现参数的提取。
图1-14带传递参数的页面效果
1.6保护自己的网页不被放入框架
随着网络信息的传播,很多网站不再具备自己的内容,而是使用框架,加载其他网站的内容。
如果不允许网页被他人加载,可使用本例提供的方法。
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
>
ScriptLANGUAGE="
if(self!
=top){
top.location=self.location;
//判断是否是顶层,不是则将当前页设置为顶层
/head>
本例的重点是对层的判断。
在网页中,可以被框架加载的页面不能位于“top”层,所以通过判断当前页面是否是“top”层,来判断是否能被框架加载。
如果此页面不位于“top”层,则使用“top.location”将其设置为顶层,可使其不会被加载。
1.5保护网页源代码
大部分网页的源代码可以使用IE提供的“查看源代码”命令查看。
本例学习一种方法,可以屏蔽对网页源代码的查看。
html>
测试是否能看到源代码<
script>
functionclear()
Source=document.body.innerHTML;
//获取文档的原有内容
document.open();
//打开文档
代码已经被屏蔽"
//输出提示内容
document.close();
//关闭文档
document.title="
看不到源代码"
//文档标题
document.body.innerHTML=Source;
//重新写入旧内容
bodyonload=clear()>
marquee>
测试下能否看到源码<
/marquee>
【运行效果】使用“查看源代码”命令后的效果如图1-5所示。
本例的原理是首先将文档的内容保存在一个变量中,然后清空文档的内容,最后再在文档中显示旧内容。
其实文档内容显示的就是“document.write”输出的内容。
图1-5使用“查看源代码”命令后的效果
1.9倒计时载入页面
倒计时是常用的载入页面时的等待方式,本例学习如何计算倒计时的时间,同时学习自动加载页面的相关设置。
<
metahttp-equiv="
refresh"
content="
11;
url="
//获取当前时间
startday=newDate();
clockStart=startday.getTime();
functioninitStopwatch()
{
varmyTime=newDate();
vartimeNow=myTime.getTime();
vartimeDiff=timeNow-clockStart;
//获取间隔时间
this.diffSecs=timeDiff/1000;
//因为时间以毫秒为单位
return(this.diffSecs);
//返回间隔秒数
}
functiongetSecs()
varmySecs=initStopwatch();
varmySecs1="
+mySecs;
//以倒计时方式显示时间
mySecs1=10-eval(mySecs1.substring(0,mySecs1.indexOf("
."
)))+"
秒"
document.form1.timespent.value=mySecs1;
window.setTimeout('
getSecs()'
1000);
bodybgcolor="
#ffffff"
onLoad="
window.setTimeout('
1)"
center>
10秒后将加载页面:
formname=form1>
inputsize=9name=timespent>
/form>
/center>
倒计时等待效果如图1-7所示。
图1-7倒计时等待效果
本例的重点是加载页面、计算剩下的时间。
加载页面使用的是meta,其包含一个属性content,它包含两个参数:
需要等待的时间和要加载的页面地址。
计算剩余时间使用了两个日期相减的方式,注意相减的结果是毫秒数。
1.25冻结页面
页面被冻结后,鼠标单击页面中的任何按钮,都不会有反应。
如果要关闭页面,只能通过“Ctrl+Alt+Del”组合键。
functionfreeze()
alert('
对不起,死机了!
!
'
//首先提示已经完成效果
while(true){//进入循环
window.history.back(-1)//后退一格
FORM>
INPUTTYPE="
BUTTON"
VALUE="
Freeze"
onClick="
freeze()"
/FORM>
本例通过“freeze”方法,实现一个页面的冻结效果。
其中“freeze”方法中,使用了一个“while(true)”循环,此循环的条件一直为真,即这是一个无法结束的循环。
1.21判断网页加载完毕
有时候需要在某个页面加载完毕后,执行一些操作或进行一些判断。
如何判断页面加载完毕呢?
本例通过一个“iframe”框架,学习如何判断页面加载完毕。
iframeonload=alert("
加载完毕"
)src='
/iframe>
判断网页加载完毕的效果如图1-12所示。
iframe框架是在当前页面中嵌入另一个页面。
“onload”事件是页面加载完成后触发的事件。
所以使用“框架+onload”的方法,可以轻松判断页面是否加载完毕。
图1-12判断网页加载完毕的效果
1.15判断页面是否添加了W3C声明
当文档中添加了W3C的声明后,表示文档结构和对象都遵循W3C的规定,此时对象的一些调用方法可能就会改变,如窗体的高度应使用“document.documentElement.clientHeight”,而不一定就是“document.body.clientHeight”。
if(patMode=="
CSS1Compat"
)
alert("
本文档添加了W3C的声明"
else
本文档未添加W3C的声明"
本例的重点是“patMode”变量的值。
当文档有了标准声明时,“document.compatMode”的值就等于“CSS1compat”,因此,可以根据“patMode”的值来判断文档是否加了标准声明。
1.19在网页中动态添加Script脚本
Script脚本可以在页面中静态地设置好,也可以使用“src”属性调用页面外部的脚本文件。
本例学习一个方法,可以在页面运行过程中,动态添加Script脚本。
o=document.createElement("
script"
//动态创建script元素
o.text="
alert('
test!
)"
//弹出提示信息
document.documentElement.childNodes[0].appendChild(o);
//将脚本添加到页面中
本例的运行效果如图1-11所示。
本例使用“createElement”方法,创建了一个“script”元素,并设置元素的内容为“alert('
)”,最后使用“appendChild”方法,将此元素添加到窗体中。
图1-11本例的运行效果
1.10定义网页的关键字
【实例描述】在网页中加入关键字,可以供某些搜索引擎使用,其会利用该关键字为网站做索引,这样当用户在搜索网站中输入相同的关键字时,网站就会被搜索到。
metaname="
Keywords"
net,enterprise,ERP,c#"
【难点剖析】本例的重点是meta元素,其中有个属性“content”用来设置网站包含的关键字,如果要提高网站的排名,还可以设置重复的关键字。
1.16屏蔽网页中的脚本
为了网页的显示需要,有时候需要将某段暂时不需要的脚本屏蔽掉。
本例学习如何屏蔽网页中的JavaScript脚本。
noscript>
alert("
看看能不能提示"
/noscript>
本例的重点是noscript元素。
将不需要的脚本放在<
和<
元素之间,可以屏蔽掉这些脚本的运行。
1.8当前网页调用其他网页
【实例描述】一个页面可以使用iframe来加载另一个页面,但有些IE是禁止使用框架的,所以本例使用另外一个方法,实现在当前页中调用另一个网页。
objecttype="
text/x-scriptlet"
width="
150"
height="
100"
data="
//www."
/object>
调用其他页面后的效果如图1-6所示。
图1-6调用其他页面后的效果
本例的重点是object标签的使用。
其type属性是“text/x-scriptlet”(删除多余空格),其中“x-scriptlet”是IE的一个插件。
data属性表示要加载的数据。
1.7打印页面的出错原因
【实例描述】很多人习惯手写JavaScript代码,而不使用JavaScript编辑器。
这样操作的缺点在于不便于错误的调试,本例提供一种打印错误的方法,让调试人员可以轻松地找到错误所在。
functiongetError()
try
x=newtest;
//产生错误
catch(e)
document.write(e.description)//打印错误结果
bodyonload="
getError()"
【难点剖析】本例的重点是“try…catch”语句的运用。
try语句用来运行代码,当代码有错误发生时,则转到catch语句继续执行。
在catch语句中,使用“e.description”获取错误信息的描述,然后通过“document.write”方法,将错误信息显示在页面上。
1.20用JavaScript随机修改页面的标题
为了显示页面的动态效果,可设置页面的标题为多个,并动态轮换显示。
本例通过随机数和数组,实现这一效果。
//随机显示TITLE
vartil=newArray(5);
til[0]='
第一个标题'
til[1]='
第二个标题'
til[2]='
第三个标题'
til[3]='
第四个标题'
til[4]='
第五个标题'
varindextitle=Math.floor(Math.random()*til.length);
//获取一个随机整数
onload=functionchaTitle(){
varcurTitle=til[indextitle];
//获取数组中的指定项
window.document.title+="
-"
+curTitle;
//更改当前页的标题
本例将改变标题的代码写在了“onload”事件中,所以只有在加载页面的时候,标题才会改变。
可按F5不断刷新页面,测试标题栏的随机标题。
1.12禁止网页另存
很多网站为了保护自己的数据资料,禁止用户将网页另存到本地。
本例学习如何禁止另存行为。
iframesrc=*.html>
禁止网页另存的提示如图1-9所示。
图1-9禁止网页另存的提示
本例中有两个重点nosctipt(此单词前见‘:
’),元素和框架。
noscript是HTML的元素,如果浏览器支持JavaScript,则会忽略此元素内的代码,如果不支持JavaScript,则会显示noscript内的代码。
iframe表示框架,其数据源是所有的HTML文件。
noscript和iframe结合就禁止了网页的另存行为。
1.13禁止页面加入缓存
默认情况下,用户浏览过的页面一般都会加入缓存,即使断网后也能继续浏览。
本例将学习如何禁止页面加入缓存。
METAHTTP-EQUIV="
Pragma"
CONTENT="
no-cache"
inputtype=textname="
txt1"
value="
thisistest!
inputtype=buttonvalue="
转换文本"
javascript:
changeCase(txt1)"
本例的重点是HTML的META元素。
META元素包含两个重要的属性:
“HTTP-EQUIV”和“CONTENT”。
“HTTP-EQUIV”相当于HTTP的文件头,其可以向浏览器传回一些有用信息,以帮助正确和精确地显示网页内容,与之对应的属性为“CONTENT”,“CONTENT”中的内容其实就是各个参数的值。
1.14离开页面时弹出对话框
为了体现网站对用户的关怀,可在用户离开页面时给予一些提示,如“谢谢使用,购买的东西不要忘记付款!
”。
#fef4d9"
onUnload="
window.alert('
谢谢你的光临!
欢迎下次再来!
本例的重点是body标签的“onUnload”事件。
“onUnload”是离开页面时触发的事件。
一般用在body或frameset标签上,如<
bodyonUnload="
"
。
在带框架集和框架的分层页面中,单个框架的onUnload事件放置在每个框架文件的body标签上,要比框架集的onUnload事件早发生。
1.18自动识别网页类型
随着网站开发技术的更新,网页类型变得越来越丰富。
本例将介绍如何自动识别网页的类型。
SCRIPTLANGUAGE="
URL=window.location.href;
/
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 01 页面 特效