I've been trying to make a few javascript based countdowns/timers to place around my web site... an example of this would be...
"I’m a 25-year-old part-time blogger & designer and full-time waitress & bartender!" where the "25" would increase every year to update the age.
another example would be...
"with my soon to be husband (COUNTDOWN TILL WEDDING HERE)" and change "soon to be husband" to "husband"
ive seen a few script round but not quite what i need..
I've been trying to use the Math.floor method which works for the amount of days but i need to figure out how to add years. is there a way to calculate years using math.floor?
sidenote * i am not very familiar with javascript or anything of the sort whatsoever
You can use Javascript to do that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to My Page!</title>
</head>
<body>
<div id="about-me"></div>
</body>
<script>
function get_message() {
var my_birthday = new Date("2/13/1996"); // update your birthday here
var today = new Date();
var time_diff = Math.abs(today.getTime() - my_birthday.getTime()); // get the difference in milliseconds between today's date and your birthday
var my_age = Math.floor(time_diff / (1000 * 3600 * 24 * 365)); // get your age
var s = document.getElementById('about-me');
var message = "I’m a " + my_age.toString() + "-year-old part-time blogger & designer and full-time waitress & bartender!";
s.innerHTML = message; // update your age
}
window.onload = get_message; // load script only when page is loaded
</script>
</html>
Hope this helps!
Related
I made code to countdown based on the result of a current timestamp that adds up to five minutes, and I can't get the script to display the countdown from that timestamp. The code complete:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Hello, world!</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript">
var duration = moment.duration(1646486515 * 1000, 'milliseconds');
var interval = 1000;
setInterval(function(){
duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
$('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
if(duration.asSeconds() <=0) {
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
}
}, interval);
</script>
</head>
<body>
<center><p><h1>Hello, world!</h1></p></center>
<div class="container mb-2 my-2">
<div class="p-3 shadow-sm">
result of code: <span id="time" class="countdown">--:--</span>
<?php
echo '<br />NOW:'.time().'<br>+5 minutes: '.time()+300;
?>
<br />
What i want is: 00:04:59
</div>
</div>
</body>
</html>
The result:
https://i.stack.imgur.com/oNBND.png
if you give "+5 minutes", that is the sum of time() function + 300 seconds (5 minutes), you will have, for example, the date now + 5 minutes on future, but in timestamp. The intention here, is that script count 00:05:00 starting of time() now.
Look carefully at this line:
var duration = moment.duration(1646486515 * 1000, 'milliseconds');
How many minutes are there in 1646486515 seconds? A lot more than five! In fact, it is somewhere over 52 years, but when you format it you aren't showing the years, months, and days, only the remaining hours, minutes, and seconds.
That's because time() is returning you a representation of a point in time, based on the number of seconds elapsed since midnight UTC, 1st January 1970.
In order to get the duration between that point in time and another point in time, you need to compare them. The simplest way to do that is to substract one from another. For instance, 1646486815 - 1646486515 gives you 300, representing a duration of 300 seconds between those two points in time.
In your example, you know the duration is 300 seconds, so could just write that:
var duration = moment.duration(300 * 1000, 'milliseconds');
Or more simply:
var duration = moment.duration(300, 'seconds');
A second problem is on this line:
$('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
Here, we take a duration, and use it to create a "moment", that is a specific point in time; but what point in time, and why? What we actually wanted was to format it, because the duration type doesn't have a format method, but it has methods to get hours, minutes, and seconds, so we can just write that ourselves:
var duration = moment.duration(300, 'seconds');
formattedDuration = duration.hours() + ':' + String(duration.minutes()).padStart(2, '0') + ':' + String(duration.seconds()).padStart(2, '0');
$('#time').text(formattedDuration);
The key here is to look at each piece in turn, not get caught up trying to put the pieces together until we have things working. Once we know we can create a duration based on a number of seconds, and format that duration, we can add in the PHP to decide how many seconds to start with. Once we have that working, we can add in the part that counts that duration down, and then the part that does something extra once it reaches zero.
I ended up solving my problem with another idea. Maybe if you are searching for answers, this will help you.
First, if you use function "time()" of PHP with + 5 minutes, transform to a datetime string with this function:
date('Y-m-d H:m:s', $row['time_stamp'])
with this, the result is a date formatted: 2022-03-05 12:00:00 (already with 5 minutes included).
Then, download the script from here: http://hilios.github.io/jQuery.countdown/documentation.html After install, use the script of documentation and define a timezone.
The code final code is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Hello, world!</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone.js"></script>
<script type="text/javascript">
var timesZone = moment.tz("<?php echo date('Y-m-d H:i:s',$get['time_zone']); ?>","America/Sao_Paulo");
$("#timer").countdown(timesZone.toDate(), function(event) {
$(this).text(event.strftime('%H:%M:%S'));
});
</script>
</head>
<body>
<center><p><h1>Hello, world!</h1></p></center>
<div class="container mb-2 my-2">
<div class="p-3 shadow-sm">
result of code: <span id="timer" class="countdown">--:--</span>
<?php
$newTime = time()+300;
echo '<br />NOW:'.time().'<br>+5 minutes: '.$newTime.'<br />New time date: '. date('Y-m-d H:s:i',time());
?>
<br />
What i want is: 00:04:59
</div>
</div>
</body>
</html>
I'm very new to Javascript and I'm trying to create some cookies. I do not seem to be able to save them under document.cookie object for some reason. The main goal is to have a user write something in an text field and upon clicking a button it saves that input in a cookie and in js use document.getElementById("elementID").value; to get the value of the user input. I've tried to create a cookie manually like document.cookie = "name=samu"; but it also does not show. After googling this exact task I found the following page which had no problem creating a cookie from a user input in a text field. When checking under the developer tools > Application > Cookies I could see the cookie appear but I've even copy pasted the code and it did not work.
I followed the W3school example on how to set and create one but also did not work.
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="Stylesheet1.css">
<script type="text/javascript" src="objectosPredef.js"></script>
<title>Actividad 2</title>
</head>
<body onload="listaPropiedades()">
<div id="listaPropiedades"></div>
<input type="text" id="nombre" placeholder="entra tu nombre" />
<button onclick="crearCookie();">Click</button>
</body>
</html>
Javascript
function setCookie(nombre, valor, exp) {
var d = new Date();
d.setTime(d.getTime() + exp * 24 * 60 * 60 * 1000);
var exp = "expires=" + d.toUTCString();
document.cookie = nombre + "=" + valor + ";" + exp + ";path=/";
alert(document.cookie);
}
function crearCookie() {
var nombre = "nombre_usuario";
var valor = document.getElementById("nombre").value;
alert(valor);
var exp = 500;
setCookie(nombre, valor, exp);
}
I'm using Microsoft Visual Studio Community 2019
Thanks in advance!
#mplungjan was right. I've downloaded Xampp and was able to save cookies and see them via the browser! thanks
Best result i get is this, its simplest code i found here and save to MySQL on correct format. but i need to get GMT+7 datetime, how to add additional 7 Hours to this script?
<html>
<head>
<title>Web Page Design</title>
<script>
document.writeln(new Date().toISOString().slice(0, 19).replace('T', ' '));
</script>
</head>
<body><br>Current Date is displayed above...</body></html>`
Result :
2018-11-23 11:14:38
Current Date is displayed above...
If you just need to add 7 hours here is an example:
<html>
<head>
<title>Web Page Design</title>
<script>
var now = new Date();
now.setHours(now.getHours() + 7);
document.writeln(now.toISOString().slice(0, 19).replace('T', ' '));
</script>
</head>
<body><br>Current Date is displayed above...</body>
</html>`
I need to add a date and time clock to a website. It should display the date and time in a very specific format, taking up two lines and using an intended timezone of GMT-4; for example:
Sat, Mar 23 2019
10:33:56 PM
This happens to be for a school project, but I have limited knowledge of Javascript. I've tried looking up some examples and have found some interesting stuff, but I'm unable to adapt those examples to generate the output in the desired format.
Please Try This
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var CDate = new Date()
var NewDate=CDate.toDateString();
NewDate = NewDate + " - " + CDate.toLocaleTimeString();
document.getElementById('ct').innerHTML = NewDate;
display_c();
}
<html>
<head> </head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
For Change Date Or Time Format Please Refer this link
Get currentDate by toDateString() method and get current time by toLocaleTimeString and append both in your DOM . And call this every 1000 ms to get updated value .
function callDateTime(){
var currentDate=(new Date()).toDateString();
var currentTime=(new Date()).toLocaleTimeString();
document.getElementById('watch').innerHTML=`${currentDate}-${currentTime}`;
}
setInterval(function(){ callDateTime() }, 1000);
<p id="watch"></p>
You can add an HTML to your the body of your document:
Also, you can add a JavaScript similar to this before </body>:
Code:
function clock(){
window.rt=1000;r=0;
document.getElementById('t-0').textContent=new Date().toLocaleDateString(); // today
var m=setInterval(function(){
if(r>84600){clearInterval(m);}
r++;
document.getElementById('t-2').textContent=new Date().toLocaleTimeString(); // clock
}, window.rt);
}
<!DOCTYPE html>
<html lang="en">
<title>Clock</title>
<body onload="clock();">
<div style="text-align:center;">
📅
<b id="t-0">00/00/0000</b>
⏰
<b id="t-2">00:00:00</b>
</div>
</body>
</html>
I am looking for a quick script that will update a number daily. This is for something like the number of days without an accident in the work place.
I want it to to put an link to the HTML page for it in the startup group in XP (yes XP, company is a little behind) and have it run at bootup. I may add more stuff later but this is the main purpose.
So each day it needs to update the number by 1 based on the previous days number, so it is most likely going to have to be read and written to a file. If the browser is closed or the system rebooted it should not update increment the browser unless it is a different day.
Can someone point me to a good way of doing this. I was thinking javascript, but I am open. I have no access to a database.
Thanks
This script should do the trick
HTML
<div id="counter">1</div>
<button id="reset">Reset</button>
JS
setInterval(function(){
var value = parseInt(document.getElementById('counter').innerHTML);
document.getElementById('counter').innerHTML = (value+1).toString();
},86400000); //86400000 = 1 day in milliseconds
var btn = document.getElementById('reset');
btn.onclick=function(){
document.getElementById('counter').innerHTML = "0";
};
http://jsfiddle.net/khe67/3/
Well than you may wanna use HTML5 to save variables within the web browser, so if you happen to reload or reboot the computer you still have your variables saved. Code may look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello HTML5</title>
<script>
window.onload = function (){
if(typeof(Storage)!=="undefined"){
var goodDays;
var oldTime = localStorage.getItem("oldTime");
var timestamp = new Date().getTime();
if(!oldTime || oldTime==""){
goodDays = 1;
localStorage.setItem("oldTime", timestamp);
localStorage.setItem("dayCounter", goodDays);
}else{
var timeCheck = oldTime + (24 * 60 * 60 * 1000);
goodDays = localStorage.getItem("dayCounter");
if(timestamp > timeCheck){
goodDays++;
localStorage.setItem("oldTime", timestamp);
localStorage.setItem("dayCounter", goodDays);
}
}
document.getElementById("dCounter").innerHTML=goodDays;
}else{
alert("geat a real browser");
}
}
function resetDays(){
localStorage.setItem("oldTime", "");
localStorage.setItem("dayCounter", "");
location.reload();
}
</script>
</head>
<body>
<div style="display:inline">DAYS WITH OUT INCENDENTS </div><div style="display:inline" id="dCounter"></div>
<div style="cursor:pointer" onclick="resetDays()">Reset</div>
</body>
</html>