day65作业
- 有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
<body>
<div id="app">
<p :style="{width:w,height:h,backgroundColor:bg}">{{ msg }}</p>
<button @click="fn('red')">红</button>
<button @click="fn('yellow')">黄</button>
<button @click="fn('blue')">蓝</button>
<button @click="fn('white')">取消</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'box',
w:'200px',
h:'200px',
bg:'red'
},
methods:{
fn(color){
this.bg = color
}
}
})
</script>
</body>
2.有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
<body>
<div id="app">
<button :style="{width:w,height:h,backgroundColor:c}" @click="changeColor">{{ wrap }}</button>
<p>点击的次数：{{ num }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
wrap: '我是wrap框，请点我!',
w:'200px',
h:'200px',
c:'white',
num: 0,
colorArr:['pink','green','cyan'],
},
methods:{
changeColor(){
let n = this.num += 1;
this.c = this.colorArr[n % 3];
}
}
})
</script>
</body>
- 图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
<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>
<body>
<div id="app">
<div class="box" @click="clickAction">
<div class="b1" :class="c1"></div>
<div class="b2" :class="c2"></div>
</div>
</div>
<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 += 1;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
// 利用定时器自动旋转图像
// setInterval(function () {
// app.clickAction();
// }, 500)
</script>
</body>
day65作业的更多相关文章
- （day65）作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- day65——day69
目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- SQLServer2005创建定时作业任务
SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...
- 使用T-SQL找出执行时间过长的作业
有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下: SELECT sj.name , ...
- T-SQL检查停止的复制作业代理，并启动
有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...
- Python09作业思路及源码：高级FTP服务器开发（仅供参考）
高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- 个人作业-week2：关于微软必应词典的案例分析
第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...
随机推荐
- 【JZOJ4811】排队
description analysis 堆\(+\)树上倍增 考虑后序遍历搞出\(dfs\)序,那么要填肯定是从\(dfs\)序开始填 把每个点是序里第几位看成优先级,用小根堆来维护当前空着的优先级 ...
- 最大流任务调度——hdu3572二分图建图
很简单的任务调度模板题 把一个工作完成一天的量当做是边 /* 任务调度问题最大流 因为两个任务之间是没有关系的,两天之间也是没有关系的 所以抽象成二分图 任务i在天数[si,ei]之间都连一条双向边, ...
- 安装rancher以及使用rancher倒入kubernetes集群和添加及管理集群
1.docker安装rancher [root@rancher ~]# docker run -d --name rancher --restart=unless-stopped -p : -p : ...
- js--判断当前环境是否为app环境
/** *判断是否是app环境 */ function getIsApp () { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/ ...
- js单线程
由于js是运行在单线程上的,所有浏览器单独开启一个线程来处理事件消息的轮询,避免阻塞js的执行.
- P1977 出租车拼车
P1977 出租车拼车 题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆 ...
- C#获取当前运行的源代码的文件名和当前源代码的行数的方法
在C#中记录日志时,为了以后查找错误或者跟踪的方便,最好能记录下出错的源代码的文件名和出错的源代码的行数. 这2个方法如下: /// <summary> /// 取得当前源 ...
- ideal的maven项目不小心remove module，如何找回
找回方式: ideal的最右侧有个maven projects 点开后点击“+”,也就是Add Maven Projects,寻找不小心remove modules 的 子项目的pom文件所在的位置, ...
- Maven Projects报错但对应的pom文件不报错解决方案
情景:dependencies中总有红波浪线报错,但是核对包名和路径,以及pom文件没有任何问题 项目可以正常运行,这种时候有强迫症的就不行了.... 解决方案是,根据波浪线提示的jar包,到pom文 ...
- 初识OpenCV-Python - 009: 图像梯度
本节学习找到图像的梯度和边界.只要用到的函数为: cv2.Sobel(), cv2.Scharr(), cv2.Laplacian() 1. Laplacian 和 Sobel的对比 import c ...