day65作业

红黄蓝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红黄蓝</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <p>
            <button @click="fn('red')">红</button>
            <button @click="fn('yellow')">黄</button>
            <button @click="fn('blue')">蓝</button>
        </p>

        <div class="box" :style="{backgroundColor: color}"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            color: 'red'
        },
        methods: {
            fn(color) {
                this.color = color;
            }
        }
    })
</script>
</html>

点击变色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击变色</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    .wrap {
        width:200px;
        height:200px;
        background-color:red;
    }
</style>
<div id="app">
    <div class="wrap" :style="{backgroundColor: color}" @click="changeColor">    </div>
</div>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    el:'#app',
    data:{
        color:'black',
        count:0,
        colorArr:['cyan', 'pink', 'green'] 
    },
    methods:{
        changeColor(){
            let n = this.count++;
            this.color = this.colorArr[n % this.colorArr.length];
        }
    }
})
</script>
</html>

图片旋转:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
    }
    .b1 { background-color: red; position: absolute; }
    .b2 { background-color: green; position: absolute; }
    .l {
        width: 100px;
        height: 200px;
        left: 0;
    }
    .r {
        width: 100px;
        height: 200px;
        right: 0;
    }
    .t {
        width: 200px;
        height: 100px;
        top: 0;
    }
    .b {
        width: 200px;
        height: 100px;
        bottom: 0;
    }
</style>

<div id="app">
    <div class="box" @click="clickAction">
        <div class="b1" :class="c1"></div>
        <div class="b2" :class="c2"></div>
    </div>
</div>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 1,
            c1: 'l',
            c2: 'r',
            c1Arr: ['l', 't', 'r', 'b'],
            c2Arr: ['r', 'b', 'l', 't']
        },
        methods: {
            clickAction() {
                let n = this.count ++;
                this.c1 = this.c1Arr[n % 4];
                this.c2 = this.c2Arr[n % 4];
            }
        }
    });
    // 利用定时器自动旋转图像
    setInterval(function () {
        app.clickAction();
    }, 55)
</script>
</html>
posted @ 2019-12-17 08:47  稳我  阅读(131)  评论(0)  编辑  收藏  举报