移动web02-CSDN博客

本文链接：https://blog.csdn.net/lhusailiu/article/details/74612922

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
  <div></div>
  <script>
      var dv=document.querySelector("div")
      var startX,startY,moveX,moveY,translateX,translateY;
      document.addEventListener("touchstart",function (e) { //当手指碰到屏幕时候触发
        startX= e.targetTouches[0].clientX  //获取的是视口到触摸目标的x的距离
          startY=e.targetTouches[0].clientY  //获取的是视口到触摸目标的Y的距离
      });
      document.addEventListener("touchmove",function (e) {   //touchmove  当手指在屏幕滑动时候连续触摸
           moveX= e.targetTouches[0].clientX
           moveY= e.targetTouches[0].clientY
          translateX=moveX-startX
          translateY=moveY-startX
          console.log(translateX+":"+translateY);
          document.style.transform="translate("+translateX+"px,"+translateY+"px)"


      });
      document.addEventListener("touchend",function (e) {//触摸结束

      })
      document.addEventListener("webkitTranslateEnd",function () {   //可以监听当前元素过渡执行效果完成之后触事件发

      });
  </script>
</body>
</html>

总结：e.targetTouches 获取的是目标元素的所有的当前触摸

touchstart：当手指触碰到屏幕的时候触发

绑定事件的方法：dom.addEventListener("touchstart", function(e){});

事件返回的e对象包含那些移动端特有的属性：

targetTouches目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchmove：当手指在屏幕上滑动时连续触发

绑定事件的方法：dom.addEventListener("touchmove", function(e){});
事件返回的e对象包含那些移动端特有的属性：

originalEvent 是jquery封装的事件。

targetTouches目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

在滑动的时候不断给图片盒子做定位，来达到滑动的效果

定位的位置，当前的图片的定位加上移动的距离

在开始滑动的时候就要清楚定时器，move的时候清除过渡，-index*width + distanceX

touchend：当手指在屏幕上结束滑动时触发

绑定事件的方法：dom.addEventListener("touchend", function(e){});

事件返回的e对象包含那些移动端特有的属性：

changedTouches 页面上最新更改的所有触摸

touchcancel：系统停止跟踪触摸时候会触发，系统被动终止，例如alert。

注意：在touchend事件的时候event只会记录changedtouches

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

倒计时

function setTimer () {
    var toaltime=3700;
  var timerIdd= setInterval(function () {
    toaltime--
    if(toaltime<0) {
        clearInterval(timerIdd)
        return
    }
    var hour=Math.floor(toaltime/3600)
    var mintues=Math.floor((toaltime%3600)/60);
    var second=Math.floor(toaltime/60)
      
    spans[0].innerHTML=Math.floor(hour/10)
    spans[1].innerHTML= Math.floor(hour%10)
    spans[2].innerHTML= Math.floor(mintues/10)
    spans[3].innerHTML= Math.floor(mintues%10)
    spans[4].innerHTML=Math.floor (second/10)
    spans[5].innerHTML= Math.floor(second%10)
    },1000);