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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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/12/13 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
如何清空python的变量
2020/07/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python用户自定义异常的实现
2020/12/25 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
物流管理专业求职信
2014/05/29 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
2016年情人节问候语
2015/11/11 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书