JS实现在状态栏显示打字效果完整实例


Posted in Javascript onNovember 02, 2015

本文实例讲述了JS实现在状态栏显示打字效果。分享给大家供大家参考,具体如下:

这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果。

运行效果截图如下:

JS实现在状态栏显示打字效果完整实例

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue如何截取字符串
May 06 Javascript
微信小程序实现点击效果
Jun 21 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 #Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 #Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 #Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 #Javascript
You might like
php下实现折线图效果的代码
2007/04/28 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python装饰器使用方法实例
2013/11/21 Python
python简单实现获取当前时间
2016/08/27 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python 自动批量打开网页的示例
2019/02/21 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
2014年销售经理工作总结
2014/12/01 职场文书
现实表现材料范文
2014/12/23 职场文书
听证会主持词
2015/07/03 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
详解OpenCV曝光融合
2022/04/29 Python