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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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日历程序
2006/12/06 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
php压缩文件夹最新版
2018/07/18 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python中正则表达式与模式匹配
2019/05/07 Python
python类的实例化问题解决
2019/08/31 Python
Python 代码调试技巧示例代码
2020/08/11 Python
专业实习自我鉴定
2013/10/29 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
生物制药自我鉴定
2014/01/25 职场文书
现场施工员岗位职责
2014/03/10 职场文书
安全检查汇报材料
2014/12/26 职场文书
车间主任岗位职责
2015/02/03 职场文书