當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript

發(fā)布時間：2023/12/10 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這是程序員表白系列中的100款網(wǎng)站表白之一，旨在讓任何人都能使用并創(chuàng)建自己的表白網(wǎng)站給心愛的人看。此波共有100個表白網(wǎng)站，可以任意修改和使用，很多人會希望向心愛的男孩女孩告白，生性靦腆的人即使那個TA站在眼前都不敢向前表白。說不出口的話就用短視頻告訴TA吧~制作一個表白網(wǎng)頁告訴TA你的心意,演示如下。

文章目錄

一、網(wǎng)頁介紹
一、網(wǎng)頁效果
二、代碼展示
- 1.HTML代碼
三、精彩專欄

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介：基于 HTML+CSS+JavaScript 制作七夕情人節(jié)表白網(wǎng)頁、生日祝福、七夕告白、求婚、浪漫愛情3D相冊、炫酷代碼 ,快來制作一款高端的表白網(wǎng)頁送(他/她)浪漫的告白,制作修改簡單,可自行更換背景音樂,文字和圖片即可使用

2.網(wǎng)頁編輯：任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。

一、網(wǎng)頁效果

二、代碼展示

1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>生日祝福網(wǎng)頁</title> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/garden.js"></script> <script src="js/functions.js"></script> </head> <body> <div id="mainDiv"> <div id="content"> <div id="code"> <span class="comments">親愛的寶貝：</span><br /> <span class="comments">在你生日到來之際，我將快樂的音符，作為禮物送給你，愿您擁有365個美麗的日子，衷心地祝福你，生日快樂！在此誠摯地獻上我的三個祝愿：一愿你身體健康；二愿你幸福快樂；三愿你萬事如意！</span><br /><br /> <span class="comments">送你一個生日蛋糕，祝你生日快樂！第一層，體貼！第二層，關(guān)懷！第三層，浪漫！第四層，溫馨！中間夾層，甜蜜！祝你天天都有一份好心情！</span><br /> <br><br> <span class="comments"><b class="bb">曉明 ★ boby</b></span> </div> <div id="loveHeart"> <canvas id="garden"></canvas> <div id="words"> <div id="messages"> <img src="images/zsr.png"> </div> <div id="loveu"> <img src="images/sr.png"> </div> </div> </div> </div> <div id="copyright"> <center> <audio id="main_audio" autoplay="autoplay" preload="auto" loop> <source src="http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3" type="audio/mpeg" /> <embed id="main_audio_ie8" hidden="true" autostart="true" height="0" width=0 loop="true" src="http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3" autoplay="autoplay" /> </audio>  <a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a> </div> </center> </div> </div> <script type="text/javascript">var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setHours(8);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if (!document.createElement('canvas').getContext) {var msg = document.createElement("div");msg.id = "errorMsg";msg.innerHTML = "您的瀏覽器已經(jīng)過時!請使用非IE瀏覽器進行預(yù)覽"; document.body.appendChild(msg);$("#code").css("display", "none")$("#copyright").css("position", "absolute");$("#copyright").css("bottom", "10px");document.execCommand("stop");} else {setTimeout(function () {startHeartAnimation();}, 5000);timeElapse(together);setInterval(function () {timeElapse(together);}, 500);adjustCodePosition();$("#code").typewriter();}</script> </div> </div> </body> </html>

三、精彩專欄

看到這里了就【點贊，關(guān)注，收藏】三連支持下吧，你的支持是我創(chuàng)作的動力。

總結(jié)

以上是生活随笔為你收集整理的情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Asp.Net Core + Docke
下一篇： gradle idea java ssm