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标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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入门学习笔记之一
2010/10/12 PHP
php字符串操作常见问题小结
2016/10/11 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python TCP包注入方式
2020/05/05 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
语文教学感言
2014/02/06 职场文书
活动总结报告格式
2014/05/09 职场文书
应用外语系自荐信
2014/06/26 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Flask response响应的具体使用
2021/07/15 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
服务器nginx权限被拒绝解决案例
2022/09/23 Servers