<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="mom">
<div><p>20</p></div>
<div><p>工作5分钟</p></div>
<div><p>休息15分钟</p></div>
<div><p>零食20分钟</p></div>
<div><p>午饭事件</p></div>
<div><input type="text" placeholder="请输入分钟" id="inputMinutes"></div>
</div>
<div class="box2">
<span id="time">时间</span>
</div>
<div class="box3">
<span>休息回来努力工作时间</span>
<span id="time1"></span>
</div>
<script>
var timer;
function startTimer(minutes) {
var totalSeconds = minutes * 60;
var display = document.getElementById('time');
var display1 =document.getElementById('time1')
clearInterval(timer);
timer = setInterval(function() {
var minutesRemaining = Math.floor(totalSeconds / 60);
var secondsRemaining = totalSeconds % 60;
display.textContent = minutesRemaining + '分' + secondsRemaining + '秒';
display1.textContent = minutesRemaining + '分' + secondsRemaining + '秒';
if (totalSeconds <= 0) {
clearInterval(timer);
display1.textContent = '倒计时结束';
return;
}
totalSeconds--;
}, 1000);
}
var divElements = document.querySelectorAll('.mom div');
for (var i = 0; i < divElements.length - 1; i++) {
divElements[i].addEventListener('click', function() {
var minutesText = this.querySelector('p').textContent;
var minutes = parseInt(minutesText.match(/\d+/)[0]);
startTimer(minutes);
});
}
document.getElementById('inputMinutes').addEventListener('input', function() {
var minutes = parseInt(this.value);
startTimer(minutes);
});
</script>
<style>
body{
background-color:rgb(70,147,219) ;
}
.mom{
display: flex;
width: 100%;
}
.mom div{
cursor: pointer;
background-color: rgb(58,120,182);
flex: 6;
border-bottom: 1px solid rgb(53,97,141);
transition: background-color 0.1s ease-in;
}
.mom p{
color: white;
text-align: center;
}
.mom div:hover{
background-color: rgb(47,104,159);
}
.mom input{
width: 100%;
height: 90%;
}
.box2{
margin-top: 10rem;
height: 45%;
width: 100%;
}
.box3{
justify-content: center;
align-items: center;
display: flex;
margin-top: 2rem;
}
.box2 span{
font-size: 15rem;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
.box3 span{
font-size: 2rem;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</html>
简单的html倒计时
最新推荐文章于 2024-02-29 16:32:05 发布