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 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
vue实现分页组件
Jun 16 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
在react中使用vue的状态管理的方法示例
May 02 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php中异常处理方法小结
2015/01/09 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python之文件读取一行一行的方法
2018/07/12 Python
详解python编译器和解释器的区别
2019/06/24 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
pycharm实现猜数游戏
2020/12/07 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
软件工程专业推荐信
2013/10/28 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
婚庆司仪主持词
2014/03/15 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
市场营销专业求职信
2014/06/17 职场文书
上课说话检讨书500字
2014/11/01 职场文书
发票退票证明
2015/06/24 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android