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实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
js校验开始时间和结束时间
2020/05/26 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python实现用于测试网站访问速率的方法
2015/05/26 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
flask session组件的使用示例
2018/12/25 Python
Python内置加密模块用法解析
2019/11/25 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python range与enumerate函数区别解析
2020/02/28 Python
证券期货行业个人的自我评价
2013/12/26 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
校园绿化美化方案
2014/06/08 职场文书
车辆工程专业求职信
2014/06/14 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
经营场所使用证明
2015/06/19 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python