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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
vue使用Axios做ajax请求详解
2017/06/07 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python中类与对象之间的关系详解
2020/12/16 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
工厂会计员职责
2014/02/06 职场文书
大学生个人求职信例文
2014/07/07 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS