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 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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/02/08 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python模块之time模块(实例讲解)
2017/09/13 Python
Python的argparse库使用详解
2018/10/09 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python安装sklearn模块的方法详解
2020/11/28 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
个人自我剖析材料
2014/02/07 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
名人演讲稿范文
2014/09/16 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS