用html写一个窗口风景动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>窗边风景动画</title><link rel="stylesheet" href="./style.css">
</head>
<body><!-- 窗户 --><div class="window-top" id="window-top"></div><div class="window-square" id="window-main"></div><!-- 窗框线 --><div class="inner-line-hz-one"></div><div class="inner-line-hz-two"></div><div class="inner-line-hz-three"></div><div class="inner-line-vt"></div><div class="floor-line"></div><!-- 植物 --><div class="plant-one"></div><div class="plant-two"></div><div class="plant-two-shadow"></div><div class="flower-blue-leaf"></div><div class="flower-blue-line"></div><div class="flower-blue-leaf-two"></div><div class="flower-blue-line-two"></div><div class="plant-shadow"></div><!-- 植物的茎 --><div class="root-one"></div><div class="root-two"></div><div class="root-three"></div><div class="root-four"></div><div class="root-five"></div><div class="root-six"></div><!-- 叶子 --><div class="main-leaf-one"></div><div class="main-leaf-two"></div><div class="main-leaf-three"></div><div class="main-leaf-four"></div><div class="main-leaf-five"></div><div class="main-leaf-six"></div><!-- 云彩 --><div class="cloud-one c"></div><div class="cloud-two c"></div><div class="cloud-three c"></div><div class="cloud-ball-one c"></div><div class="cloud-ball-two c"></div><div class="cloud-ball-three c"></div><div class="cloud-ball-four c"></div><div class="cloud-ball-five c"></div><div class="cloud-ball-six c"></div><!-- 灯 --><div class="lamp" id="light-switch"></div><div class="lamp-wire"></div><div class="lamp-shadow"></div><!-- 夜晚部分-星星 --><div class="star-one s"></div><div class="star-two s"></div><div class="star-three s"></div><div class="star-four s"></div><div class="star-five s"></div><div class="star-six s"></div><!-- 月亮 --><div class="moon"></div><div class="moon-crater"></div><!-- 灯光 --><div class="light-source"></div><!-- partial --><script src="./script.js"></script>
</body>
</html>

/* 根据 id 选择 */
const lamp = document.getElementById("light-switch");
const topWindow = document.getElementById("window-top");
const mainWindow = document.getElementById("window-main");/* css 选择 */
const lightSource = document.querySelector(".light-source");
const moon = document.querySelector(".moon");
const clouds = document.querySelectorAll(".c");
const stars = document.querySelectorAll(".s");/* 事件监听 */
lamp.addEventListener("click", () => {topWindow.classList.toggle("night");mainWindow.classList.toggle("night");clouds.forEach(c => c.classList.toggle("hide-cloud"));lightSource.classList.toggle("show-light");moon.classList.toggle("show-moon");stars.forEach(s => s.classList.toggle("show-star"));
});

