在hbuilder页面显示动态时间的完整代码
时间: 2024-10-08 07:19:42 浏览: 29
在HBuilder(DCloud)中显示动态时间,你可以使用JavaScript来更新页面上的HTML元素,通常会结合`setInterval`函数来实时更新时间。以下是一个简单的例子,假设你想在一个`<span>`标签里显示当前时间:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="timeDisplay">点击获取当前时间</div>
<script src="https://cdn.bootcdn.net/ajax/libs/hbs.js/4.0.3/hbs.min.js"></script> <!-- 如果你还没有引入HBS模板引擎 -->
<script type="text/javascript">
// 获取时间函数
function updateTime() {
var currentTime = new Date();
var hours = currentTime.getHours(); // 小于12小时制
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var timeStr = hours + ':' + minutes + ':' + seconds; // 格式化时间字符串
document.getElementById("timeDisplay").innerHTML = timeStr; // 更新页面显示
}
// 每秒更新一次时间
setInterval(updateTime, 1000);
</script>
</body>
</html>
```
阅读全文