JavaScript实现网页头部进度条刷新


Posted in Javascript onApril 16, 2017

本文刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲染过程中来,所以只是一个表象,并不是说这个显示完了就浏览器也加载完了所以资源。

效果图:

JavaScript实现网页头部进度条刷新

先看下html:

就两个标签

<div id="barbg">
   <div id="bar">
   </div>
  </div>

CSS:

布局也很简单

<style>
   *{margin:0;padding:0;}
   #barbg{height:5px; background:rgb(149,143,143)}
   #barbg div{width:0; height:5px; position:relative; background:rgb(230,10,10);}
  </style>

JS

然后原生JS的话就是这样了

<script>
   document.onreadystatechange = function(){
    var bar = document.getElementById('bar');
    var barbg = bar.parentNode;
    var wd = document.body.scrollWidth || document.documentElement.scrollWidth;
    var t = 10;
    var d = 0;
    var i = 0;
    var timer = setInterval(goto,10);
    function goto(){
     d = d + t ;
     bar.style.width = d + 'px';
     if(d >= wd){
      clearInterval(timer);
      bar.style.background = 'rgba(230,10,10,0)';
      none();
     }
    }
    function none(){
     var a = 10 - i;
     i++;
     if(a != 0 && a != 10){a = a * 0.1}
     if(a === 10){a = 1}
     if(a === 0){a = 0}
     barbg.style.background = 'rgba(230,10,10,' + a + ')';
     if(a === 0){barbg.style.display = 'none'}
     if(a != 0){setTimeout(none,50);}
    }
   }
  </script>

以上所述是小编给大家介绍的JavaScript实现网页头部进度条刷新实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 #Javascript
微信小程序动态的加载数据实例代码
Apr 14 #Javascript
JAVA中截取字符串substring用法详解
Apr 14 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
建立动态的WML站点(二)
2006/10/09 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
YII实现分页的方法
2014/07/09 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
js 幻灯片的实现
2011/12/06 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
我的长生果教学反思
2014/04/28 职场文书
住房租房协议书
2014/08/20 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2014会计年终工作总结
2014/12/20 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
情感电台广播稿
2015/08/18 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python