这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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 实现网页头部进度条刷新实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0629/334029.html