编程 Javascript

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程序设计有所帮助。

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

- Author -

第十七签

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery在IE7下无法使用 $.ajax解决方法

Nov 11 Javascript

高效的表格行背景隔行变色及选定高亮的JS代码

Dec 04 Javascript

node.js中使用node-schedule实现定时任务实例

Jun 03 Javascript

优化Node.js Web应用运行速度的10个技巧

Sep 03 Javascript

JQUERY表单暂存功能插件分享

Feb 23 Javascript

Javascript的无new构建实例详解

May 15 Javascript

Java Spring 事务回滚详解

Oct 17 Javascript

vue.js语法及常用指令

Oct 29 Javascript

Vue.directive 自定义指令的问题小结

Mar 04 Javascript

jQuery+PHP实现上传裁剪图片

Jun 29 jQuery

JS使用Dijkstra算法求解最短路径

Jan 17 Javascript

html实现随机点名器的示例代码

Apr 02 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