请用js写一个在layui表格内的动态时钟
时间: 2024-05-06 11:17:47 浏览: 98
JS动态时钟
首先,需要在layui表格中添加一个元素用于显示时钟,比如一个 `<span>` 元素,其 ID 为 `clock`。
然后,可以使用 JavaScript 的 `setInterval()` 方法来实现动态更新时钟。具体代码如下:
```js
// 获取指定 ID 的元素
var clock = document.getElementById("clock");
// 定义更新时钟的函数
function updateClock() {
var date = new Date(); // 获取当前时间
var hours = date.getHours(); // 获取小时数
var minutes = date.getMinutes(); // 获取分钟数
var seconds = date.getSeconds(); // 获取秒数
// 格式化时间,保证时、分、秒都是两位数
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
// 更新时钟显示
clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}
// 每秒钟更新一次时钟
setInterval(updateClock, 1000);
```
最后,将上述代码放在 layui 表格的 `done()` 回调函数中即可。
完整的代码示例:
```js
layui.use(['table'], function() {
var table = layui.table;
// 在表格中添加一个用于显示时钟的元素
table.render({
elem: '#demo',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:200},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:200},
{field:'experience', title:'积分', width:80},
{field:'score', title:'评分', width:80},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135},
// 在这个列中添加一个用于显示时钟的元素
{title:'当前时间', width:120, templet: '<span id="clock"></span>'}
]],
data: [{
"id": "10001",
"username": "李白",
"email": "libai@163.com",
"city": "杭州",
"sign": "人生若只如初见,何事秋风悲画扇。",
"experience": "116",
"score": "98",
"classify": "诗人",
"wealth": "1000"
}],
done: function() {
// 获取指定 ID 的元素
var clock = document.getElementById("clock");
// 定义更新时钟的函数
function updateClock() {
var date = new Date(); // 获取当前时间
var hours = date.getHours(); // 获取小时数
var minutes = date.getMinutes(); // 获取分钟数
var seconds = date.getSeconds(); // 获取秒数
// 格式化时间,保证时、分、秒都是两位数
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
// 更新时钟显示
clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}
// 每秒钟更新一次时钟
setInterval(updateClock, 1000);
}
});
});
```
阅读全文