1、HTML页面反向显示
(1)实现代码
<!-- HTML页面反向显示 -->
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head >
<meta charset="UTF-8">
<title>Document</title>
</head>
<body >
这是一段伟大的历史<br>
来自全世界的瞩目和掌声
</body>
</html>
(2)难点剖析
dir属性。很多文本显示控件都具备这恶属性,其用来控制文本的显示方向。“rtl”就是right to left的意思。
2、页面自动刷新
(1)实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta HTTP-EQUIV="refresh" CONTENT="3;URL=http://www.baidu.com"></meta>
</head>
<body>
<table id="mytable" width="300px" height ="50px" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
(2)难点剖析
本例的重点是meta元素,其属性“HTTP-EQUIV”设置为refresh时,会自动刷新当前页面,此属性包含两个重要的设置:CONTENT和URL,CONTENT表示自动刷新的时间间隔,URL表示刷新后的页面地址。
3、当前网页调用其它网页
一个页面可以使用frame或iframe来加载另一个页面,但有些IE是是禁止使用框架的,所以本例使用另一种方法,实现在当前页调用另一个网页
(1)实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<object type="text/x-scriptlet" width="150px" height="100px" data="http://www.baidu.com"></object>
</body>
</html>
(2)难点剖析
本例的重点是object标签的使用。其type属性是“text/x-scriptlet”,其中”x-scriptlet”是IE的一个插件。data属性表示要加载的数据
4、倒计时载入页面
(1)实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="refresh" content="11;url=http://www.baidu.com">
<script type="text/javascript">
//获取当前时间
startday=new Date();
clockStart=startday.getTime(); //getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
function initStopwatch(){
var myTime=new Date();
var timeNow=myTime.getTime();
var timeDiff=timeNow-clockStart; //获取间隔时间
this.diffSces=timeDiff/1000; //因为时间以毫秒为单位
return (this.diffSces);
}
function getSecs(){
var mySecs=initStopwatch();
var mySecs1=""+mySecs;
//以倒计时方式显示时间
mySecs1=10-eval(mySecs1.substring(0,mySecs1.indexOf(".")))+"秒";
document.forms.form1.timespent.value=mySecs1;
window.setTimeout("getSecs()",1000);
}
</script>
</head>
<body>
<body bgcolor="#fff" onload="window.setTimeout('getSecs()',1)"></body>
<center>
10s后将加载页面:
<form name="form1">
<input type="text" size=9 name="timespent">
</form>
</center>
</body>
</html>
(2)难点剖析
本例的重点是加载页面,计算剩下的时间。加载页面使用的是Meta元素(如上节)。计算剩余时间使用了两个日期相减的方式,注意相减的结果是毫秒数
5、使用JavaScript传递页面参数
ASP和ASP.net都提供获取页面参数的对象,而JavaScript只能通过自定义方法实现。本例师兄如何获取页面传递过来的参数
(1)实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function GetArgs(parms,parmName){
var argIndex=parms.indexOf("?") ;
var arg=parms.substring(argIndex+1);
var valArg="";
args=arg.split("&");
for(var i=0;i<args.length;i++){
str=args[i];
var arg=str.split("=");
if(arg.length<=1){
continue;
}
if(arg[0]==parmName){
valArg=arg[1];
}
}
return valArg;
}
function PageParm(){
var myname=GetArgs(window.location.href,"name");
document.write("您请求的参数值为:"+myname);
}
</script>
</head>
<body onload="PageParm()">
</body>
</html>
(2)难点剖析
本例的重点是浏览器中参数传递的格式。从一个页面传递参数到另一个页面的格式为”页面地址?参数1名=参数值&参数2名=参数值“,其中”?“表示后面紧跟的字符串是参数,”&“用来连接两个参数。获取页面地址使用的是”window.location.href”.获取页面地址后使用“string”对象的一些方法分解字符串,以实现参数的提取