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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
python异步任务队列示例
2014/04/01 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python global全局变量函数详解
2018/09/18 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python的logging模块基本用法
2020/12/24 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
门卫工作岗位职责
2013/12/17 职场文书
毕业自我评价
2014/02/05 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
工程承包协议书
2014/04/22 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
社区活动总结
2015/02/04 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB