I would like to change the colour of the text displayed to white, however, I have no idea how to go about this, could anyone be so kind to assist me?
Code:
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 22, 2017 15:37:25").getTime();
// 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));
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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "Days " + hours + "Hours "
+ minutes + "Minutes " + seconds + "Seconds ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
PS I'm a noob and this code is from W3.
CSS Styles Using JavaScript
Every HTML element that you access via JavaScript has a style object. This object allows you to specify a CSS property and set its value.
document.getElementById("p2").style.color = "blue";
There are some ways to do this but the simpliest one is just setting one CSS inline parameter. Like this:
<p id="demo" style="color: white;"></p>
And that makes the magic. :)
Definitly check this -> https://www.w3schools.com/css/default.asp
Related
I've searched other questions and google/YouTube, and from what I've found, it seems that this is possible, but I have not found this exact use case as an example to pull from. And to preface, I have a slight working knowledge of coding, but not a whole lot.
Here's what I'm trying to accomplish: I want to create a countdown timer in Google Sheets with 2 possible functions (depending on the use case):
1) where I can put in the end date the timer counts down to, either in a specific cell or in the code itself.
2) using a dynamic date (i.e., 30 days from the date the timer was created)
So where I have gotten stuck... I tried using script.google.com and pasted this script for a countdown timer that I found online:
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
But when I run the code, I get "Syntax error. (line 7, file "countdown")".
What modifications do I need to make to the code to get it to work? Or am I using an overcomplicated code to create the timer, and there is a much easier way?
Did you save it as HTML? Or as JS?
Because you should save it as .html since your Javascript is within tags instead of it being a separate file.
The code you pulled from w3schools is just a snippet, I've added and tags and it works just fine.
In your example snippet you also pasted it into the Javascript box instead of the HTML box.
Try this example, it's exactly the code you had!
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
Another way of doing it is to actually separate your javascript and html into separate files to keep it cleaner and to keep scripts and HTML separated. For example name your HTML index.html and your script timer.js
Then in your HTML, instead of the big blob of script, you simply do
<script src="/timer.js"></script>
// Save this as for example timer.js
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
<!-- Save this as index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<!-- Load the Javascript from a separate file called timer.js -->
<script src="/timer.js"></script>
</body>
I want to create countdown timer
But i want to get date from wordpress custom fields..
And i want to show countdown timer in element with id COUNTDWON
<p style="visibility: hidden; font-size: 0px;" id="time"><?php the_field('end_date');?></p>
<p id="countdown""></p>
and i want to use this script (below)
and my question is: how i can take the date from element
i don't want to put date manually to the script each time..
is it any way to do it?
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
After i tried this answer:
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
It works only for first field, screenshot below:
screenshot
If the date given by PHP is in the same format then you can use document.getElementById()
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
Otherwise you might need to format dateTime variable accordingly.
I'm creating a countdown timer for a user selected time. For that I have developed following function.
function countdownTimeStart(){
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
// Get to days 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 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);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
Such as
<input type = "text" id = "picker-dates" value="08:30:20">
So can anyone help me to get this input value to my javascript function.
First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.
function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
// Get to days 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 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);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
countdownTimeStart();
<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>
You can do like this, please have a look and if it doesn't work please let me know.
var selectedValue = document.getElementById("picker-dates").value;
use jquery: $('#picker-dates').val()
Need a help guyz, my scenario is - In my database i am having a table with a column "created_time" which stores the current system time in HH:MM AM/PM. Now I want as soon as the data entered in that table with current system time then in one of my php page there will be a button named "Start Exam", currently the button will be in "disabled" state, it should be enabled exactly after 1 hour of the time entered in the database along with a countdown timer showing along with the button.
Can anyone help me out with that.
<script>
var countDownDate = new Date("<?php echo $dateFromDB ?>").getTime();
// 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));
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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
// do something when time is expired
}
}, 1000);
</script>
I have my countdown function (that works).
// Set the date we're counting down to
var countDownDate = new Date("<?= $stop_datejs ?>");
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date();
// 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));
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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "ACTUALIZA LA PĂGINA";
}
}, 1000);
But I need to compare with a php variable $actual_date (server date)
// Get todays date and time
var now = new Date("<?= $actual_date ?>");
That works but stops updating every second. What is the problem?
Thanks
The variable now will not be updated, because the variable will only be written once. So if you load the the webpage the value will be set once but not updated, because the website does not update again (Only your interval).
To provide this you can simply use:
// Get todays date and time
var now = new Date();
This will only use the current time for the new instance of Date. If your <?= $actual_date ?> is not the current timestamp or you want to sync if for all browsers/pc with an incorrect time setting you should have a look at AJAX. Using AJAX is the easiest way to get the updated time from the backend.
jQuery Ajax:
http://api.jquery.com/jquery.ajax/