Javascript Time Display am/pm from Computer (quick tweak) - javascript

Just need a quick tweak if thats ok. I got this code from the web and would just like to add an am/pm to be displayed at the end of the clock/time. Many thanks...
<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(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<div id="txt"></div>

Or, if you also want it displayed in 12-hour format:
<script type="text/javascript">
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);
var hd=h;
document.getElementById('txt').innerHTML=(hd=0?"12":hd>12?hd-12:hd)+":"+m+":"+s+" "+(h<12?"AM":"PM");
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>

This should do the trick.
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);
var suffix;
if (h >= 12 && h < 24){
suffix = "pm";
} else {
suffix = "am";
}
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + " " + suffix;
t = setTimeout(function () {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

Related

How to output url time string as text instead of video?

I have some code that outputs a time string into a video. I know how to make it output as video or image but I want it to just show up as plain text so I can make a list of live-updating URLs based on the current time.
Currently it is set to "video.r" which adds the time to a "
So that instead of doing:
<video class="r" src="https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4" type="video/x-flv" width="350"></video>
It would just output as:
https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4
Here's the code for it.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<video class="r" src="https://mywebsite.com/" type="video/x-flv" type="video/mp4" width="350"></video>
JS
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('video.r').each(function() {
var url = $(this).attr('src');
if (url.indexOf("?") >= 0) {
$(this).attr("src", url + today);
} else {
$(this).attr("src", url + today);
}
});
});
So, I understand what you want is having a link, which points to an URL like the one you posted.
If so, then it is pretty simple. You already a function that builds the URL, now instead of using this URL as a video's src attribute, you can use it as a link's href attribute:
Edit: Or, if you just want to list URLs as plain text, simply use the link's innerHTML attribute instead of href in the below solution.
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('a.r').each(function() { //here change "video.r" to "a.r"
var url = $(this).attr('href'); //and here "src" becomes "href"
if (url.indexOf("?") >= 0) {
$(this).attr("href", url + today);
} else {
$(this).attr("href", url + today);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<a class="r" href="https://mywebsite.com/">Link</a>

JavaScript clock not displaying properly

I'm trying to make an updating JavaScript clock on my webpage. The problem I'm having is that, while the value itself updates (I use alert(timeNow) to show the value and make sure it's updating), the clock on the website doesn't. I was just wondering if there was something I was missing, or if I've just happened to come across something that I can't quite do. I'd prefer if there was a way to do it using jQuery, as I understand that a little better than normal JavaScript.
Javascript:
function updateClock() {
var thisDate = new Date();
if (thisDate.getHours() > 11 && thisDate.getHours() != 0) {
var Hours = Math.abs(thisDate.getHours() - 12);
var AmPm = "PM"
} else {
var Hours = thisDate.getHours()
var AmPm = "AM"
}
if (thisDate.getMinutes() < 10) {
var Mins = "0" + thisDate.getMinutes();
} else {
var Mins = thisDate.getMinutes();
};
var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth() + 1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm;
return timeNow;
};
setInterval(updateClock, 1000);
$("span#time").append(updateClock());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="time"></span>
You are not consuming the return value of updateClock function, thus the updated time is not reflecting.
You should update the text of time span
Use
setInterval(function(){
$("span#time").text(updateClock());
}, 1000);
You are returning the time in the function updateClock(). What you actually want to do is to set it into the DOM at the end of updateClock(). Here is an updated example:
function updateClock() {
var thisDate = new Date();
if (thisDate.getHours() > 11 && thisDate.getHours() != 0) {
var Hours = Math.abs(thisDate.getHours() - 12);
var AmPm = "PM"
} else {
var Hours = thisDate.getHours()
var AmPm = "AM"
}
if (thisDate.getMinutes() < 10) {
var Mins = "0" + thisDate.getMinutes();
} else {
var Mins = thisDate.getMinutes();
};
var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth()+1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm;
$("span#time").text(timeNow);
}
setInterval(updateClock, 1000);
You could of course also just use the returned value of updateClock() to update the DOM. In this way, you would separate the DOM manipulation and the JavaScript time calculation. #Satpal described this way.
Try This...
$(document).ready(function()
{
goforit();
});
var dayarray=new Array ("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December")
function getthedate() {
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn=""
if (hours>=12)
dn=""
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//Hire change font size
var cdate=""
+ mydate.toLocaleString()
+""
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit()
{
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<SPAN id=clock style="display:block"></SPAN>
setInterval(function() {
$("span#time").text(moment(new Date()).format('DD/M/YYYY LTS'));
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<span id="time"></span>

setInterval function is not working

I’m making a local time watch in jQuery. I wrote some piece of code but it’s not working. Here is my code:
$(document).ready(function(){
function addZero(i) {
if (i <= 9) {
i = "0" + i;
}
return i;
}
var d = setInterval(function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds();
var a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('pre').html(h + ":" + m + ":" + s + " " + "a");
},1000);
});
You made some mistakes - check code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d,z,h,m,s,a
function addZero(i) {
if (i <= 9) i = "0" + i;
return i;
}
d = setInterval( function(){
z = new Date();
h = addZero(z.getHours());
m = addZero(z.getMinutes());
s = addZero(z.getSeconds());
a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('#timer').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
</script>
<pre id="timer"></pre>
You have missed one )
$(document).ready(function(){
function addZero(i) {
if (i <= 9) {
i = "0" + i;
}
return i;
}
var d = setInterval(function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds());
var a = '';
if (h > 11 ) {
a = "PM" ;
}
else {
a = "AM";
}
if (h == 16) {
h = '0'+4;
}
$('pre').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>
Please use below code in your code there is a function var d which is declared for setInterval but I didnt see this function as a called. so from where it will call. above answer is also fine and correct but global variable declaration is not needed here for d,z,h,m,s,a in below code. Local variable is also working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//var d,z,h,m,s,a
function addZero(i) {
if (i <= 9) i = "0" + i;
return i;
}
setInterval( function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds());
var a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('pre').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
</script>
<pre id="timer"></pre>

Unable to Loading jquery datepicker on google maps

I am unable to load the datepicker on google maps
Here is the code
JS
function CreateMapTopControl(controlDiv, controlElement, controlId, map, event, response) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement(controlElement);
controlUI.id = controlId;
controlDiv.appendChild(controlUI);
google.maps.event.addDomListener(controlUI, event, function() {
response();
return false;
});
return controlUI;
}
$(document).ready(function() {
maplct.initialize(document.getElementById('mapDiv'));
var dateDiv = document.createElement('div');
dateSel = new CreateMapTopControl(dateDiv, "input", "dateId", maplct.mapObject, "change", getMapRoute);
dateDiv.index = 2;
maplct.mapObject.controls[google.maps.ControlPosition.TOP].push(dateDiv);
$(dateSel).attr("type", "text")
$(dateSel).attr("style", "height:15px;width:100px;");
var curDate = new Date();
var d = curDate.getUTCDate();
var dd = (d < 10) ? "0" + d : d;
var m = curDate.getUTCMonth() + 1;
var mm = (m < 10) ? "0" + m : m;
var YYYY = curDate.getUTCFullYear();
var formattedDate = YYYY + "-" + mm + "-" + dd;
$(dateSel).val(formattedDate);
$(dateSel).datepicker({dateFormat: 'yy-mm-dd'});
$(dateSel).datepicker( "refresh" );
});
Map is getting loaded at the end of the file, it looks like css is not applied.

Unique ID that gets a date in specific format?

I have code that will generate a random unique id.. but is there a way I can edit this code so that it grabs a date in a specific way like yyyy-mm-dd-0001. the last 4 digits I want it to add 1 each time the generateid button is clicked. so it will change to 0002. Here is the current code I have. Is there a function that can grab the date automatically?
var counter = 0000;
function Counter() {
if((document.getElementById("generateid").clicked == true)
{
Counter++
return counter;
}
}
function Month() {
var m = new Date();
var mm = m.getMonth() + 1;
if (mm < 10) {
mm = '0' + mm;
return mm;
}
}
function Year() {
var y = new Date();
var yy = y.getFullYear();
return yy;
}
function Day() {
var d = new Date();
var dd = d.getDate();
return dd;
}
//generate id
function guidGenerator() {
var theID = (Year() + "-" + Month() + "-" + Day() + "-" + Counter);
return theID;
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator();
document.getElementById("generateid").disabled = true;
}
You can use the following object:
var idGenerator = {
seq: 0,
generateId: function () {
this.seq++;
return (new Date()).toISOString().substring(0, 10) + '-' + ('000' + this.seq).substr(-4)
}
}
after declaration like this, try
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + idGenerator.generateId();
document.getElementById("generateid").disabled=true;
}
If you are asking for a way to keep track of how many times an ID is generated by all your site visitors using javascript alone then, no it is not possible without tying in some back end to keep track. However, the following code will do what you ask per visitor.
jsfiddle
var ttlIds = 0;
function guidGenerator() {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + S4());
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator().toString().toUpperCase();
//document.getElementById("generateid").disabled=true;
ttlIds++;
if(ttlIds < 10){
ttlIds_formatted = '000'+ttlIds;
}else if(ttlIds < 100){
ttlIds_formatted = '00'+ttlIds;
}else if(ttlIds < 1000){
ttlIds_formatted = '0'+ttlIds;
}
d = new Date();
var funkydate = d.getFullYear() +'-' + (d.getMonth()+1) + '-' + d.getDate() + '-' + ttlIds_formatted;
document.getElementById("funkydate").value = funkydate;
}

Categories

Resources