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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript模块详解
Dec 18 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 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 Document 代码注释规范
2009/04/13 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
vue组件实例解析
2017/01/10 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python字典key不能是可以是啥类型
2020/08/04 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
《花瓣飘香》教学反思
2014/04/15 职场文书
建筑工地质量标语
2014/06/12 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
初中成绩单评语
2014/12/29 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python