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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
layui文件上传实现代码
May 20 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
js中的闭包实例展示
Nov 01 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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中全局变量global的使用演示代码
2011/05/18 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue监听input标签的value值方法
2018/08/27 Javascript
详解vue v-model
2020/08/31 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python3实现转换Image图片格式
2018/06/21 Python
wxPython实现画图板
2020/08/27 Python
python数据化运营的重要意义
2019/11/25 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python模块内置属性概念及实例
2021/02/18 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
新婚姻法离婚协议书范文
2014/11/30 职场文书
实习计划书范文
2015/01/16 职场文书
创建文明城市倡议书
2015/04/28 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python