原生HTML实现进度条动画效果 |
您所在的位置：网站首页 › 圆环的宽公式 › 原生HTML实现进度条动画效果 |
原生HTML实现进度条动画效果
|
效果展示（ gif 动图效果不是很好）
CSS的transition是一种过渡效果，在CSS中可以通过设置transition属性来实现，它可以使元素在某些样式变化时，平滑的过渡到另一个状态，比如从无颜色到有颜色，或者从没有背景图片到有背景图片，等等。 transition属性可以设置过渡的属性、持续时间、过渡方式、延迟时间等几个关键信息。 transition: width 0.2s; 进度条比例计算 通过获取进度条 dom元素的最大宽度及100%时的最大值来计算当前值所占宽的的比例（宽比）获取到宽比之后就可以计算当前值的宽度，动态调整进度条的宽度转换百分比（100 / 进度条 dom元素的最大宽度）* 当前值的宽度 /** * 百分比的转换可根据固定公式计算 * * 设 进度条的最高值（100%）为 X * 设 进度条 dom 为100%时的最大宽度为 Y * 则 进度条的值与宽的比例为 pro = X / Y * 则 pw（当前值的进度条宽度）= Z(当前值) / X * p（百分比）= (100 / Y) * pw 【100 / Y 为转换百分比的比例】 * 例： * */ 获取到对应的数值之后便可以通过js动态改变进度条的值html代码 50% 50% 50% 最大值 当前值 更改进度条JavaScript代码 // 计算百分比 function compute() { let X = document.getElementById('max').value let Y = document.getElementById('p1').offsetWidth let Z = document.getElementById('now').value let pro = X / Y let pw = Z / pro let p = Math.round((100 / Y) * pw) updateTip(p) updatePro(p) } // 更新 dom 显示的数值 function updateTip(p) { pt1.innerHTML = p + '%' pt2.innerHTML = p + '%' pt3.innerHTML = p + '%' } // 更新进度条进度 function updatePro(p) { pb1.style.width = p + '%' pb2.style.width = p + '%' pb3.style.width = p + '%' } |
【本文地址】
今日新闻 |
推荐新闻 |