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 相关文章推荐
解密效果
Jun 23 Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
详解webpack性能优化——DLL
Oct 20 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
js 自制滚动条的小例子
2013/03/16 Javascript
js Math 对象的方法
2013/09/01 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python获取list下标及其值的简单方法
2016/09/12 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python中的默认参数实例分析
2018/01/29 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
应聘教师自荐信
2013/10/12 职场文书
亲子读书活动方案
2014/02/22 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
中药学专业求职信
2014/05/31 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android