A作业（必做）
"""
1、按照上方 知识点总结 模块，总结今天所学知识点
2、有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
3、有一个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>
</head>
<body>
<div id="app">
<div :style="myStyle"></div>
<input type="button" value="red" v-on:click="R">
<input type="button" value="yellow" @click="Y">
<input type="button" value="blue" v-on:click="B">
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
myStyle:{
height:'200px',
'200px',
backgroundColor:'black',
}
},
methods: {
R(){
this.myStyle.backgroundColor='red'
},
Y(){
this.myStyle.backgroundColor='yellow'
},
B(){
this.myStyle.backgroundColor='blue'
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业</title>
</head>
<body>
<div id="app" @click="C">
<div :style="myStyle"></div>
</div>
<script src="../vue.js"></script>
<script>
let num = 0;
new Vue({
el: '#app',
data: {
myStyle: {
height: '200px',
'200px',
backgroundColor: 'pink',
}
},
methods: {
C() {
console.log(num);
if (num === 0) {
this.myStyle.backgroundColor = 'green';
}
if (num === 1) {
this.myStyle.backgroundColor = 'cyan';
}
if (num === 2) {
this.myStyle.backgroundColor = 'pink';
num = -1
}
num++
}
}
})
</script>
</body>
</html>
B作业（选做）
/课件/001.png)
"""
1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
2、可以将图编程自动旋转
"""
2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
#d0 {
height: 200px;
200px;
border-radius: 50%;
background-color: green;
overflow: hidden;
position: absolute;
transition: 3s ease-in;
/*transform: rotate(0deg);*/
animation: myrotate 5s linear infinite;
}
#d1 {
height: 100%;
50%;
background: red;
position: relative;
}
@keyframes myrotate {from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
</style>
</head>
<body>
<div id="app">
<div id="d0">
<div id="d1" :style="S" @click="A"></div>
</div>
</div>
<script>
</script>
</body>
</html>