练习题

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <form action="" style="margin: 30px;">
  10.         <p @click="tag" :style="{width: w,height: h, backgroundColor: bgc }"></p>
  11.         <input type="button" value="红" @click="tag($event,'red')">
  12.         <input type="button" value="黄" @click="tag($event,'yellow')">
  13.         <input type="button" value="蓝" @click="tag($event,'blue')">
  14.     </form>
  15. </div>
  16. </body>
  17. <script src="js/vue.js"></script>
  18. <script>
  19.     new Vue({
  20.         el:'#app',
  21.         data:{
  22.             h: '200px',
  23.             w: '200px',
  24.             bgc: 'red'
  25.             },
  26.         methods:{
  27.             tag (a,b) {
  28.                 this.bgc = b
  29.             }
  30.         }
  31.     })
  32. </script>
  33. </html>

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <form action="#" style="margin: 30px;">
  10.         <p @click="tag" :style="{width: w,height: h, backgroundColor: bgc}"></p>
  11.     </form>
  12. </div>
  13. </body>
  14. <script src="js/vue.js"></script>
  15. <script>
  16.     let num = 0;
  17.     new Vue({
  18.         el:'#app',
  19.         data:{
  20.             h: '200px',
  21.             w: '200px',
  22.             bgc: 'yellow'
  23.             },
  24.         methods:{
  25.             tag () {
  26.                 num += 1;
  27.                 if (num==1){
  28.                     this.bgc = 'pink'
  29.                 }else {if (num==2){
  30.                     this.bgc = 'green'
  31.                 }else {
  32.                     this.bgc = 'cyan';
  33.                     num = 0
  34.                 }}
  35.             }
  36.         }
  37.     })
  38. </script>
  39. </html>

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <form action="" style="margin: 30px;">
  10.         <p @click="tag" :style="{width: w,height: h, background: bgc, borderRadius:rad}"></p>
  11.     </form>
  12. </div>
  13. </body>
  14. <script src="js/vue.js"></script>
  15. <script>
  16.     let num = 0;
  17.     let app = new Vue({
  18.         el:'#app',
  19.         data:{
  20.             h: '200px',
  21.             w: '200px',
  22.              //实现页面的过度（颜色）
  23.             bgc: 'linear-gradient(to top, red 50%, green 50%)',
  24.             rad: '50%'
  25.             },
  26.         methods:{
  27.             tag () {
  28.                 num += 1;
  29.                 if (num==1){
  30.                     // 控制方向
  31.                     this.bgc = 'linear-gradient(to top, red 50%, green 50%)'
  32.                 }else {if (num==2){
  33.                     this.bgc = 'linear-gradient(to left, red 50%, green 50%)'
  34.                 }else {if (num==3) {
  35.                     this.bgc = 'linear-gradient(to bottom,red  50%, green 50%)'
  36.                 }else {
  37.                     this.bgc = 'linear-gradient(to right, red 50%, green 50%)';
  38.                     num = 0
  39.                 }
  40.                 }}
  41.             }
  42.         }
  43.     });
  44.     function funcTest(){
  45.     // 按照指定的周期（以毫秒计）来调用函数
  46.     window.setInterval(app.tag,666);
  47. }
  48.     // 页面加载完直接调用 该方法
  49.     window.onload = funcTest;
  50. </script>
  51. </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. 02.万恶之源-python 运算符和编码

    一.流程控制语句if: 第一种语法: (最基本的语法) if 条件: 代码块/结果1 结果2 # 如果条件是真(True)执行结果为1,然后结果为2,如果条件为错(False), 直接结果2. 第二种 ...

  2. final、static、package、import，和内部类、代码块总结

    final: final是最终修饰符,可以修饰类.成员方法.变量 final修饰的类无法被继承 final修饰的方法无法被重写 final修饰的变量无法被再次赋值,变为了常量 final修饰的引用数据 ...

  3. java 上传MultipartFile和String post请求

    /** * POST Multipart Request * @Description: * @param requestUrl 请求url * @param requestText 请求参数 * @ ...

  4. 【左偏树】 [JLOI2015]城池攻占

    原来左偏树还可以打tag,get了 和线段树打tag一样,时不时Push_Down就好了 然后这里显然也是要先乘法后加法的 tag打上了之后还是其他一般左偏树差不多,有些细节注意一下 然后开 long ...

  5. android 使用现成做get请求

    //接受子线程发来的消息 Handler hanler = new Handler() { @Override public void handleMessage(Message msg) { // ...

  6. 跟我一起使用socket.io创建聊天应用

    安装express插件 新建index.js var app = require('express')(); var http = require('http').Server(app); app.g ...

  7. bzoj4144 Petrol

    题意:给你一张n个点m条边的带权无向图.其中由s个点是加油站.询问从x加油站到y加油站,油箱容量<=b,能否走到? n,m,q,s<=20W,b<=2e9. 标程: #include ...

  8. watchbog再升级，企业黄金修补期不断缩小，或面临蠕虫和恶意攻击

    概要 近日,阿里云安全团队发现wacthbo挖矿团伙[1]新增了CVE_2019_5475 的漏洞利用代码,并开始进行尝试性攻击.通过对CVE_2019_5475漏洞的生命周期进行分析后发现,漏洞批量 ...

  9. Python-线程(1)

    目录 什么是线程 进程与线程的区别 开启线程 为什么要使用线程 线程之间数据是共享的 什么是线程 线程与进程都是虚拟单位,目的是为了更好的描述某种事物 进程与线程的区别 进程:资源单位 线程:执行单位 ...

  10. Spring中的Junit

    Spring中的Junit package com.imooc.test.base; import org.junit.After; import org.junit.Before; import o ...