diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/demo01.html" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d23d9397b26f014710ce8bbd40a77005822f895e
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/demo01.html"	
@@ -0,0 +1,210 @@
+<!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>商品抢购倒计时</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+
+    <style>
+        body {
+            background: linear-gradient(to right, rgb(223, 241, 255), rgb(220, 230, 255));
+        }
+    
+        h1 {
+            width: 600px;
+            margin: auto;
+            margin-top: 35px;
+            margin-bottom: 40px;
+            font-size: 40px;
+            color: cornflowerblue;
+        }
+    
+        .first {
+            width: 90%;
+            margin: auto;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+    
+        .first>div {
+            margin-bottom: 20px;
+            border: 10px solid rgba(100, 148, 237, 0.5);
+            background-color: white;
+            position: relative;
+            /*文字浮动在图片上，设置相对定位*/
+        }
+    
+        img {
+            width: 300px;
+            margin: 1px 1px 0 1px;
+        }
+    
+        .show {
+            /* display: none; */
+            width: 250px;
+            border: 1px solid black;
+            border-radius: 10px;
+            position: absolute;
+            /*文字浮动在图片上，设置觉绝对定位*/
+            top: 150px;
+            left: 80px;
+            font-size: 20px;
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+    
+        p {
+            text-align: center;
+            color: rgba(100, 148, 237, 0.8);
+        }
+    
+        .title {
+            font-size: 36px;
+            font-weight: 700;
+            color: #c00;
+            margin-right: 5px;
+        }
+    
+        .time {
+            background-color: rgb(241, 6, 6);
+            color: #000;
+            margin: 0 2px;
+            padding: 0 5px;
+            border-radius: 3px;
+            font-size: 32px;
+        }
+    
+        .times {
+            margin-bottom: 30px;
+            padding-right: 30px;
+        }
+    
+        .img {
+            position: relative;
+        }
+    
+        .btn {
+            position: absolute;
+            top: 320px;
+            left: 250px;
+            border-radius: 5px;
+            background-color: #c00;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <h1>新一季的手办！</h1>
+    <div class="times" id="aa">
+        <span class="title">抢购倒计时</span>
+        <!-- <span class="time">{{day}}</span>天 -->
+        <span class="time">{{hour}}</span>h
+        <span class="time">{{min}}</span>min
+        <span class="time">{{sec}}</span>s
+        <span class="time">全场{{zhe}}折{{count}}</span>
+        <span class="time">原价:{{price}}{{count}}</span>
+        <span class="time">折扣价:{{cost}}{{count}}</span>
+
+    </div>
+
+    <div class="first">
+        <div v-for='(images,index) in list' class="img">
+            <img :src="images.img" @mouseover="ok(index)" @mouseout="no(index)">
+            <span class="show" v-show='shows===index'>{{images.details}}</span>
+            <p>{{images.name}}</p>
+            <button class="btn">抢购</button>
+        </div>
+    </div>
+
+    
+</body>
+
+<script>
+
+
+    let vue = new Vue({
+
+        el: '.first',
+        data: {
+            shows: -1,
+            list: [{ img: './img/1-1.jpg', name: '龙珠悟空', price: '118', details: '万代（BANDAI）龙珠悟空蓝发贝吉塔贝吉特悟吉塔玩具礼物公仔玩偶模型手办摆件 超蓝孙悟空(发波)-20cm 全新现货' },
+            { img: './img/1-2.jpg', name: '命运之夜', details: '命运之夜手办塞巴手办阿尔托莉雅反转体手办FATE黑Saber托枪fgo手办生日礼物送男友同学朋友新年 saber托枪/高24CM' },
+            { img: './img/1-3.jpg', name: '初音未来Q版手办 ', details: '吉他乐队雪熊初音未来公仔Q版玩偶摆件樱花蛋糕礼物全套 宝蓝色' },
+            { img: './img/1-4.jpg', name: '蒂利仕', details: '鬼灭之刃手办我妻善逸手办霹雳一闪战斗造型祢豆子香奈乎手办生日礼物送男友同学朋友儿童 我妻善逸战斗闪电款 高23CM' },
+            // { img: './img/fc4.webp', name: '和田玉叮当镯', details: '晴水底和田玉叮当镯。一步一响，一步一想~' },
+            // { img: './img/erh3.webp', name: '耳环', details: '字母A长条回形针耳环。复古、优雅。' },
+            // { img: './img/xl3.webp', name: '项链', details: '字母T长条项链毛衣链。温柔、百搭。' },
+            // { img: './img/fc2.webp', name: '翡翠手镯', details: '冰种蓝水满绿翡翠手镯。盈盈一水间，脉脉不得语。' },
+            ],
+        },
+        methods: {
+            ok: function (index) {
+                if (this.shows == -1) {
+                    this.shows = index;
+                }
+
+            },
+            no: function (index) {
+                this.shows = -1;
+            }
+        }
+    });
+    let time = new Vue({
+        el: '#aa',
+        data: {
+                day: 0,
+                hour: 0,
+                min: 0,
+                sec: 0,
+                zhe:6,
+                price:500,
+                btn:null,
+                cost:300
+        },
+        
+        mounted() {
+            this.add();
+        },
+        methods: {
+            // 防止数值小于10时，出现一位数
+            
+            // 倒计时函数
+            add() {
+                const end = Date.parse(new Date('2022-04-07'))
+                const now = Date.parse(new Date())
+                const S = end - now;
+                // let day = parseInt(S / 1000 / 60 / 60 / 24);
+                let hour = parseInt(S / 1000 / 60 / 60 % 24);
+                let min = parseInt(S / 1000 / 60 % 60);
+                let sec = parseInt(S / 1000 % 60);
+                // this.day = day;
+                this.hour = hour > 9 ? hour : '0' + hour;
+                this.min = min > 9 ? min : '0' + min;
+                this.sec = sec > 9 ? sec : '0' + sec;
+                const that = this;
+                setTimeout(function () {
+                    that.add()
+                }, 1000);
+            }
+        },
+        computed: {
+            count: function () {
+                this.btn=setInterval(()=>{
+                    this.zhe+=0.5;
+                    console.log(this.zhe);
+                    this.cost = this.price*this.zhe*0.1;
+                    if(this.zhe==10){
+                        clearInterval(this.btn);
+                    }
+                }, 1000)
+            }
+        }
+
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-1.jpg" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4e7399c193aca97cdeb644670ef50061b1750726
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-1.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-2.jpg" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..506aa11ab81ea5b1bd77c6eb0fc43c835ffbcae5
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-2.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-3.jpg" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d67f8738b2c55ea9e27d5641febb98fac2322852
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-3.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-4.jpg" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c8eb2ba890946a1665b19f9383346c15df53a776
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1-4.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1.webp" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..7ee54d14fa7353ff901a3bd377bda2283d1a2703
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/1.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/2.webp" "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..2f00565ae0b4c1f53cb4770b708c3353dfdc57a2
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/4.06 \345\225\206\345\223\201\346\212\242\350\264\255\345\200\222\350\256\241\346\227\266/img/2.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/4.07 \350\241\250\345\215\225\347\273\221\345\256\232/demo01.html" "b/\351\251\254\351\235\222\351\235\222/4.07 \350\241\250\345\215\225\347\273\221\345\256\232/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ff9fa736fabdeaa39f523c7d4f7559ded0b35702
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/4.07 \350\241\250\345\215\225\347\273\221\345\256\232/demo01.html"	
@@ -0,0 +1,307 @@
+<!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>表单绑定</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    
+        i {
+            font-style: normal;
+        }
+    
+        a {
+            text-decoration: none;
+        }
+    
+        input {
+            outline: none;
+            border: none;
+        }
+    
+        html,
+        body {
+            width: 100%;
+            font-size: 14px;
+        }
+    
+        .container {
+            width: 1210px;
+            margin: 0 auto;
+    
+        }
+    
+        .header {
+            width: 100%;
+            height: 110px;
+            box-shadow: 10px 10px 10px rgba(111, 111, 111, .5);
+            position: relative;
+    
+        }
+        .header .desc {
+            font-size: 18px;
+            line-height: 34px;
+            border-left: 1px solid #ccc;
+            position: absolute;
+            left: 200px;
+            top: 28px;
+            padding-left: 20px;
+            font-weight: bold;
+        }
+    
+        .register {
+            width: 400px;
+            margin: 0 auto;
+            padding-top: 40px;
+            position: relative;
+        }
+    
+        .register-box {
+            width: 100%;
+            height: 50px;
+            padding-bottom: 40px;
+        }
+    
+        .register-box .box {
+            line-height: 50px;
+            padding-left: 10px;
+            border: 1px solid #ccc;
+            position: relative;
+        }
+    
+        .register-box .box.error {
+            border: 1px solid red;
+        }
+    
+        .register-box .box input {
+            width: 200px;
+            font-size: 16px;
+            padding-left: 20px;
+        }
+        .tip {
+            width: 100%;
+            line-height: 30px;
+            font-size: 12px;
+            height: 60px;
+            color: red;
+        }
+    
+        .register-box.xieyi {
+            width: 100%;
+            height: 20px;
+            padding-bottom: 30px;
+            /*	background-color: #ccc;*/
+        }
+    
+        .register-box.xieyi .box {
+            line-height: normal;
+            padding: 0;
+            border: none;
+        }
+    
+        .register-box.xieyi .box.error {
+            line-height: normal;
+            padding: 0;
+            border: 1px solid red;
+        }
+    
+        .register-box.xieyi .box input {
+            width: auto;
+        }
+    
+        .register button {
+            width: 100%;
+            height: 40px;
+            font: bold 18px/40px;
+            color: white;
+            background-color: darkred;
+            outline-color: white;
+        }
+    
+        .register button:hover {
+            background-color: red;
+        }
+    
+        .form-item::after {
+            content: attr(data-msg);
+            color: red;
+            font-size: 14px;
+            display: none;
+    
+        }
+    
+        .form-item.err::after {
+            display: block;
+        }
+    
+        .form-item {
+            outline: none;
+            width: 100%;
+            height: 100%;
+            font-size: 14px;
+        }
+    
+        .form-item.err input{
+            border-color: red;
+        }
+    </style>
+</head>
+<body>
+    
+    <div class="header">
+        <a class="logo" href="##"></a>
+        <div class="desc">欢迎注册</div>
+    </div>
+    <!--版心-->
+    <div class="container">
+        <!--京东注册模块-->
+        <div class="register">
+            <!--用户名-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err}]" data-msg="请输入中文!!!">
+                    <label for="userName">用&nbsp;户&nbsp;名</label>
+                    <input type="text" id="userName" placeholder="您的账户名和登录名" v-model='userName' />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{usernamenull}}</span>
+                </div>
+            </div>
+            <!--设置密码-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err1}]" data-msg="请输入字母数字的6~16位密码">
+                    <label for="pwd">设 置 密 码</label>
+                    <input type="password" id="pwd" placeholder="建议至少两种字符组合" v-model="password" />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{passwordnull}}</span>
+                </div>
+            </div>
+            <!--确认密码-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err2}]" data-msg="密码输入不一致">
+                    <label for="pwd2">确 认 密 码</label>
+                    <input type="password" id="pwd2" placeholder="请再次输入密码" v-model='repassword'/>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{repasswordnull}}</span>
+                </div>
+            </div>
+            <!--设置邮箱-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err3}]" data-msg="邮箱格式错误">
+                    <label for="email">邮 箱 验 证</label>
+                    <input type="text" id="email" placeholder="请输入邮箱" v-model='email'/>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{emailnull}}</span>
+                </div>
+            </div>
+            <!--手机验证-->
+            <div class="register-box">
+                <!--表单项-->
+                <div class="box default" :class="['form-item', {'err':err4}]" data-msg="手机号格式错误">
+                    <label for="mobile">手 机 验 证</label>
+                    <input type="text" id="mobile" placeholder="请输入手机号" v-model="phone" />
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span>{{phonenull}}</span>
+                </div>
+            </div>
+            <!--注册协议-->
+            <div class="register-box xieyi">
+                <!--表单项-->
+                <div class="box default">
+                    <input type="checkbox" id="ck" />
+                    <span>我已阅读并同意<a href="##">《用户注册协议》</a></span>
+                </div>
+                <!--提示信息-->
+                <div class="tip">
+                    <i></i>
+                    <span></span>
+                </div>
+            </div>
+            <!--注册-->
+            <button type="submit"  @click="btn">注册</button>
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: '.container',
+        data: {
+            userName: '',
+            err: '',
+            password:'',
+            err1:'',
+            repassword:'',
+            err2:'',
+            email:'',
+            err3:'',
+            phone:'',
+            err4:'',
+            usernamenull:'',
+            passwordnull:'',
+            repasswordnull:'',
+            emailnull:'',
+            phonenull:'',
+        },
+        watch: {
+            userName(val) {
+                this.err = !/[\u4e00-\u9fa5]/.test(val);
+            },
+            password(val){
+                this.err1 = !/^[a-zA-Z0-9]{6,16}/.test(val);
+            },
+            repassword(val){
+                this.err2 = this.password != val
+            },
+            email(val){
+                this.err3 = !/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
+            },
+            phone(val){
+                this.err4 = !/^1[3-9][0-9]\d{8}$/.test(val)
+            }
+        },
+        methods:{
+            btn:function(){
+                if(this.userName ==''){
+                    this.usernamenull ='用户名不为空';
+                }
+                if(this.password ==''){
+                    this.passwordnull ='密码不为空';
+                }
+                if(this.repassword ==''){
+                    this.repasswordnull ='确认密码不为空';
+                }
+                if(this.email ==''){
+                    this.emailnull ='邮箱不为空';
+                }
+                if(this.phone ==''){
+                    this.phonenull ='手机号不为空';
+                }
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\251\254\351\235\222\351\235\222/4.08 \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244\346\224\271\345\217\230\350\203\214\346\231\257\350\211\262/demo01.html" "b/\351\251\254\351\235\222\351\235\222/4.08 \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244\346\224\271\345\217\230\350\203\214\346\231\257\350\211\262/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..51fc7011d9e158e88294a4904552f2722c7bdd96
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/4.08 \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244\346\224\271\345\217\230\350\203\214\346\231\257\350\211\262/demo01.html"	
@@ -0,0 +1,69 @@
+<!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>自定义指令改变背景色</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+    <style type="text/css" media="screen">
+        #app {
+            width: 800px;
+            height:600px;
+            margin: 0 25%;
+        }
+        h3{
+            /* width: 100%; */
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h3>自定义指令</h3>
+    <div id="app" v-changebackgroundcolor="color">
+        <h3>
+            <input type="text" v-model="color" placeholder="请输入16进制颜色">
+        </h3>
+    </div>
+    <script>
+        new Vue({
+            el: "#app",
+            data: {
+                color: "#5FCA34",
+            },
+            methods: {
+                getRandom: function () {
+                    var r = Math.floor(Math.random() * 256);
+                    var g = Math.floor(Math.random() * 256);
+                    var b = Math.floor(Math.random() * 256);
+                    var a = Math.random().toFixed(1);
+                    return `rgba(${r},${g},${b},${b})`
+                }
+            },
+            directives: {
+                changebackgroundcolor: {
+                    bind: function (el, bindings) {
+                        var r = Math.floor(Math.random() * 256);
+                        var g = Math.floor(Math.random() * 256);
+                        var b = Math.floor(Math.random() * 256);
+                        var a = Math.random().toFixed(1);
+
+                        el.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+                        console.log("绑定成功");
+                    },
+                    update: function (el, bindings) {
+                        console.log('已更新数据');
+                        var r = Math.floor(Math.random() * 256);
+                        var g = Math.floor(Math.random() * 256);
+                        var b = Math.floor(Math.random() * 256);
+                        var a = Math.random().toFixed(1);
+                        el.style.background = `rgba(${r},${g},${b},${a})`
+                    }, 
+
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
