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 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
vue-cli常用设置总结
Feb 24 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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
smarty获得当前url的方法分享
2014/02/14 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python 学习教程之networkx
2019/04/15 Python
python实现人机五子棋
2020/03/25 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python把一个字符串切开的实例方法
2020/09/27 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
物流管理专业职业生涯规划书
2014/01/06 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
Python中的 Set 与 dict
2022/03/13 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL