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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JS简单随机数生成方法
Sep 05 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
详解tween.js的使用教程
Sep 14 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 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类的反射用法实例
2014/11/03 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php实现的操作excel类详解
2016/01/15 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
angularJS 入门基础
2015/02/09 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Java分治归并排序算法实例详解
2017/12/12 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python计算信息熵实例
2020/06/18 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
年度考核自我鉴定
2013/11/09 职场文书
社团文化节邀请函
2014/01/10 职场文书
幼儿园家长评语
2014/02/10 职场文书
心理学专业求职信
2014/06/16 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS