进度条案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条demo</title><style>*{margin: 0;padding: 0;}.progressbar{height: 3px;width: 1%;position: fixed;top: 0;left: 0;background-color: skyblue;}</style>
</head>
<body>// 进度条<div class="progressbar"></div><div style="height: 500px;"></div>// 头部  当进度条走到一定距离时，头部就固定在浏览器顶部，不再移动<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 = () => {// 滚动距离let scrollTop = Math.floor(document.documentElement.scrollTop)// 最大滚动距离  整个页面的高度 - 屏幕高度let maxScrollTop = document.body.offsetHeight - window.innerHeight// 计算比例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>

js 进度条demo相关推荐

NProgress.js进度条
目录一.代码二.效果演示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
android ProgressBar 进度条demo
ProgressBar Demo 进度条没有什么好讲解的,就是几个方法,熟悉了就ok.直接上代码. activity_main.xml <?xml version="1.0" ...
GitHub上24.3kStar的js进度条插件，确定不关注一下？
在web应用开发中,有很多加载资源或者网络等待的场景需要在界面上做一个加载动画,让用户知道你这个应用程序正在运行而不是已经挂掉了. 应用场景如果你经常使用GitHub,那应该会注意到GitHub点击 ...
php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...
svg圆弧进度条demo
svg圆弧进度条,直接上代码: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
java导出excel带上进度条_导出数据至Excel前台js进度条不能隐藏
在导出数据至Excel时,有时数据会比较大,响应的时间会比较长,想做一个提示进度条,在点击导出数据按钮进,进度条显示出来,在数据导出完毕并成功弹出保存对话框时,进度条自动隐藏起来,但现在有个问题,点击 ...
Android 进度条Demo
在Android 应用开发中,ProgressBar (运行进度条)是较常用到得组件,Android 提供了两种样式来分别表示不同状态下显示得进度条,分别为:圆形进度条是条形进度条. 默认进度条是圆形 ...

js 进度条demo

进度条案例

js 进度条demo相关推荐

最新文章

热门文章