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 相关文章推荐
JavaScript中this的使用详解
Nov 08 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
js实现星星海特效的示例
Sep 28 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二维数组去重实例分析
2016/11/18 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python Socket使用实例
2017/12/18 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python如何重新加载模块
2020/07/29 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
交通安全教育制度
2014/02/02 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python