Day 65 作业

有红黄蓝三个按钮,以及一个200×200矩形框box, 点击不同的按钮, box的颜色会被切换成指定的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .d1 {
            width: 50px;
            height: 20px;
            background: red;
        }
        .d2 {
            width: 50px;
            height: 20px;
            background: yellow;
        }
        .d3 {
            width: 50px;
            height: 20px;
            background: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--属性指令：   v-bind:属性名="变量"
           简写：   :属性名="变量"-->
    <p v-bind:style="pStyle"></p>
    <p>
        <button :class="c1" @click="pc1">红</button>
        <button :class="c2" @click="pc2">黄</button>
        <button :class="c3" @click="pc3">蓝</button>
    </p>

    <script>
        new Vue({
            el: '#app',
            data: {
                pStyle: {
                    width: '200px',
                    height: '200px',
                    backgroundColor: 'red'
                },
                c1: 'd1',
                c2: 'd2',
                c3: 'd3'

            },
            methods: {
                pc1 () {
                    this.pStyle.backgroundColor = 'red'
                },
                pc2 () {
                    this.pStyle.backgroundColor = 'yellow'
                },
                pc3 () {
                    this.pStyle.backgroundColor = 'blue'
                }
            }
        })
    </script>
</div>
</body>
</html>

有一个200×200矩形框wrap,点击wrap本身,记录点击数,如果1次wrap为pink,2次warp为green,三次为cyan,4次重新回到pink,依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--属性指令：   v-bind:属性名="变量"
           简写：   :属性名="变量"-->
    <p v-bind:style="pStyle" @click="pc1"></p>
    <p >点击次数:{{ c_sum }}</p>


    <script>
        let color = 'pink';
        new Vue({
            el: '#app',
            data: {
                pStyle: {
                    width: '200px',
                    height: '200px',
                    backgroundColor: 'red'
                },
                c_sum: 0
            },

            methods: {

                pc1 () {

                        if (color == 'pink') {
                            this.pStyle.backgroundColor = 'pink';
                            this.c_sum += 1;
                            color = 'green'
                        } else if (color == 'green') {
                            this.pStyle.backgroundColor = 'green';
                            this.c_sum += 1;
                            color = 'cyan'
                        }else {
                            this.pStyle.backgroundColor = 'cyan';
                            this.c_sum += 1;
                            color = 'pink'
                        }
                }
            }
        })
    </script>
</div>
</body>
</html>

如图:图形初识左红右绿,点击一下变成上红下绿,再点击变成右红左绿,再点击变成下红上绿,依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .d1 {
            position: absolute;
            left: 50px;
            width: 50px;
            height: 100px;
            background: red;
            border-radius: 100px 0px 0px 100px;
        }
        .d1g {
             position: absolute;
            left: 50px;
            width: 50px;
            height: 100px;
            background: green;
            border-radius: 100px 0px 0px 100px;
        }

        .d2 {
            position: absolute;
            left: 100px;
            width: 50px;
            height: 100px;
            background: green;
            border-radius: 0px 100px 100px 0px;
        }

        .d2r {
            position: absolute;
            left: 100px;
            width: 50px;
            height: 100px;
            background: red;
            border-radius: 0px 100px 100px 0px;
        }

        .d3 {
            position: absolute;
            left: 50px;
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 100px 100px 0px 0px;
        }

        .d3g {
            position: absolute;
            left: 50px;
            width: 100px;
            height: 50px;
            background: green;
            border-radius: 100px 100px 0px 0px;
        }

        .d4 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 50px;
            background: green;
            border-radius: 0px 0px 100px 100px;
        }

        .d4r {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 0px 0px 100px 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <span :class="c1" @click="pc1"></span>
    <span :class="c2" @click="pc1"></span>
<!--    <span :class="c3" ></span>-->
<!--    <span :class="c4"></span>-->



    <script>
        let num = 1
        new Vue({
            el: '#app',
            data: {
                c1: 'd1',
                c2: 'd2',
                // c3: 'd3',
                // c4: 'd4',
                is_true: true
            },

            methods: {

                pc1 () {
                    if (num == 1) {
                        this.c1 = 'd3';
                        this.c2 = 'd4';
                        num += 1
                    }else if (num == 2) {
                        this.c1 = 'd1g';
                        this.c2 = 'd2r';
                        num += 1
                    }else {
                        this.c1 = 'd3g';
                        this.c2 = 'd4r';
                        num = 1
                    }
                }
            }
        })
    </script>
</div>
</body>
</html>

让图片能自动旋转

猜你喜欢