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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 有用的脚本函数
May 07 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
详解Node.JS模块 process
Aug 31 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购物网站支付paypal使用方法
2010/11/28 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python中dict()的高级用法实现
2019/11/13 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
大学新闻系求职信
2014/06/03 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
内勤岗位职责
2015/02/10 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript