利用JS定時器改變頁面內容

代碼參考自:http://blog.sina.com.cn/s/blog_8df07b6f0100uea3.html

代碼如下:

<html>
    <head>
        <meta http-equiv="refresh" content="3;url=./ustcoj">
        <script language="JavaScript" type="text/javascript">
            var str = 'This page will be redirected to <a href="./ustcoj">USTC Online Judge</a> in __time__ seconds.';
            var cur = 2;
            function showText() 
            {
                document.getElementById('text').innerHTML = str.replace("__time__", cur);
                cur--;
            }
        </script>        
    </head>
    <body onload="setInterval('showText()',1000)">
        <h1><a href="./ustcoj">USTC Online Judge</a></h1>
        <h1><a href="./ustcoj/baoming">中國科大“百分點科技杯”ACM除夕挑戰賽入口</a></h1>

        <p id="text">This page will be redirected to <a href="./ustcoj">USTC Online Judge</a> in 3 seconds.</p>
    </body>
</html>


其中

<meta http-equiv="refresh" content="3;url=./ustcoj">
實現頁面的自動跳轉。代碼中的數字3表示3秒後跳轉。


其中

<body onload="setInterval('showText()',1000)">
綁定一個間隔定時器,該定時器每隔1000毫秒執行一次showText函數。


代碼

<script language="JavaScript" type="text/javascript">
    var str = 'This page will be redirected to <a href="./ustcoj">USTC Online Judge</a> in __time__ seconds.';
    var cur = 2;
    function showText() 
    {
        document.getElementById('text').innerHTML = str.replace("__time__", cur);
        cur--;
    }
</script> 

定義了函數showText(),該函數的功能是改變id爲text的節點的innerHTML值。


在JS中沒有找到類似printf這樣的格式化輸出語句,又不想用+串接字符串,所以使用replace方法了。該方法非常強大,其參數可以是正則表達式。這裏是大材小用了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章