JavaScript實(shí)現(xiàn)網(wǎng)頁頭部進(jìn)度條刷新
本文刷新會頭部會出現(xiàn),因?yà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實(shí)現(xiàn)網(wǎng)頁頭部進(jìn)度條刷新實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的,在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
解決layui批量傳值到后臺操作時出現(xiàn)傳值為空的問題
今天小編就為大家分享一篇解決layui批量傳值到后臺操作時出現(xiàn)傳值為空的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js與jquery實(shí)時監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實(shí)時監(jiān)聽輸入框值的oninput與onpropertychange方法,實(shí)例分析了oninput與onpropertychange實(shí)現(xiàn)下拉框里自動匹配關(guān)鍵字實(shí)時監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02低門檻開發(fā)iOS、Android、小程序應(yīng)用的前端框架詳解
結(jié)合AVM官網(wǎng)的介紹和我自己的一些實(shí)踐經(jīng)驗(yàn),我總結(jié)了一系列AVM的特性,我想這些內(nèi)容足以讓你主動去學(xué)習(xí)AVM框架了2021-10-10js中offset,client , scroll 三大元素知識點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于js 元素offset,client , scroll 三大系列總結(jié),有需要的朋友們可以學(xué)習(xí)下。2019-09-09