帮我用html设计一个计时收费系统页面
时间: 2024-03-21 20:38:17 浏览: 17
好的,以下是一个简单的计时收费系统页面的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计时收费系统</title>
<style>
h1 {
text-align: center;
margin-top: 50px;
}
.timer {
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
margin-top: 50px;
}
.btn {
display: block;
margin: 0 auto;
font-size: 1.5em;
padding: 10px 20px;
background-color: #3F51B5;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 50px;
}
.btn:hover {
background-color: #303F9F;
}
</style>
</head>
<body>
<h1>计时收费系统</h1>
<div class="timer">00:00:00</div>
<button class="btn" id="start">开始计时</button>
<button class="btn" id="stop">停止计时</button>
<script>
var timer = document.querySelector('.timer');
var startBtn = document.querySelector('#start');
var stopBtn = document.querySelector('#stop');
var startTime, endTime, elapsedTime, interval;
var isRunning = false;
function padZero(num) {
return (num < 10 ? '0' : '') + num;
}
function updateTimer() {
var now = new Date().getTime();
elapsedTime = now - startTime;
var hours = Math.floor(elapsedTime / (1000 * 60 * 60));
var minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
timer.textContent = padZero(hours) + ':' + padZero(minutes) + ':' + padZero(seconds);
}
startBtn.addEventListener('click', function() {
if (!isRunning) {
startTime = new Date().getTime();
interval = setInterval(updateTimer, 1000);
isRunning = true;
}
});
stopBtn.addEventListener('click', function() {
if (isRunning) {
clearInterval(interval);
endTime = new Date().getTime();
elapsedTime = endTime - startTime;
alert('本次计时共计 ' + (elapsedTime / (1000 * 60)).toFixed(2) + ' 分钟,费用为 ' + (elapsedTime / (1000 * 60) * 0.1).toFixed(2) + ' 元');
isRunning = false;
}
});
</script>
</body>
</html>
```
这个页面包括一个标题、一个计时器和两个按钮:开始计时和停止计时。当用户点击开始计时按钮时,计时器将开始计时。当用户点击停止计时按钮时,计时器将停止计时并弹出一个提示框,显示本次计时的时间和费用。每分钟的费用为0.1元。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)