add second homework
This commit is contained in:
parent
505a03a925
commit
de93a64bb3
|
|
@ -0,0 +1,145 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: 'Times New Roman', Times, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url {
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 200px auto;
|
||||||
|
color: #c617c3
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100vw;
|
||||||
|
height: 5vh;
|
||||||
|
margin-bottom: auto;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tz {
|
||||||
|
display: flex;
|
||||||
|
width: 3vh;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1vw;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tz:hover {
|
||||||
|
transition: all 0.5s;
|
||||||
|
transform: scale(1.4, 1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside {
|
||||||
|
margin-right: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 95vh;
|
||||||
|
width: 15vw;
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 85vw;
|
||||||
|
height: 95vh;
|
||||||
|
flex: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside_con {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pole {
|
||||||
|
align-items: center;
|
||||||
|
width: 25vw;
|
||||||
|
height: 2vh;
|
||||||
|
border-radius: 7px;
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball {
|
||||||
|
animation: myball 2s;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
width: 1.5vh;
|
||||||
|
height: 1.5vh;
|
||||||
|
margin: auto 0.3vh;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #F56C6C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles {
|
||||||
|
flex: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 10vh;
|
||||||
|
height: 10vh;
|
||||||
|
margin: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #67C23A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin-left: 2vw;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.but {
|
||||||
|
width: 5vw;
|
||||||
|
height: 4vh;
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-width: 0px;
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.but:hover {
|
||||||
|
animation: buttons 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes myball {
|
||||||
|
0% {
|
||||||
|
background-color: #F56C6C;
|
||||||
|
margin-left: 0.3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
background-color: #E6A23C;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-color: #67C23A;
|
||||||
|
margin-left: 24vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes buttons {
|
||||||
|
0% {
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-color: #409EFF;
|
||||||
|
color: #ecf5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello 挑战网</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="index.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<img id="tz" src="https://picture-1300689095.file.myqcloud.com/2022/09/12/de75682879616.svg" alt="Tenzer"
|
||||||
|
title="tenzor.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="aside">
|
||||||
|
<nav>
|
||||||
|
<p class="aside_con" id="Home">Home</p>
|
||||||
|
<p class="aside_con" id="Messages">Messages</p>
|
||||||
|
<p class="aside_con" id="Gallery">Gallery</p>
|
||||||
|
<p class="aside_con" id="Settings">Settings</p>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="dis">
|
||||||
|
<div class="circles">
|
||||||
|
<div class="c1 circle"></div>
|
||||||
|
<div class="c2 circle"></div>
|
||||||
|
<div class="c3 circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pole">
|
||||||
|
<div class="ball"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<button class="but" onclick="change_color()">Change</button>
|
||||||
|
<button class="but" onclick="reset_color()">Reset</button>
|
||||||
|
<button class="but" onclick="animation_play()">Pause</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/popper.js@1"></script>
|
||||||
|
<script src="https://unpkg.com/tippy.js@5"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
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 sleep(sleepTime) {
|
||||||
|
var startTime = new Date().getTime();
|
||||||
|
while (true) if (new Date().getTime() - startTime > sleepTime) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
var mouse_on = false, text_html;
|
||||||
|
var change_time = 0;
|
||||||
|
|
||||||
|
function reset_color() {
|
||||||
|
set_color(1, "#F56C6C");
|
||||||
|
set_color(2, "#E6A23C");
|
||||||
|
set_color(3, "#67C23A");
|
||||||
|
change_time = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function change_color() {
|
||||||
|
change_time += 1;
|
||||||
|
if (change_time > 6) {
|
||||||
|
set_color(1, "random");
|
||||||
|
set_color(2, "random");
|
||||||
|
set_color(3, "random");
|
||||||
|
}
|
||||||
|
else if (change_time % 3 == 0) {
|
||||||
|
set_color(1, "#F56C6C");
|
||||||
|
set_color(2, "#E6A23C");
|
||||||
|
set_color(3, "#67C23A");
|
||||||
|
}
|
||||||
|
else if (change_time % 3 == 1) {
|
||||||
|
set_color(2, "#F56C6C");
|
||||||
|
set_color(3, "#E6A23C");
|
||||||
|
set_color(1, "#67C23A");
|
||||||
|
}
|
||||||
|
else if (change_time % 3 == 2) {
|
||||||
|
set_color(3, "#F56C6C");
|
||||||
|
set_color(1, "#E6A23C");
|
||||||
|
set_color(2, "#67C23A");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animation_play() {
|
||||||
|
state = $(".ball").css("animation-play-state");
|
||||||
|
if (state == "paused") $(".ball").css("animation-play-state", "running");
|
||||||
|
else $(".ball").css("animation-play-state", "paused");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".aside_con").hover(function () {
|
||||||
|
mouse_on = true;
|
||||||
|
text_html = $(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
function reset_size() {
|
||||||
|
mouse_on = false;
|
||||||
|
$(this).css("font-size", "16px");
|
||||||
|
text_html.css("color", "black");
|
||||||
|
}
|
||||||
|
|
||||||
|
function text_bigger() {
|
||||||
|
if (mouse_on === true) {
|
||||||
|
var text_size = parseFloat(text_html.css("font-size"));
|
||||||
|
if (text_size < 30) {
|
||||||
|
text_size += 0.1;
|
||||||
|
text_html.css("font-size", String(text_size) + "px");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function text_colorful() {
|
||||||
|
if (mouse_on === true) {
|
||||||
|
var text_size = parseFloat(text_html.css("font-size"));
|
||||||
|
if (text_size < 30) {
|
||||||
|
text_html.css("color", getRandomColor());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_color(id, color) {
|
||||||
|
if (color == "random") $(".c" + String(id)).css("background-color", getRandomColor());
|
||||||
|
else $(".c" + String(id)).css("background-color", color);
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(text_bigger, 10);
|
||||||
|
setInterval(text_colorful, 100);
|
||||||
|
|
||||||
|
$(window).resize(function () {
|
||||||
|
text_html = $(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
set_color(1, "#F56C6C");
|
||||||
|
set_color(2, "#E6A23C");
|
||||||
|
set_color(3, "#67C23A");
|
||||||
|
$(".aside_con").mouseleave(reset_size);
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
// tippy('.aside_con', {
|
||||||
|
// content: '点我点我',
|
||||||
|
// placement: 'right',
|
||||||
|
// distance: +30
|
||||||
|
// });
|
||||||
|
|
||||||
|
function debug_f(){
|
||||||
|
console.log($(".ball").offset().left>$(".c1").offset().left);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getItemColors (colorLevel) {
|
||||||
|
var colors= [];
|
||||||
|
//默认的最深颜色
|
||||||
|
var red = 134,green = 108, blue = 184;
|
||||||
|
//最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105
|
||||||
|
var maxRed = 105,maxGreen = 131,maxBlue = 55;
|
||||||
|
var level = colorLevel;
|
||||||
|
while(level--) {
|
||||||
|
colors.push( 'rgb('+red +','+green+','+blue+')');
|
||||||
|
red += parseInt(maxRed/colorLevel);
|
||||||
|
green += parseInt(maxGreen/colorLevel);
|
||||||
|
blue += parseInt(maxBlue/colorLevel);
|
||||||
|
}
|
||||||
|
return colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(debug_f, 100);
|
||||||
Loading…
Reference in New Issue