add third homework
This commit is contained in:
parent
de93a64bb3
commit
b248a8f99a
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello 挑战网</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./src/index.css">
|
||||||
|
<link rel="stylesheet" href="./src/ backdrop.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app" class="container" v-cloak>
|
||||||
|
<div class="con">
|
||||||
|
<div class="left list">
|
||||||
|
<div id="leftlist" class="ll">
|
||||||
|
<div v-for="(item,index) in list1" :key="item" :style="{'color':item.color}" @click="move_right(index)"
|
||||||
|
class="card">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right list">
|
||||||
|
<div id="rightlist" class="ll">
|
||||||
|
<div v-for="(item,index) in list2" :key="item" :style="{'color':item.color}" @click="move_left(index)"
|
||||||
|
class="card">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input type="text" class="ti" @click="change_color()">
|
||||||
|
<div class="buts">
|
||||||
|
<button class="add_left but" @click="add_left()">ADD LEFT</button>
|
||||||
|
<button class="add_right but" @click="add_right()">ADD RIGHT</button>
|
||||||
|
</div>
|
||||||
|
<div class="buts">
|
||||||
|
<button class="move_left but" @click="move_right()">MOVE TO RIGHT</button>
|
||||||
|
<button class="move_right but" @click="move_left()">MOVE TO LEFT</button>
|
||||||
|
</div>
|
||||||
|
<div class="buts">
|
||||||
|
<button class="random_left but" @click="random_left()">RANDOM LEFT</button>
|
||||||
|
<button class="random_right but" @click="random_right()">RANDOM RIGHT</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="./src/ani.js"></script>
|
||||||
|
<script src="./src/jquery-3.6.1.min.js"></script>
|
||||||
|
<script src="./src/popper.min.js"></script>
|
||||||
|
<script src="./src/tippy-bundle.iife.min.js"></script>
|
||||||
|
<script src="./src/vue.min.js"></script>
|
||||||
|
<script src="./src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import autoAnimate from './auto-animate.min.js'
|
||||||
|
|
||||||
|
autoAnimate(document.getElementById('leftlist'))
|
||||||
|
autoAnimate(document.getElementById('rightlist'))
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
.tippy-tooltip[data-placement^=top]>.tippy-backdrop{transform-origin:0 25%;border-radius:40% 40% 0 0}.tippy-tooltip[data-placement^=top]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-55%)}.tippy-tooltip[data-placement^=top]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%,-45%)}.tippy-tooltip[data-placement^=bottom]>.tippy-backdrop{transform-origin:0 -50%;border-radius:0 0 30% 30%}.tippy-tooltip[data-placement^=bottom]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-45%)}.tippy-tooltip[data-placement^=bottom]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%)}.tippy-tooltip[data-placement^=left]>.tippy-backdrop{transform-origin:50% 0;border-radius:50% 0 0 50%}.tippy-tooltip[data-placement^=left]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-tooltip[data-placement^=left]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-75%,-50%)}.tippy-tooltip[data-placement^=right]>.tippy-backdrop{transform-origin:-50% 0;border-radius:0 50% 50% 0}.tippy-tooltip[data-placement^=right]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-tooltip[data-placement^=right]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-25%,-50%)}.tippy-tooltip[data-animatefill]{background-color:transparent!important}.tippy-backdrop{position:absolute;background-color:#333;border-radius:50%;width:calc(110% + 32px);left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop[data-state=hidden]{opacity:0}.tippy-backdrop:after{content:"";float:left;padding-top:100%}.tippy-backdrop+.tippy-content{transition-property:opacity;will-change:opacity}.tippy-backdrop+.tippy-content[data-state=hidden]{opacity:0}
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
body {
|
||||||
|
background: linear-gradient(to right, #ffefba, #ffffff);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #d3d3d3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
width: 100vw;
|
||||||
|
height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 50vw;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
height: 30vh;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ti {
|
||||||
|
width: 60vw;
|
||||||
|
height: 5vh;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: large;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.but {
|
||||||
|
margin: 0 125px;
|
||||||
|
width: 200px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
|
||||||
|
background-size: 400%;
|
||||||
|
color: white;
|
||||||
|
font-size: medium;
|
||||||
|
border-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.but:hover {
|
||||||
|
animation: but_color 8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes but_color {
|
||||||
|
100% {
|
||||||
|
background-position: -400% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buts {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ll {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40vw;
|
||||||
|
height: 50vh;
|
||||||
|
list-style: none;
|
||||||
|
border-width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 18vw;
|
||||||
|
height: 5vh;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
margin: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftlist {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightlist {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,109 @@
|
||||||
|
function getRandomColor() {
|
||||||
|
var letters = '0123456789ABCDEF'.split('');
|
||||||
|
var color = '#';
|
||||||
|
for (var i = 0; i < 6; i++) {
|
||||||
|
color += letters[Math.floor(Math.random() * 16)];
|
||||||
|
}
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
function change_color() {
|
||||||
|
$(".ti").css("color", getRandomColor());
|
||||||
|
}
|
||||||
|
function shuffle(arr) {
|
||||||
|
var result = [],
|
||||||
|
random;
|
||||||
|
while (arr.length > 0) {
|
||||||
|
random = Math.floor(Math.random() * arr.length);
|
||||||
|
result.push(arr[random])
|
||||||
|
arr.splice(random, 1)
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
list1: [
|
||||||
|
{ name: "亿点", color: "black" },
|
||||||
|
{ name: "Luthics", color: "purple" },
|
||||||
|
{ name: "Yii", color: "#03a9f4" }
|
||||||
|
],
|
||||||
|
list2: [
|
||||||
|
{ name: "挑战", color: "black" },
|
||||||
|
{ name: "永无", color: "red" },
|
||||||
|
{ name: "止境", color: "blue" }
|
||||||
|
],
|
||||||
|
list_max: 8
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add_left: function () {
|
||||||
|
if (this.list1.length > this.list_max) return;
|
||||||
|
to_add = $(".ti").val();
|
||||||
|
if (!to_add.length) return;
|
||||||
|
color_Add = $(".ti").css("color");
|
||||||
|
this.list1.push({ name: to_add, color: color_Add });
|
||||||
|
$(".ti").val(null);
|
||||||
|
},
|
||||||
|
add_right: function () {
|
||||||
|
if (this.list2.length > this.list_max) return;
|
||||||
|
to_add = $(".ti").val();
|
||||||
|
if (!to_add.length) return;
|
||||||
|
color_Add = $(".ti").css("color");
|
||||||
|
this.list2.push({ name: to_add, color: color_Add });
|
||||||
|
$(".ti").val(null);
|
||||||
|
},
|
||||||
|
move_left: function (index = null) {
|
||||||
|
if (this.list2.length == 0) return;
|
||||||
|
if (this.list1.length > this.list_max) return;
|
||||||
|
if (index == null) index = this.list2.length - 1;
|
||||||
|
this.list1.push(this.list2[index]);
|
||||||
|
this.list2.splice(index, 1);
|
||||||
|
},
|
||||||
|
move_right: function (index = null) {
|
||||||
|
if (this.list1.length == 0) return;
|
||||||
|
if (this.list2.length > this.list_max) return;
|
||||||
|
if (index == null) index = this.list1.length - 1;
|
||||||
|
this.list2.push(this.list1[index]);
|
||||||
|
this.list1.splice(index, 1);
|
||||||
|
},
|
||||||
|
random_left: function () {
|
||||||
|
this.list1 = shuffle(this.list1);
|
||||||
|
},
|
||||||
|
random_right: function () {
|
||||||
|
this.list2 = shuffle(this.list2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tippy('.ti', {
|
||||||
|
content: '点击输入框给文本变个色',
|
||||||
|
placement: 'top'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.add_left', {
|
||||||
|
content: '点我把文本加入左面的列表',
|
||||||
|
placement: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.add_right', {
|
||||||
|
content: '点我把文本加入右面的列表',
|
||||||
|
placement: 'right'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.move_left', {
|
||||||
|
content: '点我把左面的列表的最后一项移到右面的列表',
|
||||||
|
placement: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.move_right', {
|
||||||
|
content: '点我把右面的列表的最后一项移到左面的列表',
|
||||||
|
placement: 'right'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.random_left', {
|
||||||
|
content: '点我随机排列左列表',
|
||||||
|
placement: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
tippy('.random_right', {
|
||||||
|
content: '点我随机排列右列表',
|
||||||
|
placement: 'right'
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue