Javascript if / else not working properly [Time Formatting AM/PM] - javascript

I am trying to have a div show the current time but it always shows it in military time, so I went to use an if / else statement to help but it doesn't seem to work.
Javascript
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
if(time.getHours() > 12) {
timeHourFix = time.getHours() - 12 + "PM";
}else {
timeHourFix = time.getHours() + "AM";
};
$( document ).ready(function() {
$('#hourmin').text(formatted)
});
it should display the time like 5:35 PM but it still shows 17:35

That's because your are declaring the variable formatted before the timeHourFix is actually modified. Try the code below.
var time = new Date(Date.now());
var hour = time.getHours();
var t_hour = hour > 12 ? (hour - 12) : ((hour == 0) ? hour + 12 : hour);
var formatted = t_hour + " : " + time.getMinutes() + (hour > 11 ? " PM" : " AM");
$( document ).ready(function() {
$('#hourmin').text(formatted)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id=hourmin>

The time is not being formatted because the variable formatted is being set before timeHourFix or timeHour is being set. I think it's easiest to set formatted in the if else statement directly:
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeMinute = time.getMinutes();
var formatted;
if(time.getHours() > 12) {
formatted = time.getHours() - 12 + ":" + timeMinute + " PM";
} else {
formatted = time.getHours() + ":" + timeMinute + " AM";
};
$( document ).ready(function() {
$('#hourmin').text(formatted)
});

In your case the problem was you were modifying the variable timeHourFix after it was appended to the string, there is no live linking between the string and the timeHourFix variable so any changes you make to the variable after the string concatenation will not be reflected in the original value.
Also there are multiple other issues like the AM/PM should be at the end of the string so that also have to be changed. Also there are other issues with timeHourFix like how the value 0030 will be handled, it should be shown as 12:30 AM not 00:30 AM
var time = new Date(Date.now());
var timeHour = time.getHours();
//set the hour part
var timeHourFix = timeHour > 12 ? timeHour - 12 : timeHour == 0 ? 12 : timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
//set the AM/PM at the end of the string
formatted += timeHour >= 12 ? ' PM' : ' AM';
$(document).ready(function() {
$('#hourmin').text(formatted)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hourmin"></div>

Because you set formatted before setting the right values to timeHourFix. Move the assignment of formatted to below the else block.

You could always do something like this if you want to simplify your code.
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
$(document).ready(function() {
var timeofday = "";
if(timeHour > 12) {
timeHourFix = timeHour - 12;
timeofday = "PM";
}else {
timeHourFix = timeHour;
timeofday = "AM";
};
var formatted = timeHourFix + ":" + timeMinute + " " + timeofday;
$('#hourmin').text(formatted)
});

This is perfectly working full code.
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
if(time.getHours() > 12) {
time = time.getHours() - 12 + " : " + timeMinute + " PM";
}
else {
time = time.getHours() +" : " + timeMinute + " AM";
};
$( document ).ready(function() {
$('#hourmin').text(time)
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="hourmin">Time Display</p>
</body>
</html>

Related

document.lastModified only displays current date?

I've been looking for a way to display the date the page last was updated.
Now I've been searching around, and everything points to the document.lastModified function, but however I've tried to fix it, it always shows the current date.
I've tried this example:
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds(); }
else {
Seconds = modiDate.getSeconds(); }
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime }
document.write("Last updated on ");
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]"); document.write("");
Or a simple one like this:
<SCRIPT LANGUAGE="JavaScript">
var t = new Date(document.lastModified);
document.write("<I>Last Updated: "+document.lastModified+"</I><BR>");
document.write("<I>Last Updated: "+t+"</I><BR>");
</SCRIPT>
Is there any other way to do this?
.. Without taking a 3 years tech-class?
Press here to see the scripts live
Because you are modifying it currently. Check this out for example.
To make this work based on your requirement, checkout this link and this link
check this it will help u
Put this on the page at the bottom:
<script type="text/javascript" src="js_lus.js"></script>
Name the file whatever you want. Example: js_lus.js Make sure src=""
path is correct for all your pages.
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" +
modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds();
} else {
Seconds = modiDate.getSeconds();
}
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime
}
document.write("Last updated on ")
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]")
document.write("");

Time conversion from hh:mm:yy (24 hour) to expanded time form

I am using Angular-UI time plugin and so I need to convert a simple time format to a more complex one, i.e,
from:
16:19:29
to:
Wed Dec 09 2015 16:09:15 GMT+0530 (India Standard Time)
Or if possible complete data from this format:
"2015-12-17 16:19:29"
Which I am receiving from json.
I need to know any javascript function exists that converts our simple time format to the expanded form (day month year is not important, I can handle that!)
Try this demo
<html>
<head>
<title>Please Rate if it helps</title>
<script>
Date.prototype.myFormat = function (start) {
var temporeryDay = this.getDate();
var temporeryMonth = this.getMonth() + 1;
var temporeryYear = this.getFullYear();
var temporeryHours = this.getHours();
var temporeryMinutes = this.getMinutes();
var temporerySeconds = this.getSeconds();
temporeryDay = temporeryDay.toString().length == 1 ? "0" + temporeryDay.toString() : temporeryDay.toString();
temporeryMonth = temporeryMonth.toString().length == 1 ? "0" + temporeryMonth.toString() : temporeryMonth.toString();
temporeryHours = temporeryHours.toString().length == 1 ? "0" + temporeryHours.toString() : temporeryHours.toString();
temporeryMinutes = temporeryMinutes.toString().length == 1 ? "0" + temporeryMinutes.toString() : temporeryMinutes.toString();
temporeryHours = temporeryHours.toString().length == 1 ? "0" + temporeryHours.toString() : temporeryHours.toString();
temporerySeconds = temporerySeconds.toString().length == 1 ? "0" + temporerySeconds.toString() : temporerySeconds.toString();
return (temporeryYear + "-" + temporeryMonth + "-" + temporeryDay + " " + temporeryHours + ":" + temporeryMinutes + ":" + temporerySeconds);
}
window.onload = function () {
document.write(new Date().myFormat());
}
</script>
</head>
<body>
</body>
</html>
try this simple fiddle code
var timeStr = "16:19:29";
var timeStrArr = timeStr.split( ":" );
var date = new Date();
date.setHours( parseInt( timeStrArr[ 0 ] ) );
date.setMinutes( parseInt( timeStrArr[ 1 ] ) );
date.setSeconds( parseInt( timeStrArr[ 2 ] ) );
alert( date );

javascript coundown " SyntaxError: expected expression, got '.' "

var dateObj = new Date();
var month = dateObj.getUTCMonth() +1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var nowhour = dateObj.getHours();
var nowday = dateObj.getUTCDate();
var hour = "03";
var min = "00";
var hour2 = "18";
var min2 = "00";
var hour3 = "21";
var min3 = "00";
if(hour == 03)
{
day++;
}
document.write(nowhour);
newdate = year + "/" + month + "/" + day;
hourdate = " " + hour + ":" + min;
hourdate2 = " " + hour2 + ":" + min3;
hourdate3 = " " + hour2 + ":" + min3;
$("#bifrost")
if(nowhour > hour && day > nowday)
{
.countdown(newdate + hourdate, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}else if(nowhour > hour2)
{
.countdown(newdate + hourdate2, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}else{
.countdown(newdate + hourdate3, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}
Hello, i wanna make a countdown timer for events. I have 3 different event time,i wanna show up coming event here is my javascript code.
can anyone help me ?
ps: sorry for my bad english.
If countdown is a global function, you do not need the period before the call, just
countdown(parameters ... );
If countdown is a jquery plugin you have, and you are trying to call it on the jQuery object you created before the if statements, you must do it like this
$("#bifrost").countdown(parameters ... );
And repeat the jQuery selector in each of your if statements.
There is built in function setTimeout(function,milliseconds,param1,param2,...). Please see for examples in here.
setTimeout(function_to_do, miliseconds to wait) - will be triggered once;
setInterval(function_to_do, miliseconds to wait) - will be triggered periodically.
By the way - function name can't start with dot - and you have three calls to something .countdown(... There is you error.

creating a log with append

need to create a log of messages where the message be saved along with the time.
I have this code, but the acresentar a new message is deleted the old and replaced by the new.
var textons = prompt("Digite sua mensagem para a ONS", "");
var areaons = prompt("Digite a area onde o problema ocorreu", "");
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var mes = date.getMonth() + 1;
var month = (mes < 10) ? '0' + mes : mes;
var yy = date.getYear();
var year = (yy > 100) ? yy - 100 : yy;
var hours = date.getHours();
var min = date.getMinutes();
var minutes = (min < 10) ? '0' + min : min;
var sec = date.getSeconds();
var seconds = (sec < 10) ? '0' + sec : sec;
if (areaons != null && textons != null) {
document.getElementById("logdescricao").innerHTML =
"ONS: " + textons;
document.getElementById("logarea").innerHTML =
areaons;
document.getElementById("loghoracos").innerHTML =
day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById("loghoralocal").innerHTML =
day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
}
}
I thought about using the .append (function) but did not succeed.
how can I make the text stop being rewritten and pass to get saved?
thank
If I've understood you correctly, you just want it to add to each section in stead of overwriting?
Then all you have to do is "+=" instead of "="
document.getElementById("logdescricao").innerHTML += "ONS: " + textons
However, this is probably not the best way of doing this.
You could try:
var logdescricaoText = document.createTextNode("ONS: "+textons);
document.getElementById("logdescricao").appendChild(logdescricaoText);
But, really, if you want to make a list of things, then you should be using a table. This will allow for much neater and structured styling.
In your HTML:
<table>
<thead>
<tr>
<td>Descricao</td>
<td>LogMessage</td>
<!-- other field headers like 'time' -->
</tr>
</thead>
<tbody id=logs>
</tbody>
</table>
Then you can use the javascript (inside your 'if' block, instead of all your ".innerHTML =" stuff)
var logLine = document.createElement("tr");
document.getElementById("logs").appendChild(logLine);
var descricao = document.createElement("td");
descricao.appendChild(document.createTextNode("ONS: "+textons));
logLine.appendChild(descricao);
var logArea = document.createElement("td");
logArea.appendChild(document.createTextNode(areaons);
logLine.appendChild(logArea);
etc..
Additionally, you might want to apply a CSS styling to the 'thead' part of the HTML
eg. in your CSS file:
thead {
font-weight: bold;
}

get javascript to write to variable rather than document.write

I have the following javascript that prints the timestamp:
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(hours + "" + minutes + seconds + month + "" + day + "" + year)
//-->
</script>
However I want to use this timestamp in many places in the page, how can i call it like $timestamp so i can control where its placed?
Thanks in advance.
Set a variable, like:
var timestamp = hours + "" + minutes + seconds + month + "" + day + "" + year;
and later in code use that variable to show info in your page, like:
var container = document.getElementById('container1');
container.innerHTML = timestamp;
where 'container1' is a html element like span, div, p, etc. ex:
<span id="container1"></span>
answer
<script>
function startTime()
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<span id="txt"></span>
<script type="text/javascript">
startTime().swap('txt');
</script>

Categories