<html>
<head>
<script>
function updateClock() {
var time = now.getHours() + ':' + now.getMinutes(),
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
</script>
</head>
<body onload="updateClock()">
<p id="current"> </p>
</body>
</html>
Above is the code for dynamically update real time, it is not showing any thing on the browser. Would really appreciate help
Thank you.
Show time using Js :
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('current').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
<body onload="startTime()">
<p id="current">Time loading..</p>
</body>
OR
Your code edited:
function updateClock() {
var now = new Date();
var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
<body onload="updateClock()">
<p id="current"></p>
</body>
You were missing var now = new Date(); and also now.getSeconds();.
There are some errors in updateClock:
function updateClock() {
var now = new Date()
var time = now.getHours() + ':' + now.getMinutes();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
now must be a Date object.
now needed to be a date object
You had a comma instead of a semicolon after now.getMinutes(),
I recommend using
* padding
* setInterval
* window.onload instead of body onload
I added seconds to show it updates. If you only need hours and minutes, change the interval time to 10000 or so.
function pad(num) {
return String("0"+num).slice(-2);
}
function updateClock() {
var now = new Date();
var time = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ":" + pad(now.getSeconds());
document.getElementById('current').innerHTML = time;
}
window.onload = function() {
setInterval(updateClock, 500); // use a shorter interval for better update
}
<p id="current"></p>
Related
I want to show current time on my webpage. When I push F5, I can get the time, but it's not changing. Help me..
HTML
<div id="time" class="timer">
show_time
</div>
Javascript
var text2 = document.getElementById("time");
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var dn = "PM";
if (hours<12)
dn="AM";
if (hours>12)
hours=hours-12;
if (hours==0)
hours=12;
if (minutes<=9)
minutes="0"+minutes;
if (seconds<=9)
seconds="0"+seconds;
setInterval(setTime, 1000);
function setTime(){
text2.innerHTML ="현재 시간: <br>"+ hours + ':' +
minutes + ':' + seconds+ "<bn>"+dn;
}
setTime();
Thank you!
Try this
const el = document.getElementById('nav-time');
function updateClock() {
var now = new Date();
var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
el.innerHTML = time;
}
setInterval(updateClock, 1);
<li><span id="nav-time">Clock
<span class="divider"> | </span>
function setTime(){
document.getElementById("time").innerHTML ="현재 시간: <br>"+ hours + ':' +
minutes + ':' + seconds+ "<bn>"+dn;
}
You have to add something to your current code so that your setTime function actually adds its output to the DOM. I used document.getElementById("time") to add the time from your function to the page.
You need to get the current time inside the function, otherwise it will return value that you got when function was called for the firs time
function setTime(){
var text2 = document.getElementById("time");
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var dn = "PM";
if (hours<12)
dn="AM";
if (hours>12)
hours=hours-12;
if (hours==0)
hours=12;
if (minutes<=9)
minutes="0"+minutes;
if (seconds<=9)
seconds="0"+seconds;
text2.innerHTML ="현재 시간: <br>"+ hours + ':' +
minutes + ':' + seconds+ "<bn>"+dn;
}
setTime();
setInterval(setTime, 1000);
https://jsfiddle.net/1gc8ymkd/
I have found a script that counts seconds and minutes. I would like get the minutes and seconds value and store it in a variable when I clicked a stop button, how should I do it?
var initialTime = Date.now();
window.setInterval(checkTime, 100);
function checkTime( miliseconds) {
var timeDifference = Date.now() - initialTime;
var formatted = convertTime(timeDifference);
if(seconds > 30 || minutes > 0) {
$('#timer').html('<span style="color: red">' + minutes + ': ' + seconds + '</span>');
} else {
$('#timer').html('<span style="color: black">' + minutes + ': ' + seconds + '</span>');
}
}
function convertTime(miliseconds) {
totalSeconds = Math.floor(miliseconds/1000);
minutes = Math.floor(totalSeconds/60);
seconds = totalSeconds - minutes * 60;
return minutes,seconds;
}
Make a button and attach an event on it. Then clear the interval when the button is clicked:
$("button").on('click', function() {
window.clearInterval(interval);
});
Demo: https://jsfiddle.net/76t086c2/
You can either get the value from the div#timer or set the minutes/seconds in an input and when the button is clicked, get the value.
You can return valued from your function like this:
HTML
<button id="stop">Stop</button>
<button id="start" disabled>Start</button>
<div id="timer"></div>
<div id="output"></div>
JavaScript
var initialTime = Date.now();
var timer = window.setInterval(checkTime, 100);
function checkTime() {
var timeDifference = Date.now() - initialTime;
var formatted = convertTime(timeDifference);
if(formatted.seconds > 30 || formatted.minutes > 0) {
$('#timer').html('<span style="color: red">' + formatted.minutes + ': ' + formatted.seconds + '</span>');
} else {
$('#timer').html('<span style="color: black">' + formatted.minutes + ': ' + formatted.seconds + '</span>');
}
return formatted;
}
function convertTime(miliseconds) {
var totalSeconds = Math.floor(miliseconds/1000);
var minutes = Math.floor(totalSeconds/60);
var seconds = totalSeconds - minutes * 60;
return {'seconds': seconds,'minutes':minutes};
}
function toggle() {
$('#start, #stop').prop('disabled', function(i, v) { return !v; });
}
$('#stop').on('click',function() {
clearInterval(timer);
toggle();
var t = checkTime();
$('#output').html('Time was stopped at: '+t.minutes + ':' + t.seconds)
})
$('#start').on('click',function() {
initialTime = Date.now();
timer = window.setInterval(checkTime, 100);
toggle();
})
You can see it working here: https://jsfiddle.net/jqy0ehbp/3/
Ok, you have 2 dates.
get the difference in miliseconds and format the result.
var initialTime = new Date(2016, 2, 09, 10, 00, 0);
var now = new Date(Date.now());
var dateDifference = (now - initialTime);
console.log('Diff miliseconds = ', dateDifference);
console.log('Result: ', FormatMiliseconds(dateDifference));
You can view an example in this fiddle:
jsfiddle
I am having an issue with the setInterval() function in javascript where it will print to my page once and it will not continue to do so. I was wondering if maybe this is a browser issue or something i did wrong.
function printTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
document.write(hours + ":" + minutes + ":" + seconds + "<br/>");
}
setInterval("printTime()", 1000);
Apart from the poor practice of using "functionName()" instead of just functionName, the code will never work if the interval is beyond the page loading.
document.write will wipe the page after load
Here is a better solution:
<div id="time"></div>
<script>
function pad(str) { return ("0"+str).slice(-2)}
function printTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
document.getElementById("time").innerHTML+=pad(hours) + ":" + pad(minutes) + ":" + pad(seconds) + "<br/>";
}
setInterval(printTime, 1000);
</script>
This is a JavaScript showing time hour, minute and seconds now seconds are ticking minutes change it's not static i have problem.How to implement it in HTML page ?
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
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>
Edit your body tag to
<body onload="startTime()">
<span id="txt">10:26:07</span>
Than add bellow code where you want clock to appear
Just do it:
<span id="txt"></span>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
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;
}
startTime();
</script>
You need an element on your page with ID txt (see your script.)
You need to start/call your function execution startTime();
In order to allow the JS DOM parser to find your #txt place your <script> before the closing </body> tag.
<div id="txt"></div>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
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;
}
startTime(); // Execute
</script>
There could be so many version of HTML Markup for your Javascript function:
One of them could be like:
<div id="txt">
</div>
<button type="button" name="click" onclick="startTime()">Click Me!</button>
DEMO FIDDLE
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>