/* 设置需要用的参数 */
:root {--page-background: #fef5e7;--light-purple: #adbdfc;/* 窗户部分用到的参数 */--window-top-height: 45;--window-top-width: 40;--window-day-background: #d6eaf8;--window-square-height: 40;--window-square-width: 40;--floor-line-height: 1;--floor-line-width: 80;--inner-line-vt-width: 62;/* 植物部分用到的参数 */--plant-one-height: 6;--plant-one-width: 9;--plant-two-shadow-height: .5;--plant-two-shadow-width: 4;--flower-blue-height: 6;--flower-blue-width: 3;--flower-blue-line-height: .2;--flower-blue-line-width: 5;--flower-two-blue-height: 7;--flower-two-blue-width: 4.5;--root-height: 10;--root-width: 33;/* 叶子部分需要的参数 */--main-leaf-height: 8;--main-leaf-width: 8;/* 云彩部分用到的参数 */--cloud-base-height: 8;--cloud-base-width: 17;--cloud-ball-height: 5;--cloud-ball-width: 5;/* 灯部分用到的参数 */--lamp-height: 15;--lamp-width: 19;--lamp-wire-height: 70;--lamp-wire-width: .1; /* 星星部分用到的参数 */--star-height: 1.2;--star-width: 1.2;/* 灯光部分需要的参数 */--light-source-height: 20;--light-source-width: 20;/* 月亮部分需要的参数 */--moon-height: 10;--moon-width: 10;
} /* 页面主体背景、位置 */
body {position: fixed;top: 55%;left: 50%;transform: translate(-50%, -50%);background: var(--page-background);
}/* 窗户 */
.window-square {height: calc(var(--window-square-height) * 1vmin);width: calc(var(--window-square-width) * 1vmin);background: var(--window-day-background);
}.window-top {height: calc(var(--window-top-height) * 1vmin);width: calc(var(--window-top-width) * 1vmin);border-radius: 50%;position: fixed;top: -55%;background: linear-gradient(to bottom, var(--window-day-background) 50%, transparent 50%);
}/* 窗框 + 地面 */
.floor-line {position: fixed;left: -45%;height: calc(var(--floor-line-height) / 3 * 1vmin);width: calc(var(--floor-line-width) * 1vmin);background: #AAA;border-radius: 1rem;
}.inner-line-hz-one,
.inner-line-hz-two,
.inner-line-hz-three,
.inner-line-vt {position: fixed;top: -5%;height: calc(var(--floor-line-height) / 6 * 1vmin);width: calc(var(--window-square-width) * 1vmin);background: #AAA;
}.inner-line-hz-one {top: 33%;
}.inner-line-hz-two {top: 70%;
}.inner-line-vt {top: 22.4%;left: -27%;transform: rotate(90deg);width: calc(var(--inner-line-vt-width) * 1vmin);
}/* 花盆 */
.plant-one {position: fixed;bottom: -1%;right: -8%;height: calc(var(--plant-one-height) * 1vmin);width: calc(var(--plant-one-width) * 1vmin);background: linear-gradient(to bottom, #000 6%, #ba4a00 12%);border-radius: 13%;clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}.plant-two {position: fixed;bottom: -5.2%;right: -12%;z-index: 999;height: calc(var(--plant-one-height) / 1.5 * 1vmin);width: calc(var(--plant-one-width) / 2 * 1vmin);background: linear-gradient(to bottom, #000 5%, #eb8fbb 10%);border-radius: 10%;clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}/* 花盆的阴影 */
.plant-two-shadow {height: calc(var(--plant-two-shadow-height) * 1vmin);width: calc(var(--plant-two-shadow-width) * 1vmin);background: #000;position: fixed;z-index: -1;bottom: -4.9%;right: -15%;border-radius: 50%;box-shadow: 0px 0px 1px 0px #000;
}/* 植物叶子 */
.flower-blue-leaf {position: fixed;height: calc(var(--flower-blue-height) * 1vmin);width: calc(var(--flower-blue-width) * 1vmin);background: #6e8ce9;border-radius: 95% 0;transform: rotate(185deg);border-left: 1px solid #111;border-right: 1px solid #111;bottom: 4.3%;right: -16%;
}.flower-blue-line {position: fixed;height: calc(var(--flower-blue-line-height) * 1vmin);width: calc(var(--flower-blue-line-width) * 1vmin);background: #333;bottom: 10%;right: -17.4%;transform: rotate(-63deg);
}.flower-blue-leaf-two {position: fixed;height: calc(var(--flower-two-blue-height) * 1vmin);width: calc(var(--flower-two-blue-width) * 1vmin);border-left: 1px solid #111;border-right: 1px solid #111;background: #6e8ce9;border-radius: 95% 0;transform: rotate(-48deg);bottom: 5.5%;right: -10%;
}.flower-blue-line-two {position: fixed;height: calc(var(--flower-blue-line-height) * 1vmin);width: calc(var(--flower-blue-line-width) * 1vmin);background: #333;bottom: 10%;right: -12%;transform: rotate(70deg);
}/* 植物的茎 */
.root-one {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) * 1vmin);top: 35%;right: -49%;z-index: 88;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 50% / calc(var(--root-height) / 6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;transform: rotate(-90deg);
}.root-two {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 1.9 * 1vmin);top: 59%;right: -2.8%;z-index: 88;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;transform: rotate(69deg);
}.root-two {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 1.9 * 1vmin);top: 59%;right: -2.8%;z-index: 88;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;transform: rotate(69deg);
}.root-three {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 1.5 * 1vmin);top: 45%;right: -8.1%;z-index: 88;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 14 * 1vmin) 0 0;transform: rotate(81deg);
}.root-four {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 2.7 * 1vmin);top: 17%;right: -19%;z-index: 80;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 8 * 1vmin) 0 0;transform: rotate(-85deg);
}.root-five {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 1.5 * 1vmin);top: 39%;right: -39.3%;z-index: 88;border: 1px solid #000;border-color: #000 transparent transparent transparent;border-radius: 50% / calc(var(--root-height) / 1.45 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;transform: rotate(-60deg);
}.root-six {position: fixed;height: calc(var(--root-height) * 1vmin);width: calc(var(--root-width) / 1.65 * 1vmin);top: 57%;right: -38%;z-index: 88;border: solid 1px #000;border-color: #000 transparent transparent transparent;border-radius: 50% / calc(var(--root-height) / 1.6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;transform: rotate(-60deg);
}/* 叶子 */
.main-leaf-one {position: fixed;top: 28%;right: 8%;z-index: 50;height: calc(var(--main-leaf-height) * 1vmin);width: calc(var(--main-leaf-width) * 1vmin);border-radius: 85% 5%;border-left: .5px solid #111;border-bottom: .5px solid #111;background: #4d8473;transform: rotate(93deg);
}.main-leaf-two {position: fixed;top: 48%;right: 8%;z-index: 50;height: calc(var(--main-leaf-height) * 1vmin);width: calc(var(--main-leaf-width) * 1vmin);border-radius: 85% 0%;border-left: 1px solid #111;border-bottom: 1px solid #111;background: #4d8473;transform: rotate(85deg);
}.main-leaf-three {position: fixed;top: 0%;right: -8.5%;z-index: 50;height: calc(var(--main-leaf-height) * 1.1 * 1vmin);width: calc(var(--main-leaf-width) * 1.3 * 1vmin);border-radius: 95% 10%;border-right: 1px solid #111;border-top: 1px solid #111;background: #4d8473;transform: rotate(-35deg);
}.main-leaf-four {position: fixed;top: 1%;right: -19%;z-index: 55;height: calc(var(--main-leaf-height) * 1.3 * 1vmin);width: calc(var(--main-leaf-width) * 1.2 * 1vmin);border-radius: 85% 5%;border-right: 1px solid #111;border-top: 1px solid #111;background: #4d8473;transform: rotate(-10deg);
}.main-leaf-five {position: fixed;top: 21%;right: -26%;z-index: 55;height: calc(var(--main-leaf-height) * 1.3 * 1vmin);width: calc(var(--main-leaf-width) * 1vmin);border-radius: 85% 5%;border-right: 1px solid #111;border-top: 1px solid #111;background: #4d8473;transform: rotate(18deg);
}.main-leaf-six {position: fixed;top: 46%;right: -30%;z-index: 55;height: calc(var(--main-leaf-height) / 1.2 * 1vmin);width: calc(var(--main-leaf-width) * 1.5 * 1vmin);border-radius: 95% 0%;border-right: 1px solid #111;border-top: 1px solid #111;background: #4d8473;transform: rotate(-8deg);
}/* 云彩 */
.cloud-one {height: calc(var(--cloud-base-height) / 1.2 * 1vmin);width: calc(var(--cloud-base-width) * 1vmin);position: fixed;top: 50%;left: 0%;border-radius: 50%;background: linear-gradient(to bottom, #fff 50%, transparent 50%);animation: cloud 4s infinite;
}.cloud-two {width: calc(var(--cloud-base-width) * 1vmin);height: calc(var(--cloud-base-height) / 1.3 * 1vmin);background: #fff;position: fixed;top: 0%;left: 0%;border-radius: 50%;background: linear-gradient(to bottom, #fff 50%, transparent 50%);animation: cloud 4s infinite;
}.cloud-three {width: calc(var(--cloud-base-width) * 1.1 * 1vmin);height: calc(var(--cloud-base-height) / 1.2 * 1vmin);position: fixed;top: -30%;right: 5%;border-radius: 50%;background: linear-gradient(to bottom, #fff 50%, transparent 50%);animation: cloud 4s infinite;
}.cloud-ball-one {position: fixed;height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: 48%;animation: cloud 4s infinite;
}.cloud-ball-two {position: fixed;height: calc(var(--cloud-ball-height) * 2 * 1vmin);width: calc(var(--cloud-ball-width) * 2 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: 45%;left: 10%;animation: cloud 4s infinite;
}.cloud-ball-three {position: fixed;height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);width: calc(var(--cloud-ball-width) * 1.3 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: -32%;left: 54%;animation: cloud 4s infinite;
}.cloud-ball-four {position: fixed;height: calc(var(--cloud-ball-height) * 2 * 1vmin);width: calc(var(--cloud-ball-width) * 2 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: -35%;left: 65%;animation: cloud 4s infinite;
}.cloud-ball-five {position: fixed;height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: -3%;left: 5%;animation: cloud 4s infinite;
}.cloud-ball-six {position: fixed;height: calc(var(--cloud-ball-height) * 2 * 1vmin);width: calc(var(--cloud-ball-width) * 2 * 1vmin);background: linear-gradient(to bottom, #fff 50%, transparent 50%);border-radius: 50%;z-index: 99;top: -5%;left: 15%;animation: cloud 4s infinite;
}@-webkit-keyframes cloud {0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}25% {-webkit-transform: translate(2px, 2px);transform: translate(2px, 2px);}50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}75% {-webkit-transform: translate(-1px, -1px);transform: translate(-1px, -1px);}100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
}@keyframes cloud {0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}25% {-webkit-transform: translate(2px, 2px);transform: translate(2px, 2px);}50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}75% {-webkit-transform: translate(-1px, -1px);transform: translate(-1px, -1px);}100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
}/* 灯 */
.lamp {position: fixed;height: calc(var(--lamp-height) * 1vmin);width: calc(var(--lamp-width) * 1vmin);top: -31%;right: -5%;z-index: 999;border-radius: 50%;background: linear-gradient(to bottom, #eb8fbb 42%, #000 43%, transparent 45%);
}.lamp:hover {/* 触碰到灯时，鼠标箭头会变成小手 */cursor: pointer;
}.lamp-wire {position: fixed;top: -206%;right: 18%;z-index: 9999;height: calc(var(--lamp-wire-height) * 1vmin);width: calc(var(--lamp-wire-width) * 1vmin);background: #444;
}.lamp-shadow {height: calc(var(--lamp-width) / 1.01 * 1vmin);width: calc(var(--plant-two-shadow-width) / 3.4 * 1vmin);background: #222;position: fixed;z-index: 100;top: -38%;right: 17.3%;border-radius: 90% 50%;transform: rotate(89deg);
}/* 夜晚部分的背景 */
.night {background: #120326;
}/* 切换时需要隐藏云部分 */
.hide-cloud {visibility: hidden;
}/* 星星 */
.star-one,
.star-two,
.star-three,
.star-four,
.star-five,
.star-six {position: fixed;height: calc(var(--star-height) * 1vmin);width: calc(var(--star-width) * 1vmin);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background: #fff;border: 1px solid #eee;/* 先隐藏，后面通过 js 使之显示出来 */visibility: hidden;
}.star-one {top: 50%;left: 60%;transform: rotate(45deg);animation: twinkle 2s infinite linear;
}.star-two {top: 60%;left: 20%;transform: rotate(80deg);animation: twinkle 4s infinite linear;
}.star-three {top: 10%;left: 40%;transform: rotate(20deg);animation: twinkle 2s infinite linear;
}.star-four {top: -40%;left: 60%;transform: rotate(45deg);animation: twinkle 1s infinite linear;
}.star-five {top: 30%;left: 20%;transform: rotate(45deg);animation: twinkle 3s infinite linear;
}.star-six {top: -10%;left: 80%;transform: rotate(45deg);animation: twinkle 1s infinite linear;
}@-webkit-keyframes twinkle {0% {opacity: 1;}25% {opacity: 0.3;}50% {opacity: 0.8;}75% {opacity: 0.5;}100% {opacity: 0.8;}
}@keyframes twinkle {0% {opacity: 1;}25% {opacity: 0.3;}50% {opacity: 0.8;}75% {opacity: 0.5;}100% {opacity: 0.8;}
}/* 灯光 */
.light-source {position: fixed;top: -65%;right: -28.5%;filter: brightness(105%);z-index: 100;height: calc(var(--light-source-height) * 1vmin);width: calc(var(--lamp-width) / 1.02 * 1vmin);border-bottom: calc(var(--light-source-height) * 2.32 * 1vmin) solid #f9e79f;opacity: 0.6;border-left: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;border-right: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;border-top: 0;visibility: hidden;animation: twinkle 10s infinite linear;
}.show-light,
.show-moon,
.show-star {visibility: visible !important;
} /* 月亮 */
.moon {height: calc(var(--moon-height) * 1vmin);width: calc(var(--moon-width) * 1vmin);position: fixed;background: linear-gradient(-45deg, #fff 40%, #eee 80%);border-radius: 50%;top: -33%;left: 13%;box-shadow: 0px 0px 5px 1px #fff;visibility: hidden;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/824897.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【OpenHarmony】XTS环境配置

【OpenHarmony】XTS环境配置

零、参考 1、xts测试环境配置&#xff1a;https://www.yuque.com/u25440504/ehvzki/ik2fso 2、Windows安装Python、pip、easy_install的方法&#xff1a;https://pythonjishu.com/bmxqeisbkzgrpnn/ 3、Python中easy_install 和 pip 的安装及使用&#xff1a; https://blog.c…
阅读更多...
Vision Pro 零基础教程：1.机器视觉概述

Vision Pro 零基础教程：1.机器视觉概述

文章目录 机器视觉简介机器视觉的发展历史机器视觉的结构组成机器视觉的应用工业相机分类1. 按传感器类型分类&#xff1a;2. 按分辨率分类&#xff1a;3. 按扫描方式分类&#xff1a;4. 按输出信号类型分类&#xff1a;5. 按应用领域分类&#xff1a;6. 按接口类型分类&#x…
阅读更多...
springSecurity-记住我(Remember me)

springSecurity-记住我(Remember me)

一.记住我概述 Remember me(记住我)记住我&#xff0c;当用户发起登录勾选了记住我&#xff0c;在一定的时间内再次登录就不用输入用户名和密码了&#xff0c;即使浏览器退出重新打开也是如此。 二.流程分析 在SpringSecurity中提供RememberMeAuthenticationFilter过滤器来实…
阅读更多...
day10 | 栈与队列 part-2 (Go) | 20 有效的括号、1047 删除字符串中的所有相邻重复项、150 逆波兰表达式求值

day10 | 栈与队列 part-2 (Go) | 20 有效的括号、1047 删除字符串中的所有相邻重复项、150 逆波兰表达式求值

今日任务 20 有效的括号 (题目: . - 力扣&#xff08;LeetCode&#xff09;)1047 删除字符串中的所有相邻重复项 (题目: . - 力扣&#xff08;LeetCode&#xff09;)150 逆波兰表达式求值 (题目: . - 力扣&#xff08;LeetCode&#xff09;) 20 有效的括号 题目: . - 力扣&…
阅读更多...
Redis入门到通过之解决Redis缓存击穿、缓存穿透、缓存雪崩

Redis入门到通过之解决Redis缓存击穿、缓存穿透、缓存雪崩

文章目录 ☃️缓存击穿❄️❄️解决方案一、使用锁来解决&#xff1a;❄️❄️解决方案二、逻辑过期方案❄️❄️解决方案三、永不过期 主动更新❄️❄️解决方案四、接口限流❄️❄️实战❄️❄️❄️利用互斥锁解决缓存击穿问题❄️❄️❄️利用逻辑过期解决缓存击穿问题 ☃️…
阅读更多...
Python-VBA函数之旅-float函数

Python-VBA函数之旅-float函数

目录 1、float函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、相关文章&#xff1a; 个人主页&#xff1a;https://blog.csdn.net/ygb_1024?spm1010.2135.3001.5421 float函数在 Python 中的实际应用场景非常广泛&#xff0c;几乎涉及到任何需要处理…
阅读更多...
人才测评的方法有哪些？

人才测评的方法有哪些？

人才测评是企业在筛选人才的时候必然会使用的策略&#xff0c;为了节省企业HR在招聘时的成本&#xff0c;又极大提高了人才和岗位的匹配度&#xff0c;从企业发展和员工个人发展来看&#xff0c;起到了双赢的作用&#xff0c;在线人才测评是现代企业招聘&#xff0c;人才选拔&a…
阅读更多...
递归、搜索与回溯算法——二叉树的深搜

递归、搜索与回溯算法——二叉树的深搜

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享分治递归、搜索与回溯算法中关于二叉树的深搜的专题 如果有不足的或者错误的请您指出! 目录 1.计算布尔值的二叉树1.1解析1.2题解 2.求根节点到叶子节点数字之和2.1解析2.2题解…
阅读更多...
【漏洞复现】泛微E-Office jx2_config 存在信息泄露漏洞

【漏洞复现】泛微E-Office jx2_config 存在信息泄露漏洞

0x01 阅读须知 “如棠安全的技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供…
阅读更多...
超声波洗眼镜机有用吗？哪些洗眼镜值得入？超声波洗眼镜好不好用

超声波洗眼镜机有用吗？哪些洗眼镜值得入？超声波洗眼镜好不好用

在日常生活中&#xff0c;眼镜不仅是视力不佳者的重要辅助工具&#xff0c;更是时尚搭配的一部分。然而&#xff0c;长时间佩戴眼镜会不可避免地积累各种污垢和细菌&#xff0c;从油脂、指纹到灰尘等&#xff0c;这些不仅影响视觉效果&#xff0c;更有可能对眼部健康造成潜在威…
阅读更多...
云服务器安装Mysql、MariaDB、Redis、tomcat、nginx

云服务器安装Mysql、MariaDB、Redis、tomcat、nginx

前置工作 进入根目录 cd / 都在/usr/local/src文件夹&#xff09; 上传压缩包 rz 压缩包 Mysql 1.下载并安装MySQL官方的 Yum Repository wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum…
阅读更多...
黑马程序员——mysql——day05——反射、注解、动态代理

黑马程序员——mysql——day05——反射、注解、动态代理

目录&#xff1a; 类的加载 目标讲解 类的加载过程类的加载机制小结类加载器 目标讲解 类加载器的作用类加载器的分类&#xff1a;获取类加载器的方式小结双亲委派机制 目标讲解 3种类加载器的关系双亲委派机制小结反射:概述 目标讲解 反射反射技术的应用案例&#xff1a;反射…
阅读更多...
Python实现exe小工具

Python实现exe小工具

1、实例代码 import tkinter as tk from tkinter import messagebox from tkinter import ttk import requestsdef submit():input_text entry.get()if len(input_text) 0:messagebox.showinfo("提示", "请输入您所要提问的问题&#xff01;")returnsel…
阅读更多...
Python 数据结构和算法实用指南（一）

Python 数据结构和算法实用指南（一）

原文&#xff1a;zh.annas-archive.org/md5/66ae3d5970b9b38c5ad770b42fec806d 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 数据结构和算法是信息技术和计算机科学工程学习中最重要的核心学科之一。本书旨在提供数据结构和算法的深入知识&#xff0c;以及编程…
阅读更多...
uniapp之消除图片的空白占用空间

uniapp之消除图片的空白占用空间

我们在使用uniapp开发的过程中一定会遇到一个情况就是我们加载的图片总有一点空白出现在不该出现的地方代码如下 <view style"background:#ff0000;"><image style"width:100%;"src"https://t7.baidu.com/it/u1819248061,230866778&fm19…
阅读更多...
HarmonyOS真机调试页面运行卡顿/黑屏解决方法，亲测有效

HarmonyOS真机调试页面运行卡顿/黑屏解决方法，亲测有效

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 用mate40等发行时间相对较早但系统是HarmonyOS4.0的真机调试 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 程序点击容易卡顿或黑屏 原因分析&#xff1a; CPU兼容问题导致屏幕…
阅读更多...
[Collection与数据结构] 二叉树(三):二叉树精选OJ例题(下)

[Collection与数据结构] 二叉树(三):二叉树精选OJ例题(下)

1.二叉树的分层遍历 OJ链接 上面这道题是分层式的层序遍历,每一层有哪些结点都很明确,我们先想一想普通的层序遍历怎么做 /*** 层序遍历* param root*/public void levelOrder1(Node root){Queue<Node> queue new LinkedList<>();queue.offer(root);while (!qu…
阅读更多...
Resilience中的RateLimiter

Resilience中的RateLimiter

Resilience中的RateLimiter 一、RateLimiter&#xff08;限流&#xff09;1.常见的限流算法漏桶算法&#xff08;Leaky Bucket&#xff09;令牌桶算法&#xff08;Token Bucket&#xff09;——Spring cloud 默认使用该算法滚动时间窗口&#xff08;tumbling time window&#…
阅读更多...
项目7-音乐播放器4+喜欢/收藏音乐

项目7-音乐播放器4+喜欢/收藏音乐

1.喜欢/收藏音乐模块设计 1.1 请求响应模块设计 请求&#xff1a; { post, /lovemusic/likeMusic data: id//音乐id } 响应&#xff1a; { "status": 0, "message": "点赞音乐成功", "da…
阅读更多...
FPGA - ZYNQ 基于EMIO的PS和PL交互

FPGA - ZYNQ 基于EMIO的PS和PL交互

前言&#xff1a; Xilinx ZYNQ系列的芯片&#xff0c;GPIO分为 MIO 、EMIO、AXI_GPIO三种方式。 MIO &#xff1a;固定管脚&#xff0c;属于PS端&#xff0c;也就是ARM端。 EMIO &#xff1a;通过PL扩展&#xff0c;使用时需要分配PL(FPGA)管脚&#xff0c;消耗PL端资源。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站