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(二) 事件机制(1)
Nov 25 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
js数组的基本使用总结
Jan 18 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
MYSQL环境变量设置方法
2007/01/15 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
vue按需加载实例详解
2019/09/06 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
实例讲解Python3中abs()函数
2019/02/19 Python
django框架auth模块用法实例详解
2019/12/10 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python如何快速生成时间戳
2020/07/21 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
微型企业创业投资计划书
2014/01/10 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
个人合作协议范本
2015/08/06 职场文书
2016年元旦寄语
2015/08/17 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python