前端做个生日快乐代码
时间: 2024-11-23 16:26:03 浏览: 3
基于HTML的生日快乐代码.zip
在前端展示一个简单的动态"Happy Birthday!"祝福,你可以使用HTML、CSS和JavaScript来制作。下面是一个基本的例子:
HTML部分:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="birthday-wish"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分 (styles.css):
```css
#birthday-wish {
font-size: 36px;
color: #ff0000; /* 鲜艳的红色 */
text-align: center;
animation: birthdayBounce 2s infinite;
}
@keyframes birthdayBounce {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
```
JavaScript部分 (script.js):
```javascript
window.onload = function() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth()+1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
var todayDate = mm + '/' + dd + '/' + yyyy;
if(todayDate == "12/25/" + yyyy) {
document.getElementById('birthday-wish').innerText = 'Happy Birthday!';
} else if(todayDate > "12/24/" + yyyy && todayDate < "12/27/" + yyyy) {
document.getElementById('birthday-wish').innerText = 'Merry Christmas!';
} else {
document.getElementById('birthday-wish').innerText = '常规问候';
}
};
```
这个例子会在页面加载时检查当前日期,如果今天是圣诞节(12月25日)或者圣诞前后的几天,会显示“Happy Birthday!”;其他时间则显示常规的问候。请注意,JavaScript部分需要放在`<script>`标签内并在DOM加载完毕后再执行。
阅读全文