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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
利用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 无法载入mysql扩展
2010/03/12 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
python入门基础之用户输入与模块初认识
2016/11/14 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Django 外键的使用方法详解
2019/07/19 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python多线程同步之文件读写控制
2021/02/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
经典公益广告词
2014/03/13 职场文书
英文自荐信常用句子
2014/03/26 职场文书
安全生产责任书范本
2014/04/15 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
招标授权委托书样本
2014/09/23 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
销售人才自我评价范文
2014/09/27 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
领导班子整改方案
2014/10/25 职场文书