<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lover - index</title>
<link rel="stylesheet" href="/res/icon/iconfont.css">
<link rel="stylesheet" href="/res/css/style.css">
<link rel="stylesheet" href="/res/css/main.css">
<link rel="shortcut icon" href="/res/img/love.svg" type="image/x-icon">
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class="logo">朝暮清晨</div>
<div>
<div class="title">记录我们爱情时刻的网站 </div>
</div>
</nav>
<!-- HEADER -->
<header>
<div class="image-box">
<div class="card">
<img src="/res/img/1.jpg" alt="">
<p>眼里只有你</p>
</div>
<div class="card">
<img src="/res/img/2.jpg" alt="">
<p>怀里抱着你</p>
</div>
<div class="card">
<img src="/res/img/3.jpg" alt="">
<p>身边陪着你</p>
</div>
</div>
<div class="box">
<div class="lover">
<span>张乐晨</span>
<i class="iconfont icon-love"></i>
<span>曹 清</span>
</div>
<div class="content">
<p class="time"><span id="time">2021年11月7日16时52分</span><br>
从此刻开始，我们一起度过了</p>
<div id="year">年</div>
<div id="month">月</div>
<div id="day">日</div>
<div id="hour">小时</div>
<div id="minute">分钟</div>
<div id="second">秒</div>
</div>
</div>
</header>
<ul class="bg-love">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<audio id="audio" src="/res/audio/lian_ai_gao_ji.mp3" loop="loop"></audio>
<!-- audio -->
<script>
let audio = document.getElementById("audio");
console.log(audio)
audio.play();
</script>
<!-- time js -->
<script>
let dateStr = document.getElementById("time").textContent;
let year = document.getElementById("year");
let month = document.getElementById("month");
let day = document.getElementById("day");
let hour = document.getElementById("hour");
let minute = document.getElementById("minute");
let second = document.getElementById("second");
let id = setInterval(() => {
let data = calc_date(dateStr);
// console.log(data.second)
year.textContent = data.year + "年"
month.textContent = data.month + "月"
day.textContent = data.day + "日"
hour.textContent = data.hour + "小时"
minute.textContent = data.minute + "分钟"
second.textContent = data.second + "秒"
}, 1000)
function calc_date(dateStr) {
let regex = /(\d{4})年(\d{1,2})月(\d{1,2})日(\d{1,2})时(\d{1,2})分/;
let match = dateStr.match(regex);
let past = {
year: parseInt(match[1]),
month: parseInt(match[2]),
day: parseInt(match[3]),
hour: parseInt(match[4]),
minute: parseInt(match[5]),
second: "00"
}
let pastDate = new Date(past.year, past.month - 1, past.day, past.hour, past.minute, past.second);
let currentDate = new Date();
let ms = currentDate - pastDate;
let second = Math.floor(ms / 1000);
let minute = Math.floor(second / 60);
let hour = Math.floor(minute / 60);
let day = Math.floor(hour / 24);
let year = currentDate.getFullYear() - past.year;
let month = currentDate.getMonth() + 1 - past.month + 12 * year;
// console.log(year, month, day, hour, minute, second)
return {
year: year,
month: month,
day: day,
hour: hour,
minute: minute,
second: second
}
}
</script>
</body>
</html>
基于原生HTML+CSS+JavaScript实现的恋爱网页源码.zip
版权申诉
57 浏览量
2024-01-09
20:00:21
上传
评论
收藏 4.4MB ZIP 举报
基于原生HTML+CSS+JavaScript实现的恋爱网页源码.zip （19个子文件） 
介绍.md 100B
res js index.js 4KB audio lian_ai_gao_ji.mp3 3.55MB img 
2.jpg 126KB
love.svg 2KB 1.jpg 136KB audio.jpg 168KB 3.jpg 459KB css style.css 174B main.css 6KB index.css 3KB icon iconfont.ttf 3KB iconfont.css 872B iconfont.json 2KB iconfont.woff2 2KB iconfont.js 9KB iconfont.woff 2KB html 
main.html 5KB index.html 3KB资源评论
