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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 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
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python内建模块struct实例详解
2018/02/02 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python解析xml简单示例
2019/06/21 Python
使用python实现飞机大战游戏
2020/03/23 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
详解Django中异步任务之django-celery
2020/11/05 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
2014年妇产科工作总结
2014/12/08 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
《秋思》教学反思
2016/02/23 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
python 学习GCN图卷积神经网络
2022/05/11 Python