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 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
Angular路由简单学习
2016/12/26 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
flask框架视图函数用法示例
2018/07/19 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python文件操作方法详解
2020/02/09 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
五好党支部事迹材料
2014/02/06 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python