html实现一行2个按钮布局并处理时间函数
时间: 2024-11-09 16:28:38 浏览: 8
在HTML中,你可以使用CSS的flexbox或者grid布局来创建一行两个按钮的布局。这里是一个简单的例子,同时利用JavaScript处理定时器功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
justify-content: space-between; /* 利用justify-content调整按钮间距 */
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<button onclick="startTimer()">启动计时器</button>
<button onclick="pauseTimer()">暂停计时器</button>
</div>
<script>
let timerId = null;
function startTimer() {
timerId = setInterval(function () {
console.log('秒数递增');
}, 1000); // 每隔1秒执行一次
}
function pauseTimer() {
clearInterval(timerId); // 清除已设置的定时器
timerId = null;
}
</script>
</body>
</html>
```
在这个示例中,`.container`使用了flexbox布局,两个按钮会被放在同一行上,且它们之间的间距由`justify-content: space-between;`控制。点击“启动计时器”按钮会每秒打印一条消息,而点击“暂停计时器”按钮则停止计时器。
阅读全文