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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
手写实现JS中的new
Nov 07 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
2006/12/23 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python端口扫描系统实现方法
2014/11/19 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Django多数据库的实现过程详解
2019/08/01 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
银行职业规划书范文
2013/12/28 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
2014年三万活动总结
2014/04/26 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年社区工作总结
2014/11/18 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
JavaScript控制台的更多功能
2021/04/28 Javascript