JS实现来回出现文字的状态栏特效代码


Posted in Javascript onOctober 31, 2015

本文实例讲述了JS实现来回出现文字的状态栏特效代码。分享给大家供大家参考,具体如下:

运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏。貌似IE8以上版本看不到效果唉。那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示;同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时。

运行效果截图如下:

JS实现来回出现文字的状态栏特效代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 欢迎光临三水点靠木,请多多提出你的建议!!! "; //这里可自定义显示内容
var place=1;
function scrollIn() { //这个函数用来显示消息
window.status=Message.substring(0, place); //根据place的值取当前需显示的字符串
if (place >= Message.length) { //如果全部信息已经显示完毕
place=1; //则将place重置
window.setTimeout("scrollOut()",300); //准备在300毫秒后收起显示
} else { //否则(信息还没有显示完)
place++; //将需取的字符串长度计数器加一
window.setTimeout("scrollIn()",50); //准备下一次显示
  } 
}
function scrollOut() { //这个函数用来消隐消息
window.status=Message.substring(place, Message.length); //取Message右边的一定长度的字符串
if (place >= Message.length) { //如果已经无字符可取(信息已经完全消隐)
place=1; //则初始化place
window.setTimeout("scrollIn()", 100); //设定下一次操作是显示信息
} else { //否则(信息还没有消隐完毕)
place++; //计数器加一
window.setTimeout("scrollOut()", 50); //设定消隐下一个字符的延时
  }
}
// End -->
</SCRIPT>
<title>来回出现文字的状态栏特效</title>
</head>
<body onLoad="scrollIn()">
<b>请注意页面左下角的状态栏</b>
</body>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
基于复选框demo(分享)
Sep 27 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 #Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 #Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 #Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
利用python求积分的实例
2019/07/03 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
工作目标责任书
2014/07/23 职场文书
个人贷款收入证明
2014/10/26 职场文书
税务会计岗位职责
2015/04/02 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP
聊聊redis-dump工具安装问题
2022/01/18 Redis
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
python 学习GCN图卷积神经网络
2022/05/11 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL