基于原生HTML+CSS+JavaScript实现的恋爱网页源码.zip资源-CSDN下载

共19个文件

css：4个

jpg：4个

html：2个

版权申诉

毕业设计

课程大作业

课程设计

HTML

88 浏览量 2024-01-09 20:00:21 上传评论收藏 4.4MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于原生HTML+CSS+JavaScript实现的恋爱网页源码.zip （19个子文件）

介绍.md 100B

res

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

<!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>  <nav> <div class="logo">朝暮清晨</div> <div> <div class="title">记录我们爱情时刻的网站 </div> </div> </nav>  <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>  <script> let audio = document.getElementById("audio"); console.log(audio) audio.play(); </script>  <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>

评论收藏

内容反馈

版权申诉