js 原生组件

最新推荐文章于 2023-02-19 09:46:11 发布

银翼的魔术师s

最新推荐文章于 2023-02-19 09:46:11 发布

阅读量568

点赞数 1

分类专栏：前端

原文链接：https://www.cnblogs.com/s-b-b/p/5829283.html

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

左滑删除

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>左划出现删除按钮，右滑隐藏</title>
  <script type="text/javascript">

      function slide_delete_init() {

          // 获取所有行，对每一行设置监听
          var lines = document.querySelectorAll(".line-scroll-wrapper");
          //按钮宽度 -> 偏移量
          var len = lines.length;
          if (len ===0 ) return;
          var delete_btn_width = document.querySelector(".line-btn-delete").offsetWidth;
          var lastX, lastXForMobile;

          // 用于记录被按下的对象
          var pressedObj;  // 当前左滑的对象
          var lastLeftObj; // 上一个左滑的对象

          // 用于记录按下的点
          var start;

          // 网页在移动端运行时的监听
          for (var i = 0; i < len; ++i) {
              lines[i].addEventListener('touchstart', function(e){
                  lastXForMobile = e.changedTouches[0].pageX;
                  pressedObj = this; // 记录被按下的对象

                  // 记录开始按下时的点
                  var touches = event.touches[0];
                  start = {
                      x: touches.pageX, // 横坐标
                      y: touches.pageY  // 纵坐标
                  };
              });
              lines[i].addEventListener('touchmove',function(e){
                  // 计算划动过程中x和y的变化量
                  var touches = event.touches[0];
                  delta = {
                      x: touches.pageX - start.x,
                      y: touches.pageY - start.y
                  };
                  // 横向位移大于纵向位移，阻止纵向滚动
                  if (Math.abs(delta.x) > Math.abs(delta.y)) {
                      event.preventDefault();
                  }
              });

              lines[i].addEventListener('touchend', function(e){
                  if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                      lastLeftObj.style.transform = "translate(0,0)"; // 右滑
                      lastLeftObj = null; // 清空上一个左滑的对象
                  }
                  var diffX = e.changedTouches[0].pageX - lastXForMobile;
                  if (diffX < -150) {
                      pressedObj.style.transform = "translate(-"+delete_btn_width+"px,0)"; // 左滑
                      if (lastLeftObj && lastLeftObj != pressedObj)
                        lastLeftObj.style.transform = "translate(0,0)"; // 已经左滑状态的按钮右滑
                      lastLeftObj = pressedObj; // 记录上一个左滑的对象
                  } else if (diffX > 150) {
                      if (pressedObj == lastLeftObj) {
                          pressedObj.style.transform = "translate(0,0)"; // 右滑
                          lastLeftObj = null; // 清空上一个左滑的对象
                      }
                  }
              });
          }

          // 网页在PC浏览器中运行时的监听
          for (var i = 0; i < len; ++i) {
              lines[i].addEventListener('mousedown', function(e){
                  lastX = e.clientX;
                  pressedObj = this; // 记录被按下的对象
              });

              lines[i].addEventListener('mouseup', function(e){
                  if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                      $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
                      lastLeftObj = null; // 清空上一个左滑的对象
                  }
                  var diffX = e.clientX - lastX;
                  if (diffX < -150) {
                      pressedObj.style.transform = "translate(-"+delete_btn_width+"px,0)"; // 左滑
                      if (lastLeftObj && lastLeftObj != pressedObj)
                          lastLeftObj.style.transform = "translate(0,0)"; // 已经左滑状态的按钮右滑
                      lastLeftObj = pressedObj; // 记录上一个左滑的对象
                  } else if (diffX > 150) {
                      if (pressedObj == lastLeftObj) {
                          pressedObj.style.transform = "translate(0,0)"; // 右滑
                          lastLeftObj = null; // 清空上一个左滑的对象
                      }
                  }
              });
          }
          //点击其他部分则回退状态
          document.addEventListener('touchstart',function (e) {
              if (e.target != pressedObj && e.target != lastLeftObj){
                  pressedObj.style.transform = "translate(0,0)";
                  pressedObj.style.transform = "translate(0,0)";
              }
          });
          document.addEventListener('mousedown',function (e) {
              if (e.target != pressedObj && e.target != lastLeftObj){
                  pressedObj.style.transform = "translate(0,0)";
                  pressedObj.style.transform = "translate(0,0)";
              }
          });
      }


      window.onload = function () {
          slide_delete_init();
      }
  </script>
  <style type="text/css">
    * { margin: 0; padding: 0; }

    .line-wrapper {
      width: 100%;
      height: 144px;
      overflow: hidden;
      font-size: 28px;
      border-bottom: 1px solid #aaa;
    }
    .line-scroll-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      background: #b7eb8f;
      transform: translate(0,0);
      -moz-transition: transform 0.5s; /* Firefox 4 */
      -webkit-transition: transform 0.5s; /* Safari ºÍ Chrome */
      -o-transition: transform 0.5s; /* Opera */
    }
    .line-btn-delete {
      height: 100%;
      position: absolute;
      top: 0px;
      right: -132px;
      width: 132px;
      text-align: center;
      background: red;
      line-height: 144px;
      font-size: 24px;
      color: #fff;
    }

  </style>
</head>
<body>



<div class="line-wrapper">
  <div class="line-scroll-wrapper">
    <div>
      123456
    </div>
    <div class="line-btn-delete">删除</div>
  </div>
