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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 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 函数执行效率的小比较
2010/10/17 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python selenium如何设置等待时间
2016/09/15 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python多进程原理与用法分析
2018/08/21 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
keras:model.compile损失函数的用法
2020/07/01 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
关于赌博的检讨书
2014/01/08 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
导游欢送词
2015/01/31 职场文书
公司员工手册范本
2015/05/14 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL