js implements sliding progress bar-JS Tutorial-php.cn

js implements sliding progress bar

coldplay.xixi

Release： 2020-08-21 17:33:28

forward

2852 people have browsed it

js implements sliding progress bar

[Related learning recommendations: javascript video tutorial]

The example of this article shares with you the specific code for realizing the sliding progress bar effect in js. For your reference, the specific content is as follows

Progress bar:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js滑动进度条效果</title>
 <style>
  *{margin:0;padding:0;user-select:none;}
  .progress-bar{position:relative;height:10px;width:400px;margin:200px auto;background:#ebeef5;border-radius:10px;}
  .progress-bar .pro-bar{position:absolute;left:0;height:10px;width:10px;background:#409eff;}
  .progress-bar .min-num{position:absolute;left:-20px;top:-5px;}
  .progress-bar .max-num{position:absolute;right:-40px;top:-5px;}
  .progress-bar .block {position:absolute;height:30px;width:10px;background:#ccc;top:-10px;border-radius:10px;}
  .progress-bar .block p{position:absolute;display:none;left:-20px;top:-45px;width:50px;height:30px;text-align:center;line-height:30px;background:#ccc;border-radius:20px;}
  .progress-bar .block:hover p{display:block;font-size:10%;color:#fff;background:#409eff;}
 </style>
</head>
<body>
 <p class="progress-bar">
 <span class="min-num">0</span>
 <span class="max-num">100</span>
 <p class="pro-bar"></p>
 <p class="block">
  <p>0</p>
 </p>
 </p>
</body>
<script>
 (function(){
 let moveBlock = document.querySelector(&#39;.block&#39;);
 let proBar = document.querySelector(&#39;.pro-bar&#39;);
 let flag = false;
 let startX = null;
 let moveMax = (400 - 10); // 背景条宽度减去滑块的宽度
 moveBlock.onmousedown = function(e){
  startX = e.pageX;
  moveBlock.style.left ? moveBlock.style.left : moveBlock.style.left = &#39;0px&#39;;
  let startLeft = parseInt(moveBlock.style.left);
  document.onmousemove = function(e){
  let moveX = (e.pageX - startX) > 0 ? true : false;
  let moveSection = startLeft + (e.pageX - startX);
  // 限定移动范围
  if (moveSection >= 0 && moveSection <= moveMax) {
   let percent = ((startLeft + (e.pageX - startX)) / moveMax).toFixed(4) * 100;
   percent.toString().length > 5 ? percent = percent.toString().subStr(0, 5) : percent = percent.toString();
   moveBlock.style.left = startLeft + (e.pageX - startX) + &#39;px&#39;;
   proBar.style.width = moveBlock.style.left;
   moveBlock.querySelector(&#39;p&#39;).innerText = percent + &#39;%&#39;;
  }
  };
 };
 // 鼠标松开移除事件
 moveBlock.onmouseup = function(){
  document.onmousemove = null;
 };
 })();
</script>
</html>

Copy after login

Recommended related pictures and texts: js tutorial (pictures and texts )

The above is the detailed content of js implements sliding progress bar. For more information, please follow other related articles on the PHP Chinese website!