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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
javascript中的this作用域详解
Jul 15 Javascript
vue实现节点增删改功能
Sep 26 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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过滤危险html代码的函数
2008/07/22 PHP
PHP strtotime函数详解
2009/12/18 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python机器学习实现决策树
2019/11/11 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python打开文件的方式有哪些
2020/06/29 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Python创建自己的加密货币的示例
2021/03/01 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
在校生自我鉴定
2014/01/23 职场文书
辞职信怎么写
2015/02/27 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
社团招新宣传语
2015/07/13 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
Python实现byte转integer
2021/06/03 Python