search

Home >Web Front-end >JS Tutorial >Complete example of JS implementation of displaying typing effect in status bar_javascript skills

Complete example of JS implementation of displaying typing effect in status bar_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:34:211370browse

The example in this article describes the JS implementation of displaying the typing effect in the status bar. Share it with everyone for your reference, the details are as follows:

Here is a demonstration of JS implementing a status bar with typing effects, and displaying text with typing effects in the status bar. Note that this effect has browser compatibility issues, and the effect does not seem to be displayed in IE7 or higher browsers.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows: 

<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>

I hope this article will be helpful to everyone in JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS implements the complete code to display the current time and date in the title bar of a web page_javascript skillsNext article：JS implements the complete code to display the current time and date in the title bar of a web page_javascript skills

Related articles

See more