前端表白纪念日用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>
版权声明：本文为qq_55629923原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。