Create a countdown time like the shown below - javascript

I am trying to create a countdown timer like in the image but I am not able to do it correctly. Could you please help me create this timer please?
I tried to create the timer but couldn't. I am not able to add the labels like Days, Hourse, Minutes, and seconds in the code outside of the black background so it looks like the above image. here is the code I created:
// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes, and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Add leading zeros to values less than 10
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
// Display the result in the element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdownText").innerHTML = "EXPIRED";
} else {
document.getElementById("countdownText").innerHTML = "";
}
}, 1000);
<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
</div>
</div>
<div style="color: black; font-weight: bold; text-align: center; margin-left: -650px;">
<span id="countdownText"></span>
</div>

This piece of your code could look like this:
days = days.toString().padStart(1, "0");
Your complete code is on CodeSandbox:
https://codesandbox.io/s/reverent-pond-c9m38x?file=/index.html
Hope this helps you.

I did some modification to your code and also added colon between div as per design you gave.
// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes, and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Add leading zeros to values less than 10
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
// Display the result in the element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdownText").innerHTML = "EXPIRED";
} else {
document.getElementById("countdownText").innerHTML = "<h2 style='margin:0px 25px;'>days</h2><h2 style='margin:0px 25px;'>hours</h2><h2 style='margin:0px 20px;'>minutes</h2><h2 style='margin:0px 20px;'>seconds</h2>";
}
}, 1000);
<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
</div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="color: black; font-weight: bold; text-align: center; border:2px solid yellow">
<span id="countdownText" style="display:flex; gap:5; color:black">
</span>
</div>

Related

Preventing CSS animation from restarting each time JS setInterval runs

I'm trying to add an intro animation to a timer using JS, but it seems to restart each time the function with a setinterval runs. The function updates the timer every second. This is my script:
function updateTimer(){
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
The script will show timer on the following HTML code:
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>
And the animation that im trying to apply has the following keyframes:
#keyframes timerSlideUp{
0%{
opacity: 0%; animation-delay: 5s;
}
100%{
opacity: 100%;
}
}
With the decorative CSS:
#timer{
color: white;
padding: 20px;
text-align: center;
}
#timer div{
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
animation: timerSlideUp 5s forwards;
}
I haven't tried anything because I don't know at all how I could get around or fix this.
I'm trying to make the timer to fade in and stay in place (thus the "forwards" in the "animation" property). I'm planning to also add other animations in the future, so these restarts make it impossible.
Thanks in advance!
Move the animation up into the parent element and set animation-iteration-count to 1
I set a background: blue on the body as the white color didn't show anything when running the snippet
function updateTimer() {
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
body {
background: blue;
}
#keyframes timerSlideUp {
0% {
opacity: 0%;
animation-delay: 5s;
}
100% {
opacity: 100%;
}
}
#timer {
color: white;
padding: 20px;
text-align: center;
animation: timerSlideUp 5s forwards 1;
}
#timer div {
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
}
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>

Implied eval. Consider passing a function instead of a string? [duplicate]

This question already has answers here:
How to eliminate error: "Implied eval is evil"
(5 answers)
How to change a settimeout into a function instead of a string
(2 answers)
Closed 10 months ago.
apologies for asking this when I've seen other threads where it was asked (similarly) but I"m not understanding the recommendations in previous posts. I'm very inexperienced with javascript and muddle through it here and there. Any help would be greatly appreciated.
I'm trying to create a countdown timer to a specific date. Locally the counter seems fine and it runs but upon going onto a dev environment is the an error:
"Implied eval. Consider passing a function instead of a string"
Here is the code I'm using:
function updateTimer() {
future = Date.parse("aug 24, 2022 01:30:00");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
document.getElementById("timer")
.innerHTML =
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + d + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">DAYS</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + h + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">HOURS</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + m + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">MINUTES</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + s + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">SECONDS</span></div>';
}
setInterval('updateTimer()', 1000);
The error is on the last line.
Thank you in advance

Countdown CSS visual formatting

