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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
js document.write()使用介绍
Feb 21 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 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读取数据库信息的几种方法
2008/05/24 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python计算时间差的方法
2015/05/20 Python
详解Swift中属性的声明与作用
2016/06/30 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python 遍历pd.Series的index和value
2019/11/26 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
小学生秋游活动方案
2014/02/23 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
《菜园里》教学反思
2014/04/17 职场文书
实习单位鉴定评语
2014/04/26 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
城市创卫标语
2014/06/17 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年信访工作总结
2014/11/17 职场文书
干部考察材料范文
2014/12/24 职场文书
初二学生评语大全
2014/12/26 职场文书
团代会开幕词
2015/01/28 职场文书
重阳节慰问信
2015/02/15 职场文书
最感人的道歉情书
2015/05/12 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS