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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 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/05/31 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
CentOS安装php v8js教程
2015/02/26 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
微信支付扫码支付php版
2016/07/22 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
jQuery实现三级联动效果
2017/03/02 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python 格式化输出百分号的方法
2019/01/20 Python
python多线程分块读取文件
2019/08/29 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
幼儿园八一建军节活动方案
2014/08/27 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
财务工作个人总结
2015/02/27 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Redis三种集群模式详解
2021/10/05 Redis
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers