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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Vue拖拽组件开发实例详解
May 11 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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
sae使用smarty模板的方法
2013/12/17 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Django 返回json数据的实现示例
2020/03/05 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
工程负责人任命书
2014/06/06 职场文书
生死抉择观后感
2015/06/09 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
python实现高效的遗传算法
2021/04/07 Python
python基础学习之递归函数知识总结
2021/05/26 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL