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创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
在小程序中使用canvas的方法示例
Sep 17 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 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
咖啡语言
2021/03/03 咖啡文化
php addslashes 函数详细分析说明
2009/06/23 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
express express-session的使用小结
2018/12/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
C语言编程练习
2012/04/02 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
企业计划生育责任书
2015/05/09 职场文书
观看建国大业观后感
2015/06/01 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python