first commit

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

@@ -0,0 +1,196 @@
+<!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 {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100vh;
+        }
+
+        img {
+            width: 80px;
+            height: 96px;
+            position: fixed;
+            top: -96px;
+        }
+
+        .dialog {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #0000008c;
+            z-index: 9999;
+            display: none;
+        }
+
+        .center {
+            width: 40%;
+            background: #fff;
+            padding: 15px 10px;
+            border-radius: 4px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .title {
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 1px solid #ebe9e9;
+
+        }
+
+        .content {
+            padding: 20px 0;
+            text-align: center;
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .footer .ok {
+            padding: 3px 15px;
+            background: #2a6bf4;
+            color: #fff;
+            font-size: 13px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="dialog">
+        <div class="center">
+            <div class="title">提示</div>
+            <div class="content"></div>
+            <div class="footer">
+                <div class="ok">确定</div>
+            </div>
+        </div>
+    </div>
+    <!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+该事件：首先：红包随机出现在屏幕上：
+             1、获取屏幕的长宽，用来计算红包出现的位置；2、创建红包，引入红包图片，并给它设置在x轴上随机出现Math.random()；
+             3、给红包绑定点击事件，并限制3次点击次数；3、点击确定红包消失；4、红包展现在html上； 
+        
+        其次：设置动画：1、红包从屏幕顶部上方随机生成，之后开始下落，完全下降到底部以后消失；
+        
+        最后：打开并去除红包:1、红包被点击以后被打开；2、规定中奖几率和次数；3、点击确定按钮以后，关闭红包；4、红包随即消失；
+甲方需求：屏幕上随机生成红包雨，用户可点击，点击时红包雨暂停，确定后该红包消失，红包雨继续。要规定中奖机率和抽奖次数  -->
+</body>
+<script>
+    //返回值
+    function $(className) {
+        return document.querySelector(className)
+    }
+    // 返回数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+    var dialog = $('.dialog')
+    var center = $('.center')
+    var content = $('.content')
+    var ok = $('.ok')
+    var body = $('body')
+    var {clientWidth,clientHeight} = document.body;
+    var click = 0
+
+
+    // 红包相关属性创建
+    function HB() {
+        var img = document.createElement("img");
+
+        var x = Math.random() * (clientWidth - 80)
+        img.src = "../hb.png";
+        img.style.left = `${x}px`;
+        img.style.top = '-96px'
+        img.onclick = function () {
+            clickImg = img
+            click += 1
+            //清除红包向下滚动定时器
+            _('img').forEach((value, index) => {
+                    clearTimeout(value.time)
+                })
+            //清除创建红包定时器
+            clearInterval(createdNumber)
+            if (click > 3) {
+                content.innerText = "三次抽奖已经用完"
+                dialog.style.display = "block"
+            } else {
+                rate()
+                dialog.style.display = "block"
+            }
+
+        }
+        body.appendChild(img)
+        move(img)
+
+    }
+
+    // 定义中奖几率
+    function rate() {
+        var num = Math.random();
+        if (num > 0 && num <= 0.5) {
+            content.innerText = "恭喜您中了九折"
+        } else if (num > 0.5 && num <= 0.9) {
+            content.innerText = "恭喜您中了八折"
+        } else {
+            "恭喜您中了五折"
+        }
+    }
+    // 红包定时生成
+    createdNumber = setInterval(() => {
+        HB()
+    }, 1000)
+
+    // 红包运动
+    function move(tag) {
+        var now = Number(tag.style.top.split('px')[0])
+
+        if (now <= clientHeight) {
+            tag.time = setTimeout(() => {
+                tag.style.top = `${now + 3}px`
+                move(tag)
+            }, 15)
+
+
+        } else {
+            body.removeChild(tag)
+        }
+    }
+
+    // 红包关闭
+    ok.onclick = function (){
+        dialog.style.display = "none"
+        
+        body.removeChild(clickImg)
+
+        //重新设置 创建红包定时器
+        createdNumber = setInterval(() => {
+            HB()
+        }, 1000)
+
+        //重新设置页面红包向下滚动
+        _('img').forEach((value, index) => {
+             value.time = setTimeout(() => {
+                move(value)
+            }, 15)
+        })
+    }
+    
+
+</script>
+
+</html>

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

@@ -0,0 +1,174 @@
+<!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>
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .title {
+            display: flex;
+        }
+
+        .title li {
+            margin-right: 10px;
+        }
+
+        .title .active {
+            color: red;
+        }
+
+        .content li {
+            display: none;
+        }
+
+        .content .active {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="title"></ul>
+    <ul class="content"></ul>
+
+</body>
+<!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。
+
+    思路：首先words里面的每一项都不是固定的，所以要考虑通过循环去加入到html中；
+
+    该事件：标题的内容：     首先，通过循环words得到里面的对象和下标，设置相关属性后，把它放到html上；
+           内容的内容：     同上 激活态还是通过下标实现同步-->
+<script>
+    // 后端数据：
+    var words = [{
+            title: '首页',
+            content: [{
+                    text: '首页的内容1'
+                },
+                {
+                    text: '首页的内容2'
+                },
+                {
+                    text: '首页的内容3'
+                },
+                {
+                    text: '首页的内容4'
+                },
+                {
+                    text: '首页的内容5'
+                },
+            ]
+        },
+        {
+            title: '社会',
+            content: [{
+                    text: '社会 的内容1'
+                },
+                {
+                    text: '社会 的内容2'
+                },
+                {
+                    text: '社会 的内容3'
+                },
+            ]
+        },
+        {
+            title: '军事',
+            content: [{
+                    text: '军事 的内容1'
+                },
+                {
+                    text: '军事 的内容2'
+                },
+                {
+                    text: '军事 的内容3'
+                },
+            ]
+        },
+        {
+            title: '科技',
+            content: [{
+                    text: '科技 的内容1'
+                },
+                {
+                    text: '科技 的内容2'
+                },
+                {
+                    text: '科技 的内容3'
+                },
+            ]
+        }
+    ]
+
+
+
+    //返回值
+    function $(className) {
+        return document.querySelector(className)
+    }
+    // 返回数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+    var title = $('.title')
+    var content = $('.content')
+
+    contentAll()
+
+    function titleAll() {
+        // 循环添加title的内容，并且判断title的class是否需要添加激活态
+        words.forEach((value, index) => {
+            title.innerHTML += `<li class="${index == 0 ? 'active':''}">${value.title}</li>`
+        })
+        // console.log(words);
+
+        var titleli = _(".title li")
+        var contentli = _(".content li")
+
+        // title里面的的内容也不确定，所以进行循环，并给里面的每一个对象绑定点击事件，然后同旧版样式，先清除再添加激活态
+        titleli.forEach((v, i) => {
+            v.onclick = function () {
+
+                titleli.forEach((valueli, index) => {
+                    valueli.className = ''
+                    contentli[index].className = ''
+                })
+                v.className = 'active'
+                contentli[i].className = 'active'
+            }
+        })
+
+    }
+
+
+// 然后开始考虑如何插入li标签里的具体内容，同样不确定，用循环
+    function contentAll() {
+
+        // 同上，循环词组插入content的li标签，然后再li标签里面再循环插入li标签里面的具体文本
+        words.forEach((value, index) => {
+            content.innerHTML += `<li class="${index == 0 ? 'active':''}">${
+// 这里将进行array.map(function(当前值, 下标))
+// toString() 方法返回字符串。
+// replaceAll()字符串替换。
+                value.content.map( v => { return `<p>${v.text}</p>` }).toString().replaceAll(',','')
+
+            }</li>`
+        })
+
+    }
+    titleAll()
+
+
+
+</script>
+
+</html>