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