Javascript移动端

#移动端的事件

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div></div>
    <script>
        var div = document.querySelector("div")
        // 移动端事件 -- touch事件
        // 在移动端没有鼠标点击事件！！！
        div.addEventListener("touchstart", function(e) {
            console.log(e.targetTouches[0].pageX)
            console.log(e.targetTouches[0].pageY)
            console.log("开始触摸屏幕！！！")
        })

        div.addEventListener("touchmove", function() {
            console.log("在触摸屏上进行移动！！！，这是一个连续触发事件！！！")
        })

        div.addEventListener("touchend", function() {
            console.log("手指从触摸屏上离开了")
        })
    </script>

#移动端元素拖拽

    <style>
        .box {
            position: relative;
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
    <div class="box"></div>
    <script>
        var div = document.querySelector(".box")
        var startX = 0
        var startY = 0
        var offsetX = 0;
        var offsetY = 0;
        div.addEventListener("touchstart", function(e) {
            console.log("div")
            startX = e.targetTouches[0].pageX
            startY = e.targetTouches[0].pageY

            // 求到手指在盒子里面的距离
            offsetX = startX - div.offsetLeft
            offsetY = startY - div.offsetTop
        })

        div.addEventListener("touchmove", function(e) {
            console.log("chufa")
            // 求出手指新的坐标值
            var newX = e.targetTouches[0].pageX
            var newY = e.targetTouches[0].pageY
            var leftX = newX - offsetX
            var leftY = newY - offsetY

            console.log(leftX)
            console.log(leftY)

            this.style.left = leftX + "px"
            this.style.top = leftY + "px"

            e.preventDefault()
        })
    </script>

#轮播图

    <style>
        * {
            margin: 0;
            padding: 0
        }
        .box {
            width: 100%;
            overflow: hidden;
        }
        ul {
            position: relative;
            width: 300%;
            font-size: 0;
            list-style: none;
        }
        ul>li {
            width: calc(100% / 3);
            display: inline-block;
        }
        ul>li>img {
            width: 100%;
        }
    </style>
    <div class="box">
        <ul>
            <li>
                <img src="./images/1.dpg" alt="">
            </li>
            <li>
                <img src="./images/2.dpg" alt="">
            </li>
            <li>
                <img src="./images/3.dpg" alt="">
            </li>
        </ul>
    </div>
    <script>
        function animate(obj, target, callback) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0?Math.ceil(step) : Math.floor(step)
                if(target == obj.offsetLeft) {
                    clearInterval(obj.timer)
                    callback && callback()
                }
                obj.style.left = obj.offsetLeft + step + "px"
            }, 30)
        }

        var ul = document.querySelector("ul")
        var li = document.querySelector("li")
        var startx = 0;
        var starty = 0;
        var endx = 0;
        var endy = 0;
        var currentIndex = 0;
        // 1.获取初始点击的位置
        ul.addEventListener("touchstart", function(e) {
            // console.log(e.targetTouches[0].pageX)
            // console.log(e.targetTouches[0].pageY)
            startx = e.targetTouches[0].pageX
            starty = e.targetTouches[0].pageY
        })
        // 2.获取移动到最后的位置
        ul.addEventListener("touchmove", function(e) {
            // 这个函数是连续触发
            // endx 和 endy得到的就是最后一个值！！！
            endx = e.targetTouches[0].pageX
            endy = e.targetTouches[0].pageY
        })

        // 手指松开了，需要做处理了
        ul.addEventListener("touchend", function() {
            // 首先判断是左移还是右移
            // 向左滑动是负值！！！
            var offsetX = endx - startx;
            if(offsetX < -50) {
                // 判断是左滑
                currentIndex++;
                if(currentIndex>=3) {
                    currentIndex = 2;
                    alert("已经是最后一张图片了！！！")
                    return;
                }
                var juli = -currentIndex * li.offsetWidth
                // ul.style.left = juli + "px"
                animate(ul, juli)

            }else if(offsetX > 50) {
                // 判断就是右滑
                currentIndex--;
                if(currentIndex<0) {
                    currentIndex = 0
                    alert("前面没有图片了")
                    return;
                }
                var juli = -currentIndex * li.offsetWidth
                // ul.style.left = juli + "px"
                animate(ul, juli)
            }
        })
    </script>

#classList

    <style>
        body,html {
            background: #000;
        }
        .red {
            background: red;
        }
    </style>
    <button id="btn">变颜色</button>
    <script>
        // var box = document.querySelector(".box")
        // console.log(box.className) // 字符串
        // console.log(box.classList) // 数组
        // box.classList.add("one")
        // box.classList.remove("one")
        //  toggle切换，如果有这个class则删除，如果没有这个class，则添加
        // box.classList.toggle("none")
        btn.onclick = function() {
            document.documentElement.classList.toggle("red")
            document.body.classList.toggle("red")
        }
    </script>