I am trying to match the format in the image below.
Here is the code I have now: https://codepen.io/Brite1/pen/wvPrggj (looks like I just need to add spacing and center all numbers/text). I am not sure how to add spacing and how to center all text and numbers correctly. Please help, thanks!
body {
align-items: center;
background-color: transparent;
display: flex;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time{
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font{
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
Use a wrapper and remove flex from the body. After removing the flex property from body add it in the wrapper and then use text-align to center the text.
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour, 0, 0, 0);
return resultDate;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: transparent;
}
.wrapper {
display: flex;
gap: 10%;
align-items: center;
justify-content: center;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
span {
text-align: center;
}
<div class="wrapper">
<span style="margin-right: 20px;">
<span id="circle-days" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-hours" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-minutes" class="circle-time"></span>
</span>
<span id="circle-seconds" class="circle-time"></span> <span id="timer"></span>
</div>
You can use a flex container, and set the elements to be the same size with flex: 1 0 150px, which reads flex-grow: 1, flex-shrink: 0, flex-basis: 150px. You can use the width of your liking, but you'll get the idea.
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour, 0, 0, 0);
return resultDate;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
body {
align-items: center;
background-color: transparent;
display: flex;
}
.flex-wrapper {
display: flex;
min-width: 600px;
}
.flex-wrapper>span {
flex: 1 0 150px;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
<div class="flex-wrapper">
<span id="circle-days" class="circle-time">00</span>
<span id="circle-hours" class="circle-time">00</span>
<span id="circle-minutes" class="circle-time">00</span>
<span id="circle-seconds" class="circle-time">00</span>
<span id="timer"></span>
</div>
See live example here.

How can I toggle back and forth to Two Different CountDown Timer using JS

I hope you are doing great. I want to toggle back and forth b/w "Time left to my birthday" Countdown Timer and "Time left to my New Year" Count down timer using onclick button method. The code works perfectly fine. All I need is when I click on the button "Time left to my birthday" the timer should be changed and vice versa. Is there any way that I can achieve this functionality?. Your help is always appreciated. Here is my code
const newYears = "18 Aug 2022";
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formate(hours);
minsEl.innerHTML = formate(minutes);
secsEl.innerHTML = formate(seconds);
}
function formate(time) {
if (time < 10) {
return (`0${time}`);
} else {
return time
}
}
countdown()
setInterval(countdown, 1000)
* {
box-sizing: border-box;
text-transform: capitalize;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-weight: normal;
font-size: 2.5rem;
margin-top: -8rem;
}
.countdown-container {
display: flex;
}
.big-text {
font-weight: bold;
font-size: 4rem;
line-height: 1;
margin: 0 1.5rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 0.8rem;
}
.button {
top: 2rem;
display: inline-block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
background: linear-gradient(#4d4d4d, #2f2f2f);
border-radius: 5px;
border: 1px solid black;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
color: white !important;
font-size: 1.2em;
cursor: pointer;
/* Important part */
position: relative;
transition: padding-right 0.3s ease-out;
}
<h1>Time left To My next Birthday </h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="minutes">0</p>
<span>minutes</span>
</div>
<div class="countdown-el sec-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<button class="button" onclick="">Time left to new year</button>
For that you could use an additional var for the toggle state (here birthday) and one for the processed_date and assign the date (birthday or next year) to it:
const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";
let birthday = true;
let processed_date = nextBirthday;
...
function countdown() {
const newYearsDate = new Date(processed_date);
...
}
In the event handler you only need to toggle processed_date and the textContent of the heading and the button depending on the toggle state and invert the toggle state after that:
toggle_button.addEventListener('click', function() {
processed_date = birthday ? newYear : nextBirthday;
heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
toggle_button.querySelector('span').textContent = birthday ? 'my birthday' : 'new year';
birthday = !birthday;
});
Working example: (smaller and without negative margin for demonstration)
const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";
let processed_date = nextBirthday;
let birthday = true;
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
const heading = document.querySelector('h1');
const toggle_button = document.querySelector("button");
function countdown() {
const newYearsDate = new Date(processed_date);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formate(hours);
minsEl.innerHTML = formate(minutes);
secsEl.innerHTML = formate(seconds);
}
function formate(time) {
if (time < 10) {
return (`0${time}`);
} else {
return time
}
}
toggle_button.addEventListener('click', function() {
processed_date = birthday ? newYear : nextBirthday;
heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
toggle_button.querySelector('span').textContent = birthday ? 'my next birthday' : 'new year';
birthday = !birthday;
countdown(); //not necessary - only for imidiate change instead of waiting 1 second
});
countdown();
setInterval(countdown, 1000);
* {
box-sizing: border-box;
text-transform: capitalize;
font-size: 10px;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-weight: normal;
font-size: 2.5rem;
}
.countdown-container {
display: flex;
}
.big-text {
font-weight: bold;
font-size: 4rem;
line-height: 1;
margin: 0 1.5rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 0.8rem;
}
.button {
top: 2rem;
display: inline-block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
background: linear-gradient(#4d4d4d, #2f2f2f);
border-radius: 5px;
border: 1px solid black;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
color: white !important;
font-size: 1.2em;
cursor: pointer;
/* Important part */
position: relative;
transition: padding-right 0.3s ease-out;
}
span {
font-size: inherit;
}
<h1>Time left To <span>My next Birthday</span></h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="minutes">0</p>
<span>minutes</span>
</div>
<div class="countdown-el sec-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<button class="button">Time left to <span>new year</span></button>

creating a stopwatch and it does not seem to run in IE?

I created this which is to be a stopwatch but seems as though it does not want to run in IE, it will work fine in chrome but it needs to be put into a site that only runs in IE please help....
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0,
minutes = 0,
hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
// timer();
/* Start button */
start.onclick = function() {
timer();
start.style.visibility = "hidden";
stop.style.visibility = "visible";
}
/* Stop button */
stop.onclick = function() {
clearTimeout(t);
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0;
minutes = 0;
hours = 0;
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
#timer {
position: absolute;
top: 35px;
left: 20px;
}
.time {
font-size: 42px;
margin-left: 40px;
margin-top: 5px;
}
.btn-timer {
width: 80px;
height: 40px;
cursor: pointer;
font-family: helvetica, sans-serif;
font-size: 16px;
}
h1 {
font: bold 24px Helvetica, sans-serif;
color: black;
}
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
<div id="timer">
<button id="start" class="btn-timer">START</button>
<button id="stop" class="btn-timer" style="visibility:hidden">STOP</button>
<button id="clear" class="btn-timer">CLEAR</button>
<h1 class="time"><time>00:00:00</time></h1>
</div>
Any help would be great

Categories

Resources