<?php
if(isset($_POST['name'])){
if($_POST['name']=="20110101){
?>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王樱霓.我爱你</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript" src="canvas_bg.js"></script>
<script>
$(function() {
//开启弹框
function opendiv(){
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 1,
title: "2020倒计时",
anim: 2,
area: ['600px', '500px'],
content: $(".newYear"),
success: function(layero, index) {},
yes: function() {}
});
})
}
var isOpen=1;
var setInterval2=setInterval(function() {
if(new Date().getTime()-new Date("2020/1/2 00:00:00").getTime()>0){
isOpen=-1;
}
if(isOpen==1){
isOpen=0;
opendiv();
}else if(isOpen==-1){
return;
}
console.log((new Date("2020/1/1 00:00:00").getTime()-new Date().getTime())/1000)
$(".endSeconds").html(Math.ceil((new Date("2020/1/1 00:00:00").getTime()-new Date().getTime())/1000)+" 秒")
if(new Date("2020/1/1 00:00:00").getTime()-new Date().getTime()<=0){
$(".endTitle1").html("2020 年");
$(".endSeconds").html("祝你事事如意");
$(".endTitle2").show();
$(".newYear").css("background-image","url(img/gif011.gif)")
$(".newYear").append("<img src=\"img/love1.jpg\" alt=\"loveImg\" style=\"height: 280px;border: 10px solid rgba(255,255,205,0.7);\" />")
clearInterval(setInterval2);
}
})
var setInterval1=setInterval(function() {
let nTime = new Date();
dateDiff(nTime, "2019/08/15 0:0:0");
// console.log(formartDate(nTime));
// console.log("时间差：" + dTime);
}, 1000)
function dateDiff(nTime, sTime) {
leftTimer(2019,8,15,0,0,0)
};
/*格式化时间 */
function formartDate(mTime) {
var mYear = mTime.getFullYear();
var mMonth = mTime.getMonth() + 1;
var mDate = mTime.getDate();
var mHours = mTime.getHours();
var mMinutes = mTime.getMinutes();
var mSeconds = mTime.getSeconds();
if (mMinutes < 10) {
mMinutes = "0" + mMinutes
}
if (mSeconds < 10) {
mSeconds = "0" + mSeconds
}
return mYear + "-" + mMonth + "-" + mDate + " " + mHours + ":" + mMinutes + ":" + mSeconds;
}
/* 音乐点击 */
$(".musicBtn").on("click", function() {
if ($(".audio1").get(0).paused) {
$(".audio1").get(0).play();
$(".musicBtn i").addClass("layui-anim-loop")
} else {
$(".audio1").get(0).pause();
$(".musicBtn i").removeClass("layui-anim-loop")
}
})
})
function leftTimer(year,month,day,hour,minute,second){
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = Math.abs(days);
hours = Math.abs(hours);
minutes = Math.abs(minutes);
seconds = Math.abs(seconds);
setInterval("leftTimer(2019,8,15,0,0,0)",1000);
document.getElementById("dDays").innerHTML = "在一起 " + days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
</script>
<style>
* {
cursor: pointer;
}
body {
background-color: beige;
}
#div1 {
text-align: center;
position: relative;
top: 55px;
}
.loveName {
color: red;
font-weight: bold;
font-size: 55px;
height: 120px;
}
.lTime {
/* width: 35%; */
margin: 0 auto;
text-align: center;
font-size: 18px;
color: #0FCECE;
}
#author {
position: absolute;
right: 0px;
width: 100%;
text-align:center;
bottom: 16px;
text-align: center;
color: #eeeeee;
}
</style>
</head>
<body>
<canvas id="c" style="position: absolute;z-index: -1;text-align: center;"></canvas>
<div id="div1">
<div class="loveName"><img src="./img/dog2.jpg" style="width: 40px; height:40px;"> ❤ <img src="./img/dog1.jpg" style="width: 40px; height:40px;"></div>
<div id="loveTime" class="loveTime">
<div id="dDays" class="lTime"></div><br />
</div>
</div>
<!--button class="musicBtn ">
<i class="layui-icon layui-icon-headset layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 28px;position: fixed;left: 51px;top: 100px;"></i>
</button>
<audio autoplay="autoplay" loop class="audio1">
<source src="music/yuai.mp3" type="audio/mpeg">
</audio-->
<div class="newYear" style="font-size: 30px;color: #0FCECE;text-align: center;display: none">
<br />
<h2 class="endTitle1">距离2020年还剩余：</h2>
<br />
<h1 style="font-size: 88px;color: aqua;" class="endSeconds">50秒</h1>
<br />
<h2 class="endTitle2" style="font-size: 88px;color: red;display: none;">❤❤</h2>
<br />
</div>
<footer id="author">
<p>@LinYuting 天天想你</p>
</footer>
</body>
</html>
<?php
exit();
}else{
?>
<script>alert('错了！笨蛋子，进不去');</script>
<?php
}
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
</head><body>
<form method="post">
我们什么时候认识的：<input type="text" placeholder="8位数字，例如 20200202" name="name"><input type="submit" value="验证">
</form>
<div style="display:none;">
<img src="./img/dog2.jpg" style="width: 40px; height:40px;"> ❤ <img src="./img/dog1.jpg" style="width: 40px; height:40px;">
</div>
<footer id="author">
<p>王樱霓.我爱你 @LinYuting</p>
</footer>
</body></html>
<?php
exit();
?>
演示页面：http://王樱霓.我爱你
浙公网安备 33010602011771号