JavaScript特效1——页面特效

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”对象的一些方法分解字符串，以实现参数的提取