I'm building a simple webpage for wedding event. Let's say that I need to show a countdown and I want to get the date to start it from an input form. I've been googling a lot and I've seen some interesting code but it's late and my eyes and mind are very tired. This is my code...
<?php $date = date('2017/05/21'); // this value supossed to be taken from a form.?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="clock"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://www.testingserver.dev/template/assets/web/assets/jquery/jquery.countdown.min.js"></script>
<script>
var eventdate = new Date("<?php echo $date; ?>"); // I'm trying to use a php variable in jquery.
$('#clock').countdown('eventdate', function(event) {
var $this = $(this).html(event.strftime(''
//+ '<div style="background-color: #ffcc00; width: 25%;"><p>Weeks<br>%w</p></div> '
+ '<span>%D</span> days '
+ '<span>%H</span> hrs '
+ '<span>%M</span> min '
+ '<span>%S</span> sec'));
});
</script>
I suppose this is link to the library website - http://hilios.github.io/jQuery.countdown/
You're passing string 'eventdate' to the countdown() method but it expects to be a valid date. So just remove the apostrophes and you'll get the eventdate variable's value:
$('#clock').countdown(eventdate, function(event) {
// ...
}
Related
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'm using a CMS system that works alongside a backend that we must use. I'm trying to have it display a production lead time date such as www.customink.com. Current day +10 business days I'm using a HTML widget in this custom CMS, so I'm not sure if that is relevant. I'm struggling getting it to show up, and I really have no idea what I'm doing. I tried my best lol. Here's what I have thus far.
EDIT: Also, If I want it to only display M-F how do I go about that? I want it to read - Guaranteed by Fri, Oct 11.
<html>
<body>
<script>
document.getElementById("p1").innerHTML = newDate;
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
var newDate = addDays(new Date(), 10);;
</script>
</body>
</html>
document.getElementById("p1").innerHTML = newDate;
In this statement, what you are doing is trying to find the DOM element with id p1 and then setting the value of newDate variable as its value. Therefore you should define an element with such id before your script block.
Then you are declaring and setting the value of the newDate after you have set the value for the above element. But you should do it before that.
See the fixed code below.
(I have used a <div> element as the p1 element. But you can use any other options such as <span>, <h1>, <h2>, etc. based on your requirement.)
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
</head>
<body>
<div id='p1'></div>
<script>
var newDate = addDays(new Date(), 10);
document.getElementById("p1").innerHTML = formatDate(newDate);
function addDays(theDate, days) {
//return new Date(theDate.getTime() + days*24*60*60*1000);
return moment(theDate).add(days, 'd').toDate();
}
function formatDate(date) {
return moment(date).format('[Guaranteed by] ddd, MMM DD');
}
</script>
</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>