项目效果
步骤1: 创建HTML结构
首先,我们需要创建一个HTML文件,并设置基本的结构。这包括声明,以及、和标签。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
</head>
<body>
<div class="box">
<span class="date one"></span>
<span class="time two"></span>
</div>
</body>
</html>
步骤2: 添加CSS样式
接下来,我们需要添加一些CSS样式来美化我们的电子时钟。在标签内添加
css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #111;
font-family: 'Arial', sans-serif;
}
.box {
width: 550px;
height: 70px;
background: linear-gradient(135deg, #74ABE3, #5563DE);
border-radius: 10px;
text-align: center;
font-size: 30px;
color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.date, .time {
display: inline-block;
}
.time {
font-weight: bold;
}
步骤3: 添加JavaScript功能
javascript
function updateTime() {
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const dates = date.getDate().toString().padStart(2, '0');
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const day = arr[date.getDay()];
one.innerHTML = `${year}年${month}月${dates}日 ${day}`;
two.innerHTML = getTime();
}
function getTime() {
const time = new Date();
const h = time.getHours().toString().padStart(2, '0');
const m = time.getMinutes().toString().padStart(2, '0');
const s = time.getSeconds().toString().padStart(2, '0');
return `${h}:${m}:${s}`;
}
updateTime(); // 初始更新时间
setInterval(updateTime, 1000);
结论
通过以上步骤,我们已经成功创建了一个简单的电子时钟网页。