day65做業

時間  2020-04-18
標籤 day65 day 简体版
原文   原文鏈接

紅黃藍css

<!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>

點擊變色: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>

圖片旋轉:vue

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程