![图片[1]-致敬盲目的爱情-带爱心效果的单网页HTML源码-QQ沐编程](https://www.qqmu.com/wp-content/uploads/2024/11/mangmuaiqing.jpg)
页面功能 ✨
动态爱心效果
描述: 页面中央有一个不断飞舞的爱心文字“💗QQ沐编程，爱你哟💗”，每个字都像被赋予了生命一样，在空中自由飘动。
特点: 每个爱心的颜色随机变化，营造出梦幻般的效果。
实时时间显示
描述: 页面右下角会实时显示当前的时间，精确到秒。
特点: 时间每秒钟更新一次，让你随时掌握时间的脚步。
自定义名字
描述: 你可以通过输入框更改页面中央的文字内容，比如改为“💗你的名字，爱你哟💗”。
特点: 输入后点击“更新名字”按钮即可立即生效，让页面更加个性化。
🔧 使用说明 🔧
打开页面
操作: 直接在浏览器中打开保存的 .html 文件或在线访问链接。
效果: 页面加载完成后，你会看到动态的爱心效果和实时的时间显示。
更改名字
步骤:
1.在页面下方找到输入框，输入你想显示的名字。
2.点击旁边的“更新名字”按钮。
效果: 页面中央的文字会立即更新为你输入的内容，形成新的爱心祝福语。
体验互动
提示: 尝试右键点击页面、复制文本或拖动元素，你会发现这些操作都被巧妙地禁用了。
效果: 这些限制确保了页面的独特性和完整性，同时也增加了趣味性。
💡 小贴士 💡
分享给朋友: 把这个页面保存下来，或者将链接分享给你的朋友们，让他们也能感受到这份特别的情感。
定制背景: 如果你喜欢，可以尝试修改 body 标签中的背景颜色或其他样式，让它更加符合你的喜好。
更多好看的HTML源码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站
源码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>💗 爱你 💗 我亲爱的QQ沐编程 💗</title>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
background: #000;
color: white;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
user-select: none; /* Prevent text selection */
}
canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#controls {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 10;
}
#nameDisplay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 64px; /* Increased font size */
color: #ea80b0;
z-index: 10;
white-space: nowrap; /* Ensure the text stays in one line */
}
#timeDisplay {
position: absolute;
bottom: 20px;
right: 10px;
font-size: 24px;
color: #ffffff;
}
#developerInfo {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 16px;
color: #999999;
z-index: 10;
}
input[type="text"] {
padding: 10px;
font-size: 18px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="pinkboard"></canvas>
<canvas id="canvas"></canvas>
<div id="nameDisplay">💗QQ沐编程，爱你哟💗</div>
<div id="timeDisplay">加载中...</div>
<div id="controls">
<label for="loverNameInput">请输入小可爱的名字:</label>
<input type="text" id="loverNameInput" placeholder="小可爱的名字">
<button onclick="updateLoverName()">更新名字</button>
</div>
<div id="developerInfo">Designed by Nong Wenlong</div>
<script>
var loverName = "💗QQ沐编程，爱你哟💗";
const colors = [
"#eec996", "#8fb7d3", "#b7d4c6", "#c3bedd", "#f1d5e4", "#cae1d3",
"#f3c89d", "#d0b0c3", "#819d53", "#c99294", "#cec884", "#ff8e70",
"#e0a111", "#fffdf6", "#cbd7ac", "#e8c6c0", "#dc9898", "#ecc8ba"
];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ww = window.innerWidth;
var wh = window.innerHeight;
function init() {
requestAnimationFrame(render);
canvas.width = ww;
canvas.height = wh;
}
function Heart(x, y) {
this.x = x;
this.y = y;
this.opacity = Math.random() * 0.5 + 0.5;
this.vel = {
x: (Math.random() - 0.5) * 4,
y: (Math.random() - 0.5) * 4,
};
this.targetScale = Math.random() * 0.15 + 0.02;
this.scale = this.targetScale * Math.random();
}
Heart.prototype.update = function () {
this.x += this.vel.x;
this.y += this.vel.y;
this.scale += (this.targetScale - this.scale) * 0.01;
if (this.x > ww || this.x < 0) {
this.scale = 0;
this.x = Math.random() * ww;
}
if (this.y > wh || this.y < 0) {
this.scale = 0;
this.y = Math.random() * wh;
}
};
Heart.prototype.draw = function () {
ctx.globalAlpha = this.opacity;
ctx.font = `${180 * this.scale}px "微软雅黑"`;
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillText(
loverName,
this.x - 200 * this.scale,
this.y - 100 * this.scale,
400 * this.scale,
200 * this.scale
);
};
var hearts = [];
function createHearts(count) {
for (var i = 0; i < count; i++) {
hearts.push(new Heart(Math.random() * ww, Math.random() * wh));
}
}
function render() {
ctx.clearRect(0, 0, ww, wh);
for (var i = 0; i < hearts.length; i++) {
hearts[i].update();
hearts[i].draw();
}
requestAnimationFrame(render);
}
init();
createHearts(100);
window.addEventListener("resize", function () {
ww = window.innerWidth;
wh = window.innerHeight;
canvas.width = ww;
canvas.height = wh;
});
// Function to update the displayed name
function updateLoverName() {
var inputName = document.getElementById('loverNameInput').value.trim();
if (inputName) {
loverName = "💗" + inputName + "，爱你哟💗";
document.getElementById('nameDisplay').innerText = loverName;
} else {
alert("请输入有效的名字！");
}
}
// Update the time display every second
function updateTimeDisplay() {
var now = new Date();
var hours = String(now.getHours()).padStart(2, '0');
var minutes = String(now.getMinutes()).padStart(2, '0');
var seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('timeDisplay').innerText = hours + ":" + minutes + ":" + seconds;
}
// Initial call to set the time immediately
updateTimeDisplay();
// Set interval to update time every second
setInterval(updateTimeDisplay, 1000);
// Disable right-click context menu
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// Disable copy and paste
document.addEventListener('copy', function(e) {
e.preventDefault();
});
document.addEventListener('paste', function(e) {
e.preventDefault();
});
// Disable dragging of elements
document.addEventListener('dragstart', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
