2. Count down Timer: Pree 5 Session Over Video Massage
Count down Timer:
Left to Right Shrink
With:
Pree 5 Minutes Warning:
Session Over Massage:
Using:
Video
Implementation:
Post Edit Link:
https://draft.blogger.com/u/5/blog/post/edit/6772244115097260611/4618402791971783932
Post Shared Link:
https://web-tools-6gen.blogspot.com/2026/08/countdown-timer-00-days-000000-100_0559813367.html
Code:
html :
gs script :
<div style="width:350px;height:700px;">
<div id="countdownBox" style="max-width:700px;margin:auto;padding:15px;border:1px solid #ccc;border-radius:10px;background:#fff;font-family:Arial,sans-serif;">
<!-- Line 1 -->
<h3 style="text-align:center;margin:0 0 15px;">⏳ Countdown Timer</h3>
<!-- Line 2 -->
<div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;">
<input type="date" id="startDate">
<select id="day"></select>
<select id="hour"></select>
<select id="minute"></select>
<select id="second"></select>
</div><br>
<div id="timerDisplay" style="text-align:center;font-size:28px;font-weight:bold;color:#0F5E05;">
00 Days 00:00:00</div>
<!-- Line 3 -->
<div style="width:100%;height:28px;background:#ddd;border-radius:20px;overflow:hidden;">
<div id="countBar" style="width:100%;height:100%;background:#00c853;"></div></div>
<div id="percent" style="text-align:center;font-weight:bold;margin-top:8px;">
100%</div><br>
<!-- Line 4 -->
<div style="text-align:center;">
<button onclick="startCountdown()">▶ Start</button>
<button onclick="pauseCountdown()">⏸ Pause</button>
<button onclick="resetCountdown()">🔄 Reset</button></div>
<!-- Pre 5 Minutes Warning Popup -->
<div id="SomeTimePopup"
style="
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
border:3px solid #0F5E05;
border-radius:12px;
padding:10px;
text-align:center;
z-index:9999;
box-shadow:0 0 20px rgba(0,0,0,.4);
">
<h2 style="color:red;margin:0;">
⏰ Some Time to Over the Session!
</h2>
<video
autoplay
muted
loop
playsinline
controls
style="width:100%;max-width:350px;border-radius:8px;margin:10px 0;">
<source src="YOUR_VIDEO_LINK.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="closeSomeTimePopup()">OK</button>
</div>
<!-- Session Over Message -->
<div id="timeUpPopup"
style="
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
border:3px solid #0F5E05;
border-radius:12px;
padding:10px;
text-align:center;
z-index:9999;
box-shadow:0 0 20px rgba(0,0,0,.4);
">
<h2 style="color:red;margin:0;">
⏰ Time Up!
</h2>
<p style="color:green;font-size:18px;font-weight:bold;margin:15px 0 5px;">
Click on <b>"Reset"</b> Button
</p>
<p style="color:skyblue;font-size:18px;font-weight:bold;margin:5px 0 15px;">
and Click on <b>"Start"</b>
</p>
<video
autoplay
muted
loop
playsinline
controls
style="width:100%;max-width:350px;border-radius:8px;margin:10px 0;">
<source src="YOUR_VIDEO_LINK.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="closePopup()">OK</button>
</div>
</div>
<script>
// Grab elements
const day = document.getElementById("day");
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");
// Populate dropdowns
for (let i = 0; i <= 120; i++) {
day.innerHTML += `<option value="${i}">${i} Day</option>`;
}
for (let i = 0; i <= 23; i++) {
let value = String(i).padStart(2, "0");
hour.innerHTML += `<option value="${i}">${value} Hr</option>`;
}
for (let i = 0; i <= 59; i++) {
let value = String(i).padStart(2, "0");
minute.innerHTML += `<option value="${i}">${value} Min</option>`;
second.innerHTML += `<option value="${i}">${value} Sec</option>`;
}
// Variables
let totalSeconds = 0;
let remainingSeconds = 0;
let interval = null;
// Update display
function updateDisplay() {
let days = Math.floor(remainingSeconds / 86400);
let hours = Math.floor((remainingSeconds % 86400) / 3600);
let minutes = Math.floor((remainingSeconds % 3600) / 60);
let seconds = remainingSeconds % 60;
document.getElementById("timerDisplay").innerHTML =
String(days).padStart(2, "0") + " Days " +
String(hours).padStart(2, "0") + ":" +
String(minutes).padStart(2, "0") + ":" +
String(seconds).padStart(2, "0");
let percentage = totalSeconds ? (remainingSeconds / totalSeconds) * 100 : 100;
const bar = document.getElementById("countBar");
bar.style.width = percentage + "%";
bar.style.marginLeft = (100 - percentage) + "%";
document.getElementById("percent").innerHTML = percentage.toFixed(1) + "%";
if (percentage > 50) {
bar.style.background = "#00c853";
} else if (percentage > 20) {
bar.style.background = "#ffb300";
} else {
bar.style.background = "#d50000";
}
}
// Start countdown
function startCountdown() {
if (interval) return;
if (totalSeconds === 0) {
totalSeconds =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
remainingSeconds = totalSeconds;
updateDisplay();
}
interval = setInterval(function () {
if (remainingSeconds > 0) {
remainingSeconds--;
updateDisplay();
// Show "Some Time Popup" when 5 minutes left
if (remainingSeconds === 300) {
document.getElementById("SomeTimePopup").style.display = "block";
}
} else {
clearInterval(interval);
interval = null;
remainingSeconds = 0;
updateDisplay();
document.getElementById("timeUpPopup").style.display = "block";
}
}, 1000);
}
// Pause
function pauseCountdown() {
clearInterval(interval);
interval = null;
}
// Reset
function resetCountdown() {
clearInterval(interval);
interval = null;
totalSeconds =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
remainingSeconds = totalSeconds;
updateDisplay();
}
// Close popups
function closeSomeTimePopup() {
document.getElementById("SomeTimePopup").style.display = "none";
}
function closePopup() {
document.getElementById("timeUpPopup").style.display = "none";
}
// Countdown Timer Continue on reopen after minimizetion
/* ❌ Not working
let endTime = 0;
let interval = null;
function startCountdown() {
if (endTime === 0) {
let duration =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
endTime = Date.now() + duration * 1000;
}
interval = setInterval(updateDisplay, 1000);
}
function updateDisplay() {
remainingSeconds = Math.max(
0,
Math.floor((endTime - Date.now()) / 1000)
);
Not working ❌*/
// Update timer display here
if (remainingSeconds <= 0) {
clearInterval(interval);
interval = null;
document.getElementById("timeUpPopup").style.display = "block";
}
}
// Initialize
resetCountdown();
</script>
Comments
Post a Comment