السلام عليكم,
لقد قمت بصنع عداد متطور قليلا باستخدام jquery, و لقد استغرق مني بعض الوقت لذلك أتمنى أن تستفيد منه:
هته بعض الصور التي توضحه:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<style>
:root {
--bgColor: #8D99AE;
--textColor: #EDF2F4;
--brColor: #2B2D42;
--btColor: #d80032;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Muli', sans-serif;
}
body>div {
background-color: var(--bgColor);
border: 6px solid var(--brColor);
color: var(--textColor);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 520px;
height: 520px;
box-sizing: border-box;
}
.timer {
display: flex;
flex-direction: column;
align-items: center;
}
.timer {
margin-bottom: 25px;
}
.res {
margin: 20px 0;
}
h2 {
font-weight: 900;
position: relative;
}
h2::before,
h2::after {
content: "";
background: var(--btColor);
width: 30px;
height: 5px;
border-radius: 4px;
position: absolute;
top: 50%;
}
h2::before {
transform: translateX(-40px) translateY(-50%);
}
h2::after {
transform: translateX(10px) translateY(-50%);
}
.button {
background: var(--btColor);
padding: 10px 25px;
cursor: pointer;
border: 2px solid #e7f2f4;
border-radius: 25px;
transition: all .25s;
}
.button:hover {
background: var(--textColor);
color: var(--btColor);
border-color: var(--btColor);
box-shadow: 0px 0px 10px var(--textColor);
}
.inputs input {
width: 40px;
font-family: inherit;
border-radius: 10px;
padding: 0 5px;
border: none;
margin-left: 10px;
font-weight: bold;
border: 1px solid transparent;
transition: all .35s;
}
.inputs input:focus {
outline: none;
border-color: var(--brColor);
}
.timer .res {
color: var(--brColor);
font-weight: 900;
}
.actions {
display: flex;
justify-content: space-around;
width: 100%;
}
.timer .actions .reset,
.timer .actions .pause,
.timer .actions .continue {
display: none;
}
</style>
</head>
<body>
<div>
<div class="timer">
<h2>Timer</h3>
<div class="inputs">
<input type="number" class="duration h" value="00" min="0" max="99">
<label>hours </label>
<input type="number" class="duration m" value="00" min="0" max="59">
<label>minutes </label>
<input type="number" class="duration s" value="00" min="0" max="59">
<label>seconds</label>
</div>
<div class="remaining res">
<span>00</span>h <span>00</span>min <span>00</span>s
</div>
<div class="actions">
<div class="button start">Start</div>
<div class="button toggle pause">Pause</div>
<div class="button reset">Reset</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script defer>
// Timer Part Start
// this line to prevent user from writing in number inputs
$("input.duration").keypress(e => {
e.preventDefault()
})
// when this ecent is occured the text of the remaining time changes
$(".timer .inputs input").change(function () {
$(".remaining span").eq($(this).index() / 2).text(($(this).val().length == 1) ? `0${$(this).val()}` : $(
this).val())
})
let isWorking = true
$(".timer .button.start").click(function () {
let vals = [Number($(".h").val()), Number($(".m").val()), Number($(".s").val())]
// if this satatement is true, the timer will began
if (vals.reduce((t, e) => e + t, 0) > 0) {
isWorking = true
$(".timer .button.toggle").addClass("pause").removeClass("continue").text("Pause")
$(this).hide("fast", function () {
$(this).siblings().show("fast")
})
$(".inputs input").prop("disabled", true)
// start of animation
let timerAn = setInterval(function () {
// reset button
$(".timer .button.reset").click(function () {
$(".remaining").html(`<span>00</span>h <span>00</span>min <span>00</span>s`)
stopTimer()
})
// this line write the remaining time in the dom and add a 0 to numbers from 0 to 9 to be like: 08 04 00...
$(".remaining").html(
`<span>${([vals[0]].toString().length == 1)? `0${vals[0]}` : vals[0]}</span>h <span>${([vals[1]].toString().length == 1)? `0${vals[1]}` : vals[1]}</span>min <span>${([vals[2]].toString().length == 1)? `0${vals[2]}` : vals[2]}</span>s`
)
// these if statement is for correct time progress
if (isWorking) {
if (vals[2] > 0)
vals[2] = vals[2] - 1
else {
if (vals[1] > 0)
[vals[2], vals[1]] = [59, vals[1] - 1]
else {
if (vals[0] > 0)
[vals[2], vals[1], vals[0]] = [59, 59, vals[0] - 1]
else {
// the timer has finished here
stopTimer()
}
}
}
}
// this line write the remaining time in the dom and add a 0 to numbers from 0 to 9 to be like: 08 04 00...
$(".remaining").html(
`<span>${([vals[0]].toString().length == 1)? `0${vals[0]}` : vals[0]}</span>h <span>${([vals[1]].toString().length == 1)? `0${vals[1]}` : vals[1]}</span>min <span>${([vals[2]].toString().length == 1)? `0${vals[2]}` : vals[2]}</span>s`
)
}, 1000)
// this function is called when the timer finishes or the user click reset button
function stopTimer() {
$(".timer .start").siblings().hide("fast", function () {
$(".timer .start").show("fast")
})
$(".inputs input").prop("disabled", false).val("00")
clearInterval(timerAn)
}
}
})
// Pause and Continue part
$(".timer .button.toggle").click(function () {
if ($(this).hasClass("pause")) {
isWorking = false
} else {
isWorking = true
}
$(this).toggleClass("continue pause").text(($(this).hasClass("pause")) ? "Pause" : "Continue")
})
</script>
</body>
</html>
إذا كان أي استفسار أو مشكل أنا في الخدمة.
تحياتي الحارة.
