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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
asp 的 分词实现代码
2007/05/24 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python父目录、子目录的相互调用方法
2019/02/16 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
语文教学感言
2014/02/06 职场文书
公共场所标语
2014/06/30 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
护士岗位竞聘书
2015/09/15 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server