给伙计们分享一点有趣的东西

神丶青灵

已于 2022-09-04 23:00:50 修改

阅读量83

点赞数

文章标签：前端 javascript

于 2022-09-04 23:00:17 首次发布

本文链接：https://blog.csdn.net/weixin_52450408/article/details/126696095

版权

给伙计们分享一点有意思的东西（根据本人现在学会的知识写的一个小demo 大佬不要笑话哈！！！）

话不多说上成品图

两个页面

肯定已经有小伙伴问代码呢代码呢

好嘞马上奉上！！！

这个是第一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>情书</title>
		<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>
		<main id="main">
			<section id="content">
				<img id="clickC" src="img/xfeng.jpg""/>
				<p id=" colo"><i>To Dear qingling</i> </p>
			</section>
		</main>
	</body>
	<script src="index.js"></script>
</html>

附带上css

#content {
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#content p {
	font-size: 30px;
	font-weight: 800;
	transition: 1s;
	font-family: "Arial,Helvetica,sans-serif";
	cursor: default;
	transition: 5s;
}

#clickC:hover {
	transform: scale(1.1);
	transition: all .4s;
	cursor: pointer;
}

js部分

(() => {
	let click_cnt = 0;
	const $html = document.getElementsByTagName("html")[0];
	const $body = document.getElementsByTagName("body")[0];
	$html.onclick = (e) => {
		let $elem = document.createElement("b");
		let x = e.pageX;
		let y = e.pageY;
		let increase = 7;
		let anim;
		$elem.style.zIndex = 99999999;
		$elem.style.position = "absolute";
		$elem.style.userSelect = "none";
		$elem.style.left = x - 10 + "px";
		$elem.style.top = y - 20 + "px";
		clearInterval(anim);
		switch (++click_cnt) {
			case 1:
				$elem.style.color = "#D24D57";
				$elem.innerText = "❤青灵❤";
				break;
			case 2:
				$elem.innerText = "❤青灵❤";
				$elem.style.color = "#EB7347";
				break;
			case 3:
				$elem.style.color = "#FC9D99";
				$elem.innerText = "❤青灵❤";
				break;
			case 4:
				$elem.style.color = "#26A65B";
				$elem.innerText = "❤青灵❤";
				break;
			case 5:
				$elem.style.color = "#AEDD81";
				$elem.innerText = "❤青灵❤";
				break;
			case 6:
				$elem.style.color = "#00CCFF";
				$elem.innerText = "❤青灵❤";
				break;
			case 7:
				$elem.style.color = "#6495ed";
				$elem.innerText = "❤青灵❤";
				break;
			case 8:
				$elem.style.color = "#b0c4de";
				$elem.innerText = "❤青灵❤";
				break;
			case 9:
				$elem.style.color = "#b0929f";
				$elem.innerText = "❤青灵❤";
				break;
			case 10:
				$elem.style.color = "#D24D57";
				$elem.innerText = "❤青灵❤";
				break;
			case 11:
				$elem.style.color = "#D24D57";
				$elem.innerText = "❤青灵❤";
				break;
			default:
				$elem.style.color = "#EAF2D3";
				$elem.innerText = "❤青灵❤";
				return (click_cnt = 1);
		}
		$elem.style.select = "none";
		$elem.style.cursor = "default";
		$elem.style.fontSize = 15 + "px";
		setTimeout(() => {
			anim = setInterval(() => {
				if (++increase == 50) {
					clearInterval(anim);
					$body.removeChild($elem);
				}
				$elem.style.top = y - 20 - increase + "px";
				$elem.style.opacity = (120 - increase) / 100;
			}, 15);
		}, 10);
		$body.appendChild($elem);
	};
})();
//点击
let clickC = document.getElementById("clickC");
let colorC = document.getElementById("colo");
let i = 1;

clickC.onclick = () => {
	window.location.href = './letter/letter.html';
}
clickC.onmouseover = () => {
	colorC.style.color = "#ff007f";
	clearInterval(timer)
}


let timer = setInterval(function() {
	i++;
	if (i == 2) colorC.style.color = "#545a2d";
	if (i == 3) colorC.style.color = "#5f7d4c";
	if (i == 4) i = 1
}, 1000);

第二个页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>To Dear you</title>
	</head>
	<style>
		body {
			background: url(../img/bg1.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 100vh;
			width: 100vw;
			overflow: hidden;
			margin: 0;
		}

		#letter {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: relative;
		}

		#showStr {
			width: 75%;
			height: 60vh;
			font-size: 2rem;
			color: #cc1b5f;
			cursor: default;
			border: none;
			outline: none;
			background-color: #f5f2f2;
			border-radius: 20px;
			padding: 40px;
			opacity: 0.9;
			text-indent: 2em;
			overflow: auto;
			user-select: none;
			letter-spacing: 0.1em;
			margin-bottom: 50px;
			flex-grow: 1;
		}

		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		::-webkit-scrollbar {
			width: 8px;
			/*滚动条宽度*/
			height: 8px;
			/*滚动条高度*/
		}

		/*定义滚动条轨道 内阴影+圆角*/
		::-webkit-scrollbar-thumb {
			/* 滚动条 拖动条 */
			background-color: rgba(0, 0, 0, .2);
			border-radius: 6px;
		}

		::-webkit-scrollbar-track {
			/* 滚动条背景槽 */
			background-color: #eee;
			border-radius: 6px;
		}


		#head p {
			font-size: 36px;
			font-weight: 500;
			width: 300px;
			font-weight: 500;


		}

		#head img {
			margin: 0 44px;
		}

		#head {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		#gif {
			transform: translateY(100vh);
			bottom: 10vh;
			transition: all 0.8s;
			position: absolute;
			width: 60vw;
			height: 60vw;
			max-width: 300px;
			max-height: 300px;
		}
	</style>

	<body>
		<main id="letter">
			<section id="head">
				<img src="img/letter.jpg" width="12%" height="10%">
				<p>给的一封信： </p>
			</section>

			<div id="showStr"></div>

			<div style="display:none" id="string">
				我知道有的人爱而不得,有的人得而不惜。
				也知道遇见你不容易,错过了会很可惜。
				所以我想听从自己的内心。
				没见过你之前,我路过山，山不说话；路过海，海也不言语。
				繁花只为春天盛开。后来呀！我遇见了你。
				浮云抱着青山，绿树挠着它的痒，青山像在笑。
				浪潮从远处赶来和堤岸嬉戏。
				春有惊雷，夏有凉风，秋有棉雨，冬有落雪。
				就像我喜欢你，胜过人间无数。
				我喜欢你不是因为你的相貌，而是因为你在特殊的时间给了我特殊的感觉
				，或许我真的不会谈恋爱，也不是很会说话，但是我想和你在一起。
				我要的并不多，只不过希望当你需要我的时候，我刚好在你身边。
				我没喜欢过别人，你是第一个，我怕我做的不好，让你觉得，不过如此！
			</div>

			<img src="../img/gif.gif" width="60%" height="50%" id="gif">
			<audio autoplay="autoplay" loop="loop" preload="auto"
				src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">
			</audio>
		</main>
		<script type="text/javascript">
			var index = 0;
			let timer = null;
			var str = document.getElementById("string").innerHTML;

			function type() {
				if (index == str.length) {
					document.getElementById("gif").style.transform = `translateY(0)`;
					clearInterval(timer);
					index = 0;
					return
				}
				document.getElementById("showStr").innerText = str.substring(0, index++);

			}
			timer = setInterval(type, 16);
		</script>
	</body>

</html>

图片部分