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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python中条件判断语句的简单使用方法
2015/08/21 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python 中如何获取列表的索引
2019/07/02 Python
Django models filter筛选条件详解
2020/03/16 Python
python with语句的原理与用法详解
2020/03/30 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
法定代表人授权委托书
2014/04/04 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
农行心得体会
2014/09/02 职场文书
义诊活动通知
2015/04/24 职场文书
小学安全工作总结2015
2015/05/18 职场文书
php 原生分页
2021/04/01 PHP
Python办公自动化之Excel(中)
2021/05/24 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
Go语言编译原理之变量捕获
2022/08/05 Golang