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 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js精度溢出解决方案
Dec 02 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
详解js静态资源文件请求的处理
2017/08/01 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python实现屏幕截图的两种方式
2018/02/05 Python
Python实现的堆排序算法示例
2018/04/29 Python
Django密码系统实现过程详解
2019/07/19 Python
Python 硬币兑换问题
2019/07/29 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
结婚典礼证婚词
2014/01/11 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
感谢信怎么写
2015/01/21 职场文书
无工作证明怎么写
2015/06/15 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Python中的socket网络模块介绍
2022/07/23 Python