# 用JavaScript代码写一见钟情的表白情书
在数字化时代,用代码来表达爱意也是一种独特而有趣的方式。下面,我将用JavaScript代码为你写一封一见钟情的表白情书。这封情书会在网页上以动画的形式展现,希望它能传达你心中的那份情感。
### HTML结构
首先,我们需要一个简单的HTML结构来承载我们的JavaScript代码和动画效果。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一见钟情的表白情书</title>
<style>
body {
text-align: center;
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin-top: 50px;
}
#love-letter {
font-size: 24px;
color: #333;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="love-letter"></div>
<script src="love-letter.js"></script>
</body>
</html>
JavaScript代码
接下来是JavaScript部分。我们将使用setTimeout函数来逐步显示情书的内容,并添加一些简单的动画效果。
// love-letter.js
document.addEventListener('DOMContentLoaded', function() {
const loveLetter = document.getElementById('love-letter');
const message = "从那一刻起,你的笑容就刻在我的心间,我无法抗拒这份一见钟情的魔力。";
let index = 0;
function typeLetter() {
if (index < message.length) {
loveLetter.textContent += message.charAt(index);
index++;
setTimeout(typeLetter, 100); // 每个字母间隔100毫秒显示
}
}
typeLetter();
});
动画效果
为了使情书更具吸引力,我们可以为每个字母的添加添加一个简单的淡入动画。我们可以使用CSS来实现这一点。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#love-letter span {
animation: fadeIn 1s ease-out forwards;
opacity: 0;
margin-right: 5px;
}
完整代码
将上面的HTML和JavaScript代码合并,并添加CSS动画样式,你将得到一个简单的网页,它会在网页上逐字显示你的表白情书。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一见钟情的表白情书</title>
<style>
body {
text-align: center;
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin-top: 50px;
}
#love-letter {
font-size: 24px;
color: #333;
margin-top: 20px;
}
#love-letter span {
animation: fadeIn 1s ease-out forwards;
opacity: 0;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="love-letter"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loveLetter = document.getElementById('love-letter');
const message = "从那一刻起,你的笑容就刻在我的心间,我无法抗拒这份一见钟情的魔力。";
let index = 0;
function typeLetter() {
if (index < message.length) {
const letter = document.createElement('span');
letter.textContent = message.charAt(index);
loveLetter.appendChild(letter);
index++;
setTimeout(typeLetter, 100);
}
}
typeLetter();
});
</script>
</body>
</html>
当你运行这段代码时,一个充满爱意的情书将逐字出现在网页上,每个字母都会有一个淡入的动画效果,让你的表白更加温馨和特别。
