first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富强明主</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
position: relative;
}
</style>
</head>
<body>
</body>
<script>
var index = 0,
body = document.querySelector("body");
body.onclick = function(e) {
var x = e.x;
var y = e.y;
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var span = document.createElement("span")
span.innerText = Text[index];
span.style = `
position: absolute;
left: ${x}px;
top: ${y}px;
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
opacity: 1;
transition: all ease 1s;
`;
body.appendChild(span)
console.log(span);
setTimeout(() => {
span.style.top = (parseInt(span.style.top) - 150) + 'px'
span.style.opacity = 0
}, 100);
setTimeout(() => {
body.removeChild(span)
}, 1300);
index += 1
index >= 12 ? index = 0 : ''
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧菜单</title>
<style>
body,
html {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
}
.menu,
.core_page {
height: 100%;
position: fixed;
width: 100%;
left: 0;
top: 0;
transition: all ease 1s;
}
.menu {
left: -100%;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="menu" style="left: -100%">
菜单部分
<span>x</span>
</div>
<div class="core_page" style="left: 0%">
<div class="header">头部</div>
<div class="content">内容</div>
<div class="footer">底部</div>
</div>
</body>
<script>
var Menu = document.querySelector(".menu");
var corePage = document.querySelector(".core_page");
document.querySelector(".header").onclick = function () {
offMenu(100)
}
document.querySelector(".menu span").onclick = function () {
offMenu(-100)
}
function offMenu(offset) {
Menu.style.left =`${parseInt(Menu.style.left) + offset}%`;
corePage.style.left =`${parseInt(corePage.style.left) + offset}%`;
}
</script>
</html>

View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
position: relative;
overflow: hidden;
}
.zj {
position: fixed;
width: 100%;
height: 100%;
background: #000000b5;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.text {
width: 50%;
color: #807e7e;
padding: 20px;
background: #fff;
}
.text_title {
text-align: right;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="zj hidden">
<div class="text">
<div class="text_title">x</div>
<div class="text_content"></div>
</div>
</div>
</body>
<script>
// 1 红包超过屏幕最大高度后删除它
// 2 点击红包,随机给个金额
// 3 点击红包后,暂停红包的生成和移动
// [1,2,3,5,8,9]
var body = document.querySelector("body");
// 存放img红包的定时器的
var move = [];
var ZheZhao = document.querySelector(".zj");
var currentImg, created;
// 创建图片,并让图片移动起来
function CreatedImg() {
var img = document.createElement("img");
img.src = "hongbao.png";
// 随机产生图片在x轴的位置
var leftX = parseInt(Math.random() * body.clientWidth)
img.style = `
height: 50px;
position: absolute;
left: ${leftX <= 40 ? 0 : leftX - 40}px;
top: 0px;
`;
startMove(img)
// left: 防止图片的x轴产生负数从而导致图片跑到最左边看不见了
// 将图片放到body中
body.appendChild(img);
img.onclick = function() {
var zhekou = [1, 2, 3, 5, 8, 9];
currentImg = img;
// 点击后,切换图片地址,为 拆开后的红包图片
img.src = "chaikai.png";
// 让所有红包停止移动
move.forEach(v => clearInterval(v))
// 停止创建红包
clearInterval(created)
document.querySelector(".text_content").innerText = zhekou[parseInt(Math.random() * zhekou.length - 1)] + '折'
ZheZhao.className = "zj"
}
}
function startMove(img) {
// 将每个图片的独立的定时器保存到定时器数组中
move.push(
// 每隔100毫米让图片移动1px
setInterval(function() {
// 累加然后移动1px
var t = (parseInt(img.style.top) + 1);
// 如果图片已经超出最大高度那么删除img
if (t > (body.clientHeight + 50)) {
// try catch 捕捉错误的
try {
body.removeChild(img)
} catch (error) {}
} else {
// 将数值写入到标签上
img.style.top = t + 'px';
}
}, 10)
);
}
// 弹窗的关闭事件
document.querySelector(".text_title").onclick = function() {
// 获取已经被创建过但是被停止的红包的img
var StopImg = document.querySelectorAll("img");
// 让所有已经停止的红包重新开始运动
StopImg.forEach((v) => {
startMove(v)
})
// 创建新的红包
start()
body.removeChild(currentImg);
// 隐藏弹窗
ZheZhao.className = "zj hidden";
}
function start() {
created = setInterval(function() {
CreatedImg()
}, 1000)
}
start()
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul></ul>
</body>
<script>
var KeyList = ['js学习', '不想学js', 'html和js', 'java面向对象', 'mysql从删库到跑路', '数据查询-mysql'];
var SearchList = [];
var UserInput = document.querySelector("input");
UserInput.onchange = function () {
if (UserInput.value.length != 0) {
SearchList = []
KeyList.forEach((v, i) => {
if (v.indexOf(UserInput.value) > -1) {
var a = v.substr(v.indexOf(UserInput.value), UserInput.value.length)
SearchList.push(v.replace(a, `<span style="color:red;">${a}</span>`))
}
})
RenderLi()
} else {
document.querySelector("ul").innerHTML = "";
}
}
function RenderLi() {
document.querySelector("ul").innerHTML = "";
SearchList.forEach((v, i) => {
document.querySelector("ul").innerHTML += `
<li>${v}</li>
`;
})
}
</script>
</html>