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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
ajax实现无刷新分页(php)
2010/07/18 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
php函数式编程简单示例
2019/08/08 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
js读取本地文件的实例
2017/12/22 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python中__call__用法实例
2014/08/29 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python中format()格式输出全解
2019/04/12 Python
python psutil监控进程实例
2019/12/17 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
学校办公室主任职责
2013/12/27 职场文书
单位介绍信范文
2014/01/18 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
介绍信范文
2015/01/31 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书