js 进度条demo
生活随笔
收集整理的這篇文章主要介紹了
js 进度条demo
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
進(jìn)度條案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>進(jìn)度條demo</title><style>*{margin: 0;padding: 0;}.progressbar{height: 3px;width: 1%;position: fixed;top: 0;left: 0;background-color: skyblue;}</style> </head> <body>// 進(jìn)度條<div class="progressbar"></div><div style="height: 500px;"></div>// 頭部 當(dāng)進(jìn)度條走到一定距離時(shí)，頭部就固定在瀏覽器頂部，不再移動(dòng)<div class = 'demo' style="height: 100px;background-color: #000;top: 0;width: 100%;"></div><div style='height:2000px;'></div><script>let mydiv = document.querySelector('.demo')let mytop = mydiv.offsetTopwindow.onscroll = () => {// 滾動(dòng)距離let scrollTop = Math.floor(document.documentElement.scrollTop)// 最大滾動(dòng)距離 整個(gè)頁(yè)面的高度 - 屏幕高度let maxScrollTop = document.body.offsetHeight - window.innerHeight// 計(jì)算比例let percent = (scrollTop / maxScrollTop) * 100 + '%'document.querySelector('.progressbar').style.width = percentif(scrollTop > mytop){mydiv.style.position = 'fixed'}else{mydiv.style.position = 'static'}}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的js 进度条demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java发送hotmail邮件_如何使用
- 下一篇： ACCP.软件工程师.5.0.教学PPT