'''
第一题：红黄蓝按钮变色
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style>
.box{
200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app">
<p> <button @click="fn('red')">红</button>
<button @click="fn('yellow')">黄</button>
<button @click="fn('blue')">蓝</button>
</p>
<div class="box" :style="{backgroundColor: color}"></div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
color : 'pink',
},
methods:{
fn(color){
this.color = color;
}
}
})
</script>
</html>
'''
第二题：200*200框颜色变化
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
200px;
height: 200px;
}
</style>
</head>
<body>
<div id='wrap'>
<div class='box' @click="ChangeColor" :style="{backgroundColor:color}"></div>
</div>
</body>
<script src='vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#wrap',
data:{
color:'yellow',
count:0,
colorarr:['pink','green','cyan']
},
methods:{
ChangeColor(){
let n = this.count++;
this.color = this.colorarr[n % this.colorarr.length];
}
}
})
</script>
</html>
'''
第三题:图片旋转
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业3</title>
<style>
.box {
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 {
100px;
height: 200px;
left: 0;
}
.r {
100px;
height: 200px;
right: 0;
}
.t {
200px;
height: 100px;
top: 0;
}
.b {
200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="clickAction">
<div class="b1" :class="c1"></div>
<div class="b2" :class="c2"></div>
</div>
</div>
</body>
<script src="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 ++;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
setInterval(function () {
app.clickAction();
}, 500)
</script>
</html>