简易动态页面HTML css js
时间: 2023-07-31 22:11:40 浏览: 46
好的,以下是一个简易的动态页面的HTML、CSS和JS代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>动态页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>动态页面示例</h1>
<p id="time"></p>
<button id="btn">点击我更新时间</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
#container {
margin: 0 auto;
text-align: center;
}
#time {
font-size: 24px;
margin-bottom: 20px;
}
button {
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: #008CBA;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #006B9F;
}
```
JS代码:
```
window.onload = function() {
var timeEl = document.getElementById("time");
var btnEl = document.getElementById("btn");
function updateTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
//加0操作
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var timeString = hours + ":" + minutes + ":" + seconds;
timeEl.innerHTML = timeString;
}
btnEl.onclick = function() {
updateTime();
}
updateTime();
setInterval(updateTime, 1000);
}
```
以上代码实现了一个带有动态时间更新效果的页面。当用户点击“点击我更新时间”按钮时,页面上的时间会更新。同时,页面上还包含了一些基本的CSS样式,使页面看起来更加美观。