程序猿的爱情记录网站模版｜情侣日记网页设计

介绍

我为我的女朋友制作了这个主页，目的是记录一些值得纪念的时刻。 如果需要，您可以复制和修改此模板作为送给女朋友或妻子的礼物。

Demo

Click here to review the website! ❤️

https://sylvanding.github.io/zdxlovedjx

代码仓库

GitHub：https://github.com/sylvanding/zdxlovedjx.git

gitee：https://gitee.com/sylvanding/zdxlovedjx.git

网站特色

日期记录

在你的网站页面顶部，你可以设置你认识对方、成为恋人的开始时间……然后它会显示最重要的事情发生了多长时间。

开始时间可以在 index.html 末尾的js脚本中设置:

// counttoconst date1 = new Date("06/03/2022");const date2 = new Date();const Difference_In_Time = date2.getTime()-date1.getTime();let Difference_In_Days = 0;if (Difference_In_Time>0)Difference_In_Days=Math.ceil(Difference_In_Time / (1000 * 3600 * 24));if (document.getElementById('state1')) {document.getElementById("state1").setAttribute("countTo",Difference_In_Days.toString());document.getElementById("state1").innerHTML=Difference_In_Days.toString();const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));if (!countUp.error) {countUp.start();} else {console.error(countUp.error);}}

Events Calendar

事件日历使用 js 插件和 css 样式来记录您日常生活中的一些重要事件。 您可以在 index.html 的末尾设置这些事件，格式如下：

// calendardocument.addEventListener('DOMContentLoaded', function () {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {plugins: ['interaction', 'dayGrid'],defaultDate: '2022-06',events: [{title: '第1次表白👩‍❤️‍👨',start: '2022-06-03'},{title: '第1次牵手🤝',start: '2022-06-06'}]});calendar.render();

Love Card

在 Love Card 中，您可以写下文字，尤其是真心话，告诉您心爱的人您有多爱他/她。 或者只是写下他/她的优点。

Records

最后，在主页的末尾，它允许您放置您和您的配偶之间的照片和相关故事。

网站模版来源

这份 Bootstrap5 网页模版主要由 Creative Tim 设计（You can find more information in Soft UI Design System Pro），Sylvan Ding 添加了关于爱情的内容，并修改了网页的布局。

My CSDN

❤️ Here is my CSDN blog! https://blog.csdn.net/IYXUAN

---

Wish you and your loved one happiness!