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 相关文章推荐
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
js利用拖放实现添加删除
Aug 27 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
PHP设计模式之装饰者模式
2012/02/29 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP学习笔记之session
2018/05/06 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
JS实现横向跑马灯效果代码
2020/04/20 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
对python调用RPC接口的实例详解
2019/01/03 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
考试不及格的检讨书
2014/01/22 职场文书
2014国培学习感言
2014/03/05 职场文书
介绍信怎么写
2015/01/30 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
nginx+lua单机上万并发的实现
2021/05/31 Servers
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Golang 对es的操作实例
2022/04/20 Golang
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android