前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用

白鱼塘

已于 2023-03-06 09:11:46 修改

阅读量2.4k

点赞数 6

分类专栏：小玩意儿文章标签： js html css

于 2022-10-28 15:41:48 首次发布

本文链接：https://blog.csdn.net/qq_55629923/article/details/127572889

版权

小玩意儿专栏收录该内容

5 篇文章 2 订阅

订阅专栏

前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用页面如下：

代码：

<!DOCTYPE html>
<html>
	<head>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: pink;
			}
			.box{
				width: 120px;
				height:  120px;
				background: #ff0000;
				/* 使盒子旋转45度, 并设置边距 */
				transform: rotate(45deg);
				margin: 200px auto;
				animation: love 1s infinite;  /* 动画绑定 */
				box-shadow: 0 0 20px #ff5500;
			}
			/* 爱心形状绘制 */
			.box::before,
			.box::after{
				content: "";
				/* 给插入的盒子进行定位 */
				position: absolute;
				width: 120px;
				height: 120px;
				background: #ff0000;
				border-radius: 50%;
			}
			.box::before{
				left: -68px;
			}
			.box::after{
				top: -68px;
			}
			/* 动画绘制 */
			@keyframes love{
				0%{
					transform: rotate(45deg)scale(0.85);
				}
				50%{
					transform: rotate(45deg)scale(1);
				}
				100%{
					transform: rotate(45deg)scale(0.85);
				}
			}
			p{
				text-align: center;
				font-size: 30px;
				font-weight: 520;
				color: #ff0095;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<p id="h2"></p>
		<script>
			var h = document.getElementById(h2);//调取html中的输出对象
			//计时器方法一
			timeDifference(`2022/10/26 23:00:00`, ``, h2);//此处先调用一次防止出现刷页面后没有内容
			function a() {
				timeDifference(`2022/10/26 23:00:00`, ``, h2);
			}//设置好时间差函数的调用参数,封装函数便于定时器调用
			setInterval(a, 1000);//定时器设置每1000毫秒即1s执行一次a函数



			//@function 根据目标时间在当前时间的前后分别返回`距离XXX已过去XX天XX小时XX分XX秒`或`距离XXXX还有:XX天XX小时XX分XX秒`
			//@param  endT为目标时间,需按照字符串格式输入;endName为目标时间的名字,默认为`目标时间`;obj为在网页内的输出对象.
			//@return  true表示为目标时间为过去,false表示目标时间为未来

			function timeDifference(endT, endName = `2022/10/28`, obj) {
				var startTime = new Date().getTime();//引入当前时间戳
				var endTime = new Date(endT).getTime();//引入结束目标时间戳
				var secondDif = parseInt((endTime - startTime) / 1000);//计算真实时间差,单位s/秒
				if (secondDif < 0) {
					var secondDifference = -secondDif;
				} else {
					var secondDifference = secondDif;
				}//定义时间差为正
				var day = parseInt(secondDifference / 24 / 60 / 60);//计算出天数取整
				var hour = parseInt(secondDifference / 60 / 60) % 24;//计算出总小时数去掉达到一天24h的部分
				var minute = parseInt(secondDifference / 60) % 60;//计算出总分钟数去掉达到一小时60分钟的部分
				var second = secondDifference % 60;//总秒数去掉达到一分钟60秒的部分
				if (secondDif < 0) {
					obj.innerHTML = `我们认识已经${endName}<br><span>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒</span>`
					return false;
				} else {
					obj.innerHTML = `${endName}<br><span>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒</span>`
					return true;
				}//根据真实时间差选择输出语句.

			}
		</script>
	</body>
</html>