</div>


<div class="line-wrapper">
  <div class="line-scroll-wrapper">
    <div>
      123456
    </div>
    <div class="line-btn-delete">删除</div>
  </div>
</div>


</body>
</html>

转载：https://www.cnblogs.com/s-b-b/p/5829283.html

原版

环形进度条

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .square{
            margin: 20px auto;
            width: 200px;
            height: 200px;
            /*border: 1px solid #aaa;*/
            position: relative;
        }
        .half-square{
            width: 100px;
            height: 200px;
            position: absolute;
            overflow: hidden;
            top:0;
        }
        .half-square.left{
            left: 0;
            /*border: 1px solid rgb(3,205,203);*/
        }
        .half-square.right{
            right:0;
            /*border: 1px solid green;*/
        }
        .background{
            width:200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .circle{
            width: 160px;
            height: 160px;
            border: 20px solid transparent;
            border-radius: 50%; 
            position: absolute;
            top:0;
        }
        .circle.left{
            left: 0;
            border-left:20px solid rgb(3,205,203); 
            border-top: 20px solid rgb(3,205,203);
            transform: rotate(135deg);
        }
        .circle.right{
            right: 0;
            border-right:20px solid rgb(3,205,203); 
            border-top: 20px solid rgb(3,205,203);
            transform: rotate(-135deg);
        }
        .circle.inner{
            border:20px solid rgb(230,230,230); 
            display: table-cell;
            vertical-align: middle;
            position: relative;
        }
        .inner-content{
            margin: 0 auto;
            width: 50%;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        var percent = 0;
        var circleTimeId = null;
        function circlePercent(time){
            if(percent>100 || percent<0){
                return false;
            }
            if(percent > time ){
                clearInterval(circleTimeId); 
            }else{
                if(percent<=50){
                    per=percent*3.6-135;
                    document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
                }else{
                    per=(percent-50)*3.6+135;
                    document.getElementById("right-circle").style.transform = "rotate(45deg)";
                    document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
                }
                document.getElementById("percent-num").innerHTML= percent;
                percent = percent + 1;
            }
        }
        function time(time){
            circleTimeId = setInterval("circlePercent("+time+")",200);
        }
    </script>
</head>
<body onload="time(70)">
    <div class="square">
        <div class="background">
            <div class="circle inner">
                <div class="inner-content"><span id="percent-num">0</span>%</div>
                <div class="inner-content">进度</div>
            </div>
        </div>
        <div class="half-square left">
            <div class="circle left" id="left-circle">
            </div>
        </div>
        <div class="half-square right">
            <div class="circle right" id="right-circle">
            </div>
        </div>
    </div>

</body>
</html>

环形倒计时

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        

        /*环形进度条 优化*/
        .square{
            width: 50px;
            height: 50px;
            /*border: 1px solid #aaa;*/
            position: relative;
        }
        .circle{
            width: 50px;
            height: 50px;
            border: 5px solid transparent;
            border-radius: 50%;
            position: absolute;
            top:0;
        }
        .square div{
            box-sizing: border-box;
        }
        .half-square{
            width: 50%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top:0;
        }
        .half-square.left{
            left: 0;
            /*border: 1px solid rgb(3,205,203);*/
        }
        .half-square.right{
            right:0;
            /*border: 1px solid green;*/
        }
        .background{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .circle.left{
            left: 0;
            border-left:5px solid rgb(3,205,203);
            border-top: 5px solid rgb(3,205,203);
            transform: rotate(135deg);
        }
        .circle.right{
            right: 0;
            border-right:5px solid rgb(3,205,203);
            border-top: 5px solid rgb(3,205,203);
            transform: rotate(-135deg);
        }
        .circle.inner{
            border:5px solid rgb(230,230,230);
            display: table-cell;
            vertical-align: middle;
            position: relative;
        }
        .inner-content{
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }


    </style>
    <script type="text/javascript">
    	var t = 0;
        var circleTimeId = null;
        function circlePercent(time,size){
        	var percent = t/time *100
            if(percent>100){
                document.getElementById("percent-num").innerHTML= time;
                clearInterval(circleTimeId); 
            }else{
                if(percent<=50){
                    per=percent*3.6-135;
                    document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
                }else{
                    per=(percent-50)*3.6+135;
                    document.getElementById("right-circle").style.transform = "rotate(45deg)";
                    document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
                }
                document.getElementById("percent-num").innerHTML= parseInt(t);
                t = t + size;
            }
        }
        function time(time,size){
        	t = 0;
        	//每time秒刷新渲染
        	if (!size) { size = 0.1 }
            circleTimeId = setInterval(()=>{circlePercent(time,size)},size * 1000);
        }
    </script>
</head>
<body onload="time(10, 0.02)">
    <div class="square">
        <div class="background">
            <div class="circle inner">
                <div class="inner-content"><span id="percent-num">0</span></div>
                <div class="inner-content">秒</div>
            </div>
        </div>
        <div class="half-square left">
            <div class="circle left" id="left-circle">
            </div>
        </div>
        <div class="half-square right">
            <div class="circle right" id="right-circle">
            </div>
        </div>
    </div>

</body>
</html>

银翼的魔术师s

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 原生组件

转载：https://www.cnblogs.com/s-b-b/p/5829283.html<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> .square{ margin: 20px auto; ...
复制链接

扫一扫

专栏目录