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 实现页面加载进度条代码
New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JS 进度条效果实现代码整理
第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa
-
原生javascript模仿win8等待提示圆圈进度条
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数
-
js实现进度条的方法
本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f
-
javascript 进度条 实现代码
首先:建立两个类,一个是用来与资料进行连接(数据层),另一个是用来关联前一个类与页面的(逻辑层) 新建一个JScsrip.js 文件 代码如下: 复制代码 代码如下: function setPgb(pgbID, pgbValue,pvalues) { if ( pgbValue <= pvalues ) { if (lblObj = document.getElementById(pgbID+'_label')) { lblObj.innerHTML =Math.ceil((pgbValue/
-
JavaScript实现网页头部进度条刷新
本文刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲染过程中来,所以只是一个表象,并不是说这个显示完了就浏览器也加载完了所以资源. 效果图: 先看下html: 就两个标签 <div id="barbg"> <div id="bar"> </div> </div> CSS: 布局也很简单 <style> *{margin:0;padding:0;} #barbg{height:5px; bac
-
Android中WebView加载网页设置进度条
本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" a
-
javascript基于定时器实现进度条功能实例
本文实例讲述了javascript基于定时器实现进度条功能.分享给大家供大家参考,具体如下: Javascript 中的定时器 window度一线下面的方法 window.setInterval() 启动定时器 1.setInterval(function(函数),time(每隔多少时间执行一次函数,单位是毫秒)) 会重复执行某项操作 2.setTimeout 运用在延迟一段时间,再进行某项操作 setTimeout(function,time) ,setTimeout 不会重复! 停止定时器
-
javascript判断网页是关闭还是刷新
原理就是通过离开页面行为时间onunload触发时间去检测此时的浏览器的窗口大小,根据大小由此判断用户是刷新,跳转或是关闭行为程序 代码如下 window.onunload = function(){ var a_n = window.event.screenX - window.screenLeft; var a_b = a_n > document.documentElement.scrollWidth-20; if(a_b && window.event.clientY<
-
Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一滑而过,而是用户体验很好,有个速度的变化,由慢到快的效果,语言难于描述,相信各位都有下载微信,可以随便打开个公众号的文章看看效果. 好了,上面说到,之前网上的方法都是都忽略了微信加载网页时,进度条的缓慢动画效果,实现代码也是
-
详解JavaScript+Canvas绘制环形进度条
目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1
-
JavaScript实现简单动态进度条效果
本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> <script type="text/javascript"> window.onload = function () { var myProgress = document.getElementById("myProgress"); var mySpan = document.getElementByI
-
javascript实现简单的进度条
示例一: <!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn
-
Javascript 写的简单进度条控件
很多的时候用户需要等待你"臃肿"的 Javascript 代码处理完成(Web 2.0 的特色).期间或许加入一个类似于进度条的东西让用户有点"安慰".这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出. 通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是
-
Android自定义带进度条WebView仿微信加载过程
在正常开发中,我们客户端需要用webView加载网页,再遇到网络慢或者访问的服务器响应时,页面是空白的,所以为了用户更好的体验,我们可以提供一个正在加载的进度条,提示用户正在加载. 本文结构: 1.自定义webView 2.在应用中的使用 3.效果展示 一.自定义webView 1.首先定义一个类,继承webView,并首先构造方法 public class ProgressBarWebView extends WebView{} 自定义控件,先实现构造方法, 第一中是程序内部实例化采用,传入c
随机推荐
- JavaScript控制Session操作方法
- lua日志文件处理代码
- 探究Javascript模板引擎mustache.js使用方法
- AngularJS执行流程详解
- H5移动端图片压缩上传开发流程
- 有星外虚拟主机管理系统下MSSQL2005服务器因重装改名后出错的解决办法
- JS+CSS3制作炫酷的弹窗效果
- 微信小程序 Image组件实例详解
- php堆排序实现原理与应用方法
- C++实现的链表类实例
- Android仿微信朋友圈点击加号添加图片功能
- MySQL数据库21条最佳性能优化经验
- jQuery 遍历函数详解
- Python实现把utf-8格式的文件转换成gbk格式的文件
- Jquery 分页插件之Jquery Pagination
- jQuery技巧大放送 学习jquery的朋友可以看下
- JS插件overlib用法实例详解
- 详解Spring配置事务的五种方式
- 表单验证的完整应用案例探讨
- C# 通过 inline-asm 解决嵌入x86汇编