Luthics
/
TiaoZhan_Homework
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add third homework

This commit is contained in:
Luthics 2022-10-17 23:38:20 +08:00
parent de93a64bb3
commit b248a8f99a
10 changed files with 283 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
3/index.html Normal file
View File

@ -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>

4
3/src/ani.js Normal file
View File

@ -0,0 +1,4 @@
import autoAnimate from './auto-animate.min.js'
autoAnimate(document.getElementById('leftlist'))
autoAnimate(document.getElementById('rightlist'))

1
3/src/auto-animate.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
3/src/backdrop.css Normal file
View File

@ -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}

96
3/src/index.css Normal file
View File

@ -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;
}

2
3/src/jquery-3.6.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

109
3/src/main.js Normal file
View File

@ -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'
});

5
3/src/popper.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
3/src/tippy-bundle.iife.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
3/src/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long