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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
详解JavaScript原型与原型链
Nov 16 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
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
JavaScript中的闭包
2016/02/24 Javascript
详解jQuery选择器
2016/12/21 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
loading动画特效小结
2017/01/22 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python实现排序算法解析
2018/09/08 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python可迭代对象操作示例
2019/05/07 Python
小学教师事迹材料
2014/01/13 职场文书
2014年工程师工作总结
2014/11/25 职场文书
慰问信格式
2015/02/14 职场文书
钱学森电影观后感
2015/06/04 职场文书
小平小道观后感
2015/06/09 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript