first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0619/封装.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+<script>
+        var orderData = [
+        {
+            name: '路易斯女装旗舰店',
+            shopList: [{
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '1'
+                    }
+                }
+
+            ],
+            remark: '12333',
+            postage: '0',
+            amount: '1000.00'
+        },
+        {
+            name: '路易斯女装旗舰店',
+            shopList: [{
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '1'
+                    }
+                },
+                {
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '2'
+                    }
+                }
+
+            ],
+            remark: '12333',
+            postage: '0',
+            amount: '1000.00'
+        },
+        {
+            name: '路易斯女装旗舰店',
+            shopList: [{
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '1'
+                    }
+                },
+                {
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '2'
+                    }
+                },
+                {
+                    img: '../img/22/产品图.png',
+                    info: {
+                        shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
+                        color: '黑白',
+                        size: 'L',
+                        price: '160.00',
+                        number: '2'
+                    }
+                }
+
+            ],
+            remark: '',
+            postage: '0',
+            amount: '1000.00'
+        }
+    ]
+    var box = $('#goodsBox')
+    function createData() {
+        orderData.forEach((v, i) => {
+            inner(v,box)
+        })
+    }
+
+    function inner(v,dom){
+        dom .innerHTML += `
+                <li class="goods">
+                    <div class="goods_title">
+                        <img class="l" src="../img/22/矢量智能对象.png" alt="">
+                        <span>${v.name}</span>
+                        <img class="r" src="../img/22/-e-右.png" alt="">
+                    </div>
+                    <ul>
+                        ${ 
+                            v.shopList.map(key => { return `
+                                <li class="information">
+                                    <img src="${ key.img }" alt="">
+                                    <div class="des">
+                                        <p>${key.info.shopName}</p>
+                                        <div class="up">
+                                            <span>颜色：${key.info.color}</span>
+                                            <span>尺码：${key.info.size}</span>
+                                        </div>
+                                        <div class="down">
+                                            <div class="number">
+                                                ￥<span class="one">${key.info.price.split('.')[0]}</span>
+                                                <span class="two">.${key.info.price.split('.')[1]}</span>
+                                            </div>
+                                            <div class="amount">X${key.info.number}</div>
+                                        </div>
+                                    </div>
+                                </li>
+                                ` })
+                         }
+                    </ul>
+                    <div class="remarkes">
+                        <p class="three">订单备注</p>
+                        <p class="four">${ v.remark ? v.remark : '有什么想对商家留言的可以在这里说' }</p>
+                    </div>
+                    <div class="cost">
+                        <div class="cost_up">
+                            <p>优惠抵用</p>
+                            <span>-￥5</span>
+                        </div>
+                        <div class="cost_down">
+                            <p>快递费用</p>
+                            <span>${v.postage>0?v.postage:'免费包邮'}</span>
+                        </div>
+                    </div>
+                    <div class="money">
+                        <p>商品金额</p>
+                        <span>￥${v.amount}</span>
+                    </div>
+                </li>
+            `
+    }
+    window.onload = createData
+
+</script>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0619/案例九.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+        }
+
+        .main {}
+
+        .main ul {
+            overflow: hidden;
+        }
+
+        .main ul li {
+            display: flex;
+            height: 45px;
+            align-items: center;
+            position: relative;
+            padding: 0 15px;
+            border-bottom: 1px solid #f4f0f0;
+            transition-duration: 0.3s;
+        }
+
+        .main .item {
+            width: 100%;
+        }
+
+        .main .action {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            position: absolute;
+            right: -180px;
+        }
+
+        .main .action .item {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 14px;
+            color: #fff;
+        }
+
+        .action .top {
+            background: #c8c7cd;
+        }
+
+        .action .read {
+            background: #ff9c00;
+        }
+
+        .action .delete {
+            background: #ff3a31;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <ul>
+            <li>
+                <div class="item">新闻1</div>
+                <div class="action">
+                    <div class="item top">置顶</div>
+                    <div class="item read">未读</div>
+                    <div class="item delete">删除</div>
+                </div>
+            </li>
+            <li>
+                <div class="item">新闻2</div>
+                <div class="action">
+                    <div class="item top">置顶</div>
+                    <div class="item read">未读</div>
+                    <div class="item delete">删除</div>
+                </div>
+            </li>
+            <li>
+                <div class="item">新闻3</div>
+                <div class="action">
+                    <div class="item top">置顶</div>
+                    <div class="item read">未读</div>
+                    <div class="item delete">删除</div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</body>
+<!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+    思路：侧滑按钮，默认固定在屏幕右侧固定-180px，首先，要监听屏幕，获取x值，通过手指触摸屏幕的滑动距离来判断左滑、右滑，
+
+    该事件：标题的内容：     首先，通过循环words得到里面的对象和下标，设置相关属性后，把它放到html上；
+           内容的内容：     同上 激活态还是通过下标实现同步-->
+<script>
+    // 事件的传递有两种方式：冒泡与捕获。
+    //                     在冒泡中，内部元素的事件会先被触发，然后再触发外部元素； 【从里到外】
+    //                     在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】
+
+    // 一、addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
+
+    // 它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”)
+    // 现在的版本可以省略第三个参数，默认值为false.
+
+    // 总结：
+    // 1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时 事件没有"on" 即onclick写成click
+    // 2：共用函数不能带参数；
+
+
+    // 二.addEventListener()与removeEventListener()的第三个参数详解
+
+    //      布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件
+
+    //     如果是false，在冒泡阶段调用事件处理程序;则是先寻找指定的位置，由最具体的元素接收，然后逐级向上传播至最不具体的
+    //     元素的节点（文档）
+
+    // 总结：
+    // 1：true的触发顺序总是在false前面
+    // 2：如果多个均为true，则外层触发先于内层
+    // 3：如果多个均为false，则内层触发先于外层
+
+    //  触点坐标选取
+
+    // touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
+
+    // touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX
+
+
+    //返回值
+    function $(className) {
+        return document.querySelector(className)
+    }
+    // 返回数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+    var mainli = _('.main ul li')
+
+
+    var startX = 0
+    mainli.forEach(function (value, index) {
+
+        value.addEventListener('touchstart', function (event) {
+
+            // console.log('event.targetTouches[0]', event.targetTouches[0].screenX);
+
+            startX = event.targetTouches[0].screenX;
+
+            mainli.forEach(function (V, i) {
+                if (i != index) {
+                    V.style.transform = `translateX(0px)`;
+                }
+            })
+        })
+
+
+
+        value.addEventListener('touchmove', function (event) {
+
+            var moveX = event.targetTouches[0].screenX;
+
+            // 在没有任何操作的情况下，起始状态都是关上的即false，也就是open取反
+            // 先判断右滑还是左滑，再判断是打开状态还是关闭状态,(定义value.open,true是打开，false是关上)。
+            // 然后打开的情况下，x值的计算以及再关上的状态下x轴的计算。
+
+
+            // 左滑
+            if(moveX < startX){
+                // 状态默认关闭
+                if (!value.open){
+                    var x = moveX - startX
+
+                    // 左滑打开成功
+                    if(x < -180){
+                        value.style.transform =`translateX(-180px)`
+                    }else{
+                    // 左滑打开失败
+                        value.style.transform =`translateX(${x}px)`
+                    } 
+                    value.open = true
+                }
+            // 右滑(movex > startx)
+            }else{
+                // 状态默认打开
+                if (value.open){
+                    var newX = (moveX - startX) + (-180)
+                    // 右滑关闭失败
+                    if (newX <= 0){
+                        value.style.transform =`translateX(${newX})px`
+                    }else{
+                        // 右滑关闭成功
+                        value.style.transform =`translateX(0px)`
+                    }
+                }
+            }
+
+
+        })
+
+
+
+        value.addEventListener('touchend', function (event) {
+            console.log('event.targetTouches', event);
+            var endX = event.changedTouches[0].screenX;
+            // 阈值
+            var distenceX = endX - startX
+
+            // 左滑
+            if (startX > endX) {
+
+                // 打开成功
+                if (distenceX < -60) {
+                    value.style.transform = `translateX(-180px)`;
+                    // 打开失败
+                } else {
+                    value.style.transform = `translateX(0px)`;
+                    value.open = false
+                }
+
+            
+            // 右滑
+            } else {
+                // 打开成功
+                if (distenceX > 60) {
+                    value.style.transform = `translateX(0px)`;
+                    // 打开失败
+                } else {
+                    value.style.transform = `translateX(-180px)`;
+                    value.open = false
+                }
+            }
+        })
+    })
+</script>
+
+</html>