JavaScript实例教程(九)活动文字的状态栏

夜一个人很寂寞

夜一个人很寂寞

2016-02-19 14:39

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的JavaScript实例教程(九)活动文字的状态栏,手机电脑控们准备好了吗?一起看过来吧!

通过上面的JavaScript语法基础的学习,想必大家对 JavaScript的认识进一步加深了吧,但是那只是一种基础,我们要做的主要的目的,是要大家通过实例的学习,逐渐掌握JavaScript的各种语法基础,所以上面的语法如果有些你们不明白,你可以先看看以后的例子,我们将通过以后实例的讲解来进一步掌握JavaScript的各种语法基础。

活动文字的状态栏

在大家浏览网站的时候,活动状态栏的文字一个接一个从左向右冒出,是不是让你的眼睛应接不暇呢,你是不是也想使自己的网页有着同样的效果呢,现在我们通过JavaScript程序的应用来实现这个效果,下面我们就来仔细分析一下这种动态效果是怎么产生的吧。

达到这种效果的思路是:先把要呈现的文字赋给一个变量,设置一个函数,每隔一段时间就在状态栏上打出文字,文字递增出现,当文字的长度等于整句话的长度的时候,使其为0,重新打出文字,不停循环就可以得到这种效果。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

下面,我们来看一看源程序吧。
script language="JavaScript"
var msg = "欢迎光临5D多媒体 !! " ;
// msg变量就是设定状态栏要出现的文字(一句话)
var interval = 120
//设定间隔多少毫秒文字长度增加一个,此处是120毫秒
var seq=0;
//代表动态的文字长度
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
//文字的字符加一
seq++;
//动态文字的长度加一
if ( seq = len ) {
seq = 0;
window.status = '';
window.setTimeout("Scroll();", interval );
}
//如果动态文字长度和整句话相同,则动态文字的长度设为0,重新来过
else
window.setTimeout("Scroll();", interval );
}
Scroll();
/script

把上述源代码拷入Html文件的body/body标签中可以有如下的效果:

JavaScript实例教程(九)活动文字的状态栏

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JavaScript实例教程(九)活动文字的状态栏

Web开发
JavaScript实例教程(九)活动文字的状态栏

JavaScript实例教程(十五)状态栏文字拉长的效果

Web开发
JavaScript实例教程(十五)状态栏文字拉长的效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

FireFox 如何用Javascript 修改状态栏

Web开发
FireFox 如何用Javascript 修改状态栏

adobe dreamweaver教程状态栏

Dreamweaver 电脑应用
adobe dreamweaver教程状态栏

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CAD状态栏对象捕捉使用实例

cad教程 autocad教程 CAD
CAD状态栏对象捕捉使用实例

Access 2007 状态栏

编程语言 网络编程
Access 2007 状态栏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

自由设置页面全部链接的打开方式

自由设置页面全部链接的打开方式

Unix找不到apue.h文件该怎么办?

Unix找不到apue.h文件该怎么办?
下拉加载更多内容 ↓