托马斯彩色回旋

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--        <style>-->
<!--        /*d1 {*/-->
<!--        /*    width: 200px;*/-->
<!--        /*    height: 200px;*/-->
<!--        /*    background-color: darkred;*/-->
<!--        /*}*/-->
<!--        /*d2 {*/-->
<!--        /*                width: 200px;*/-->
<!--        /*    height: 200px;*/-->
<!--        /*    background-color: darkkhaki;*/-->
<!--        /*}*/-->
<!--        /*d3 {*/-->
<!--        /*                width: 200px;*/-->
<!--        /*    height: 200px;*/-->
<!--        /*    background-color: darkblue;*/-->
<!--        /*}*/-->
<!--    </style>-->
</head>
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p id="box" @click="f1" :style="{width:w,height:h, backgroundColor:bgc }"></p>
<hr>
        <input type="button" value="红" @click="f1($event,'darkred')">
        <input type="button" value="黄" @click="f1($event,'darkkhaki')">
        <input type="button" value="蓝" @click="f1($event,'darkblue')">
</form>
</div>


</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
       el: '#app',
        data:{
           w:'200px',
           h:'200px',
            bgc:'white'

        },
        methods:{
           f1(ev,argv){
               this.bgc=argv
           }
           // f2(){
           //     #box.class='d2'
           // },
           //  f3(){
           //     #box.class='d3'
           //  }
        }
    })

</script>
</html>

有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cleard {
            background-color: deeppink;

            background-color: cornflowerblue;
        }


    </style>
</head>
<body>
<div id="app">
    <form action="" style="margin: 20px;">
        <p id="box" @click="f1" :style="{width:w,height:h, backgroundColor:bgc }"></p>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let x = 0;
    new Vue({
        el: '#app',
        data: {
            w: '200px',
            h: '200px',
            bgc: 'white'

        },
        methods: {
            f1() {
                x += 1;
                if (x == 1) {
                    this.bgc = 'deeppink'
                } else if (x == 2) {
                    this.bgc = 'darkgreen'

                } else if (x == 3) {
                    this.bgc = 'cornflowerblue';
                    x = 0
                }

            }
        }
    })

</script>
</html>

如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="" style="margin: 20px;">
        <p @click="f1" :style="{width:w,height:h, background:bgc  }"></p>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let x = 0;
    new Vue({
        el: '#app',
        data: {
            w: '200px',
            h: '200px',
            bgc: 'linear-gradient(to top, red 50%, green 50%)',


        },
        methods: {
            f1() {
                x += 1;
                if (x == 1) {
                    this.bgc = 'linear-gradient(20deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 2) {
                    this.bgc = 'linear-gradient(40deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 3) {
                    this.bgc = 'linear-gradient(60deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 4) {
                    this.bgc = 'linear-gradient(80deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 5) {
                    this.bgc = 'linear-gradient(100deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 6) {
                    this.bgc = 'linear-gradient(120deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 7) {
                    this.bgc = 'linear-gradient(140deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 8) {
                    this.bgc = 'linear-gradient(160deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 9) {
                    this.bgc = 'linear-gradient(180deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 10) {
                    this.bgc = 'linear-gradient(200deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 11) {
                    this.bgc = 'linear-gradient(220deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 12) {
                    this.bgc = 'linear-gradient(240deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 13) {
                    this.bgc = 'linear-gradient(260deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 14) {
                    this.bgc = 'linear-gradient(280deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 15) {
                    this.bgc = 'linear-gradient(300deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 16) {
                    this.bgc = 'linear-gradient(320deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 17) {
                    this.bgc = 'linear-gradient(340deg, red,orange,yellow,green,blue,indigo,violet)'
                } else if (x == 18) {
                    this.bgc = 'linear-gradient(360deg, red,orange,yellow,green,blue,indigo,violet)';
                    x = 0
                }
            }
        }
    })
</script>
</html>

猜你喜欢