练习题

一、点击事件控制标签颜色

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <form action="" style="margin: 30px;">

        <p @click="tag" :style="{width: w,height: h, backgroundColor: bgc }"></p>

        <input type="button" value="红" @click="tag($event,'red')">

        <input type="button" value="黄" @click="tag($event,'yellow')">

        <input type="button" value="蓝" @click="tag($event,'blue')">

    </form>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            h: '200px',

            w: '200px',

            bgc: 'red'

            },

        methods:{

            tag (a,b) {

                this.bgc = b

            }

        }

    })

</script>

</html>

二、实现点击次数，变换页面标签的颜色

2、有一个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</title>

</head>

<body>

<div id="app">

    <form action="#" style="margin: 30px;">

        <p @click="tag" :style="{width: w,height: h, backgroundColor: bgc}"></p>

    </form>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    let num = 0;

    new Vue({

        el:'#app',

        data:{

            h: '200px',

            w: '200px',

            bgc: 'yellow'

            },

        methods:{

            tag () {

                num += 1;

                if (num==1){

                    this.bgc = 'pink'

                }else {if (num==2){

                    this.bgc = 'green'

                }else {

                    this.bgc = 'cyan';

                    num = 0

                }}

            }

        }

    })

</script>

</html>

三、周期性实现颜色的旋转变色

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

2、可以将图编程自动旋转

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <form action="" style="margin: 30px;">

        <p @click="tag" :style="{width: w,height: h, background: bgc, borderRadius:rad}"></p>

    </form>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    let num = 0;

    let app = new Vue({

        el:'#app',

        data:{

            h: '200px',

            w: '200px',

             //实现页面的过度（颜色）

            bgc: 'linear-gradient(to top, red 50%, green 50%)',

            rad: '50%'

            },

        methods:{

            tag () {

                num += 1;

                if (num==1){

                    // 控制方向

                    this.bgc = 'linear-gradient(to top, red 50%, green 50%)'

                }else {if (num==2){

                    this.bgc = 'linear-gradient(to left, red 50%, green 50%)'

                }else {if (num==3) {

                    this.bgc = 'linear-gradient(to bottom,red  50%, green 50%)'

                }else {

                    this.bgc = 'linear-gradient(to right, red 50%, green 50%)';

                    num = 0

                }

                }}

            }

        }

    });

    function funcTest(){

    // 按照指定的周期（以毫秒计）来调用函数

    window.setInterval(app.tag,666);

}

    // 页面加载完直接调用 该方法

    window.onload = funcTest;

</script>

</html>

day65-test的更多相关文章

  1. day65——day69

    目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...

  2. day65 request对象,以及方法,response对象,render,redirect

    这里的都是我们会频繁使用到的,用得多了自然就会了,我们写项目都是少不了这些用法的,所以这就把老师的博客粘过来就好了, Request对象 官方文档 属性 所有的属性应该被认为是只读的,除非另有说明. ...

  3. python 全栈开发，Day65(MySQL练习题,参考答案)

    一.MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号.ps:针对的是自己的生物成绩比物理成绩高,再 ...

  4. python 全栈开发，Day65(索引)

    索引 一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查找 三.常 ...

  5. DAY65

    # 1.web应用# 2.CS和BS架构# 3.http协议# 特点: 1.接受请求正在处理# 2.请求处理完毕# 3.需要进行附加操作以完成请求# 4.服务器无法处理请求# 5.服务器处理请求出错# ...

  6. day65 Django模板语言

      常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊的含 ...

  7. web应用与web框架（Day65）

    Web应用 对于所有的web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 import socket def handle_request(client): ...

  8. （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  9. （day65）作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. day65—angularJS的学习笔记1

    转行学开发,代码100天—2018-05-20 AngularJS的引用示例: <!DOCTYPE html> <html> <head> <title> ...

随机推荐

  1. Daemon 守护线程(27-11)

    t2.setDaemon(True)不再等待里面的sleep(5). 当设成setDaemon(True)这个线程就不等了. 例子一: import threadingfrom time import ...

  2. Mysql优化系列之数据类型优化

    本篇是优化系列的第一篇:数据类型 为了不产生赘述,尽量用简洁的语言来描述. 在选择数据类型之前,首先要知道几个原则: 更小的通常更好 尽量使用可以正确存储数据的最小数据类型.更小的数据类型意味着更快, ...

  3. 移植 TinyLogin

    下载 从 http://tinylogin.busybox.net/downloads/tinylogin­1.4.tar.bz2下载 tinylogin­1.4 到/tmp 目录当中,并解压. 修改 ...

  4. Python全栈开发：json与pickle

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 正解(序列化):将Python数据类型转换成json或者pickle格式 ...

  5. 【daydayup】weTalk

    先看一下项目效果 这个是我运行的作者的项目的wetalk-server项目,他还有wetalk-client 项目 先放下作者的github项目地址:https://github.com/mangyu ...

  6. AM历史消息及文件记录删除

    1.下载 folderclear.bat 文件 2.用编辑方式打开这个文件 3.对里面的参数做修改 4.这个批处理文件,保留了 完整的一个月的消息记录 (如 今天是 2017.3.15 ,那么 清除数 ...

  7. MSSQLSERVER跨服务器连接(远程登录)的示例代码

    MSSQLSERVER跨服务器链接服务器创建方法如下 复制代码 代码如下: --声明变量 Declare @svrname varchar(255), @dbname varchar(255), @s ...

  8. csp-s模拟测试10.1(b)X 国的军队,排列组合, 回文题解

    题面:https://www.cnblogs.com/Juve/articles/11615883.html X 国的军队: 好像有O(T*N)的直接贪心做法 其实多带一个log的二分也可以过 先对所 ...

  9. 洛谷P3376【模板】网络最大流 ISAP

    这篇博客写得非常好呀. 传送门 于是我是DCOI这一届第一个网络流写ISAP的人了,之后不用再被YKK她们嘲笑我用Dinic了!就是这样! 感觉ISAP是会比Dinic快,只分一次层,然后不能增广了再 ...

  10. WCF服务编程-基础

    WCF是微软建立新一代的分布式应用及面向服务应用的标准平台,是基于原有.NET Framework 2.0的扩展.虽然在WCF发布不久就已经在项目中使用WCF技术了.但是由于在项目中还没有较大规模的应 ...