DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現在狀態欄顯示打字效果完整實例
JS實現在狀態欄顯示打字效果完整實例
編輯:關於JavaScript     

本文實例講述了JS實現在狀態欄顯示打字效果。分享給大家供大家參考,具體如下:

這裡演示JS實現帶有打字特效的狀態欄,在狀態欄顯示打字效果的文字,注意,此效果存在浏覽器兼容性問題,在IE7或更高的浏覽器下貌似不顯示效果。

運行效果截圖如下:

在線演示地址如下:

http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/

具體代碼如下:

<html>
<head>
<script language="JavaScript">
//以下幾條可以根據需要改變
var msg = "歡迎光臨,請多多提出你的建議!!!  " ;//需要顯示的內容
var interval = 120 //顯示每個字的時間間隔(毫秒)
//以下內容不需更改
var seq=0;
function typetext() {
len = msg.length;//取得信息的總長度
window.status = msg.substring(0, seq+1);//取得需顯示的部分
seq++; //將長度加一(為下一次顯示做准備)
if ( seq >= len ) { //如果已經內容全部顯示出來
seq = 0; //則恢復初始狀態,准備再次顯示
window.status = '';
window.setTimeout("typetext();", interval );//設定下一次顯示的間隔
}
else //如果信息還沒有顯示完整
window.setTimeout("typetext();", interval ); //則設定下一次顯示的時間間隔
} 
typetext(); //當頁面裝入的時候開始第一次顯示
</script>
<title>在狀態欄顯示打字效果</title>
</head>
<body>
<b>請注意頁面左下角的狀態欄</b>
</body>
</html>

希望本文所述對大家JavaScript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved