JavaScript實現(xiàn)網(wǎng)頁頭部進度條刷新
更新時間：2017年04月16日 08:57:55 投稿：mrr
這篇文章主要介紹了JavaScript實現(xiàn)網(wǎng)頁頭部進度條刷新實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
本文刷新會頭部會出現(xiàn)，因為并沒有真正的參與到瀏覽器加載是否完整這個渲染過程中來，所以只是一個表象，并不是說這個顯示完了就瀏覽器也加載完了所以資源。
效果圖：
先看下html:
就兩個標(biāo)簽
<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實現(xiàn)網(wǎng)頁頭部進度條刷新實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了JS仿JQuery選擇器功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了詳解Js中的模塊化是如何實現(xiàn)的，詳細的介紹了模塊化的運行，具有一定的參考價值，有興趣的可以了解下2017-10-10
這篇文章主要介紹了JavaScript插件化開發(fā)教程第四篇,需要的朋友可以參考下2015-01-01
AJAX的應(yīng)用較少了頁面的刷新次數(shù)，但是也可能會使瀏覽器的前進、后退、刷新等功能受到影響。2011-02-02
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)簡單五子棋游戲，文中示例代碼注釋的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
當(dāng)代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的一個作用域鏈,作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域鏈底層原理的相關(guān)資料,需要的朋友可以參考下2021-11-11
很多朋友都在使用iframe中遇到過不能自動隨頁面伸縮，特別是動態(tài)讀取頁面的時候，會出現(xiàn)滾動條，影響美觀，今天研究一下了，發(fā)現(xiàn)了一個簡單解決的辦法，可以在IE，F(xiàn)IREFOX，OPERA下使用2006-08-08
這篇文章主要為大家介紹了客戶端JavaScript的線程池設(shè)計，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
javascript實現(xiàn)圖片左右滾動效果【可自動滾動，有左右按鈕】
這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應(yīng)的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
這篇文章介紹了js中substring和substr的用法，有需要的朋友可以參考一下2013-08-08