day65-test
练习题
一、点击事件控制标签颜色
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的更多相关文章
- day65——day69
目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...
- day65 request对象,以及方法,response对象,render,redirect
这里的都是我们会频繁使用到的,用得多了自然就会了,我们写项目都是少不了这些用法的,所以这就把老师的博客粘过来就好了, Request对象 官方文档 属性 所有的属性应该被认为是只读的,除非另有说明. ...
- python 全栈开发，Day65(MySQL练习题,参考答案)
一.MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号.ps:针对的是自己的生物成绩比物理成绩高,再 ...
- python 全栈开发，Day65(索引)
索引 一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查找 三.常 ...
- DAY65
# 1.web应用# 2.CS和BS架构# 3.http协议# 特点: 1.接受请求正在处理# 2.请求处理完毕# 3.需要进行附加操作以完成请求# 4.服务器无法处理请求# 5.服务器处理请求出错# ...
- day65 Django模板语言
常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊的含 ...
- web应用与web框架（Day65）
Web应用 对于所有的web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 import socket def handle_request(client): ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- （day65）作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- day65—angularJS的学习笔记1
转行学开发,代码100天—2018-05-20 AngularJS的引用示例: <!DOCTYPE html> <html> <head> <title> ...
随机推荐
- C#实现语音
.net 4.0开始 Type type = Type.GetTypeFromProgID("SAPI.SpVoice"); dynamic spVoice = Activator ...
- 04_Mybatis输入\出映射
1. 输入映射 通过paramterType指定输入参数的类型,类型可以是简单类型.hashmap.pojo的包装类. 1.1 传递pojo的包装对象 1.需求 完成用户信息的综合查询,需要传 ...
- 深夜Python - 第2夜 - 爬行
深夜Python - 第2夜 - 爬行 我曾经幻想自己是一只蜗牛,有自己的一只小壳,不怕风,不怕雨,浪荡江湖,游历四方……夜猫兄一如既往地打断了我不切实际的幻想:“浪荡?游历?等你退休了都爬不出家门口 ...
- springcloud Eureka Finchley.RELEASE 版本
创建一个父项目cloud-demo pom.xml <?xml version="1.0" encoding="UTF-8"?> <proje ...
- 纵览轻量化卷积神经网络：SqueezeNet、MobileNet、ShuffleNet、Xception
近年提出的四个轻量化模型进行学习和对比,四个模型分别是:SqueezeNet.MobileNet.ShuffleNet.Xception. SqueezeNet https://arxiv.org/p ...
- Python全栈开发：pymysql
本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...
- 基于 RocketMQ 的同城双活架构在美菜网的挑战与实践
本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践. 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调 ...
- thinkphp Mongo模型
Mongo模型是专门为Mongo数据库驱动而支持的Model扩展,如果需要操作Mongo数据库的话,自定义的模型类必须继承Think\Model\MongoModel. Mongo模型为操作Mongo ...
- AnsiString, String, char，char
AnsiString 是一个类,String 是一个结构,char* 是一个指针 .String是Pascal的类型原型,因为C++中没有字符串数据类型的,因此使用char*来存储,char*必须是以 ...
- 洛谷P4550 【收集邮票】
题目链接: 神仙题QAQ 题目分析: 概率期望题是不可能会的,一辈子都不可能会的QAQ 这个题也太仙了 首先明确一下题意里面我感觉没太说清楚的地方,这里是抽到第\(i\)次要\(i\)元钱,不是抽到第 ...