JS实现自定义状态栏动画文字效果示例


Posted in Javascript onOctober 12, 2017

本文实例讲述了JS实现自定义状态栏动画文字效果。分享给大家供大家参考,具体如下:

在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字。

<body onload="stack();">
  <script type="text/javascript">
    var statusText="自定义动画状态栏文字";
    var out="";
    var pause=100;
    var animateWidth=20;
    var position=animateWidth;
    var i=0;
    var stack=function(){
      if(statusText.charAt(i)!=" "){
        out="";
        for(var j=0;j<i;j++){
          out+=statusText.charAt(j);
        }
        for(j=i;j<position;j++){
          out+=" ";
        }
        out+=statusText.charAt(i);
        for(j=position;j<animateWidth;j++){
          out+=" ";
        }      
         window.status=out;
        if(position==i){
          animateWidth++;
          position=animateWidth;
          i++;
        }else{
          position--;
        }
      }else{
      }
      if(i<=statusText.length){
        setTimeout("stack()",pause);
      }
    }
  </script>
</body>

运行效果:

JS实现自定义状态栏动画文字效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
MVVM框架下实现分页功能示例
Jun 14 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
HTML的select控件美化
2017/03/27 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python中常见的异常总结
2018/02/20 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
房地产营销活动策划方案
2014/09/15 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
安全先进个人材料
2014/12/29 职场文书
黄山导游词
2015/01/31 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle