day65作业

A作业（必做）

"""
1、按照上方 知识点总结 模块，总结今天所学知识点
2、有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
3、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>作业</title>

</head>
<body>
<div id="app">
        <div :style="myStyle"></div>
        <input type="button" value="red" v-on:click="R">
        <input type="button" value="yellow" @click="Y">
        <input type="button" value="blue" v-on:click="B">


</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            myStyle:{
                height:'200px',
                width:'200px',
                backgroundColor:'black',
            }
        },
        methods: {
            R(){
                this.myStyle.backgroundColor='red'
            },
            Y(){
                this.myStyle.backgroundColor='yellow'
            },
            B(){
                this.myStyle.backgroundColor='blue'
            }
        }

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>作业</title>

</head>
<body>
<div id="app" @click="C">
    <div :style="myStyle"></div>


</div>
<script src="../vue.js"></script>
<script>
    let num = 0;
    new Vue({
        el: '#app',
        data: {
            myStyle: {
                height: '200px',
                width: '200px',
                backgroundColor: 'pink',
            }
        },
        methods: {
            C() {
                console.log(num);


                if (num === 0) {
                    this.myStyle.backgroundColor = 'green';

                }
                if (num === 1) {
                    this.myStyle.backgroundColor = 'cyan';

                }

                if (num === 2) {
                    this.myStyle.backgroundColor = 'pink';
                    num = -1
                }
                num++
            }
        }

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

B作业（选做）

"""
1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
2、可以将图编程自动旋转
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        #d0 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: green;
            overflow: hidden;
            position: absolute;
            transition: 3s ease-in;
            /*transform: rotate(0deg);*/
            animation: myrotate 5s linear infinite;
        }
        #d1 {
            height: 100%;
            width: 50%;
            background: red;
            position: relative;

        }
        @keyframes myrotate {from{transform: rotate(0deg)}
            to{transform: rotate(360deg)}
        }

    </style>
</head>
<body>
<div id="app">
        <div id="d0">
            <div id="d1" :style="S" @click="A"></div>
        </div>



</div>
<script>

</script>
</body>
</html>

A作业（必做）

B作业（选做）

猜你喜欢