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 相关文章推荐
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 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动态创建Flash动画
2006/10/09 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
原生JS实现留言板
2020/03/26 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
玩转python爬虫之正则表达式
2016/02/17 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python如何重新加载模块
2020/07/29 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
学生个人自我鉴定
2014/03/26 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
住宅质量保证书
2014/04/29 职场文书
教师读书活动总结
2014/05/07 职场文书
开工典礼策划方案
2014/05/23 职场文书
维稳工作情况汇报
2014/10/27 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书