JS实现来回出现文字的状态栏特效代码
更新时间：2015年10月31日 10:54:09 作者：企鹅
这篇文章主要介绍了JS实现来回出现文字的状态栏特效代码,针对文字的定义及状态栏的定时显示等实现方法备有详细的文字说明,需要的朋友可以参考下
本文实例讲述了JS实现来回出现文字的状态栏特效代码。分享给大家供大家参考，具体如下：
运行这款来回出现文字的状态栏特效时，请注意页面左下角的状态栏。貌似IE8以上版本看不到效果唉。那么究竟是如何实现的呢？主要是用函数来显示消息，根据place的值取当前需显示的字符串，准备在300毫秒后收起显示，将需取的字符串长度计数器加一准备下一次显示；同时使用函数隐藏消息，取Message右边的一定长度的字符串，设定消隐下一个字符的延时。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/
具体代码如下：
<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程序设计有所帮助。
相关文章
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。2011-03-03
本文主要介绍了js多维数组降维的5种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了JavaScript中发布/订阅模式的简单实例,本文给出了一个简单易懂的实现代码,比较容易理解,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了javascript函数特点,实例分析了javascript函数传递参数及调用方法,需要的朋友可以参考下2015-05-05
如何获取select下拉框的值(option没有及有value属性)
获取select下拉框的值分为option没有value属性及有value属性时的两种情况，下面分别给出具体的实现代码，需要的朋友可以参考下2013-11-11
这篇文章主要介绍了Js之如何移除Array/数组中指定元素问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在写项目时,难免遇到需要上传表单,图片等文件,且表单内容需进行验证及必填项提示,图片需要和信息一起传递且图片载入后需可预览,这篇文章给大家介绍el-form实现表单和图片手动上传和校验功能,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要为大家详细介绍了swiper自定义分页器的样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
在js中使用"with"语句中跨frame的变量引用问题...2007-03-03
本文总结了普通文件上传和分片上传的方法,普通上传通过FormData和axios实现文件发送,而分片上传则将大文件切割并并行或串行上传,最后合并分片,提高上传效率和稳定性,还介绍了断点续传和处理上传过程中的异常情况,需要的朋友可以参考下2024-09-09
最新评论