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

最新推荐文章于 2024-05-05 08:03:48 发布

旧城空忆

最新推荐文章于 2024-05-05 08:03:48 发布

阅读量345

点赞数 9

分类专栏：网页设计文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_3200628753/article/details/126210553

版权

网页设计专栏收录该内容

644 篇文章 8 订阅

订阅专栏

这篇文章介绍了如何使用HTML、CSS和JavaScript创建定制化的表白网页，包括七夕情人节、生日祝福等场景，提供了详细的代码示例和编辑方法，适合编程爱好者和想表白者学习。

摘要由CSDN通过智能技术生成

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~



<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>生日祝福网页</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">送你一个生日蛋糕，祝你生日快乐！第一层，体贴！第二层，关怀！第三层，浪漫！第四层，温馨！中间夹层，甜蜜！祝你天天都有一份好心情！</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>
<!--音乐请替换上面两个地址 http://other.web.ra01.sycdn.kuwo.cn/resource/n3/47/55/72304795.mp3 -->
<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 = "您的浏览器已经过时!请使用非IE浏览器进行预览"; 
			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>

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

旧城空忆

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript

1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~三、精彩专栏看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。...
复制链接

扫一扫