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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
OpenLayers3实现测量功能
Sep 25 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读取html并截取字符串的简单代码
2009/11/30 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python set集合使用方法解析
2019/11/05 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
大二自我鉴定
2014/01/31 职场文书
药品采购员岗位职责
2014/02/08 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
班级体育活动总结
2014/07/05 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
运动会加油稿20字
2014/11/15 职场文书
离职信范文
2015/06/23 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
Django框架中模型的用法
2022/06/10 Python