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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python+requests接口自动化框架的实现
2020/08/31 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
会计专业自荐信范文
2013/12/02 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
稽核岗位职责
2015/02/10 职场文书
投标售后服务承诺书
2015/04/29 职场文书
贷款工资证明范本
2015/06/12 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis