使用CSS,HTML,JS制作点击“显示当前系统时间”按钮显示当前时间
时间: 2024-01-06 17:06:14 浏览: 33
以下是一个简单的示例代码,可以使用 CSS、HTML 和 JS 实现点击按钮显示当前系统时间的功能:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示当前系统时间</title>
<style type="text/css">
#time {
font-size: 24px;
text-align: center;
margin-top: 30px;
}
</style>
</head>
<body>
<button onclick="showTime()">显示当前系统时间</button>
<div id="time"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
#time {
font-size: 24px;
text-align: center;
margin-top: 30px;
}
```
JS 代码(存储在 script.js 文件中):
```javascript
function showTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (hour < 10) {
hour = "0" + hour;
}
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
var time = hour + ":" + minute + ":" + second;
document.getElementById("time").innerHTML = time;
}
```
点击“显示当前系统时间”按钮后,会调用 showTime() 函数获取当前时间并显示在页面上。CSS 代码用于设置显示时间的样式。