jquery - refresh the time in javascript - Stack Overflow

admin管理员组

文章数量:1431726

I have been trying to figure out how to refresh the time (and only the time) automatically in my webpage, but I can't seem to get it.

This is what I have.

var d = new Date();
var weekday = d.getDay();
var day = d.getDate();
var month = d.getMonth() + 1; //JS says jan = 0
var year = d.getFullYear();
var minutes = d.getMinutes();
var hours = d.getHours() + 1; //eastern time zone
var seconds = d.getSeconds();
var ms = d.getMilliseconds();

function distime(minutes, hours, month, day, year) {
    if (minutes < 10) {
        var lowMin = "0" + minutes.toString();
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + lowMin + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
        alert("here");
    } else
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + minutes + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
    alert("here");
};

//      var clockTime = distime(minutes, hours, month, day, year);

function init(minutes, hours, month, day, year) {
    alert("init");
    distime(minutes, hours, month, day, year);
    setTimeout(distime, 10000);
};

var initTime = init(minutes, hours, month, day, year);

The time is attached to a div, in HTML and I am not using PHP.

I have heard that I need to use ajax to do this, but I'm not sure how to implement that.

Again, my question is: How do I refresh the time every 10 seconds so that it will display correctly on my site.

Thanks!

The updated code that solved my problem can be seen below.

var time = {};

(function () {
  var clock = document.getElementById('timecode');

  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();

    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);

    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;

    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

Thanks to everyone who helped!

I have been trying to figure out how to refresh the time (and only the time) automatically in my webpage, but I can't seem to get it.

This is what I have.

var d = new Date();
var weekday = d.getDay();
var day = d.getDate();
var month = d.getMonth() + 1; //JS says jan = 0
var year = d.getFullYear();
var minutes = d.getMinutes();
var hours = d.getHours() + 1; //eastern time zone
var seconds = d.getSeconds();
var ms = d.getMilliseconds();

function distime(minutes, hours, month, day, year) {
    if (minutes < 10) {
        var lowMin = "0" + minutes.toString();
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + lowMin + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
        alert("here");
    } else
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + minutes + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
    alert("here");
};

//      var clockTime = distime(minutes, hours, month, day, year);

function init(minutes, hours, month, day, year) {
    alert("init");
    distime(minutes, hours, month, day, year);
    setTimeout(distime, 10000);
};

var initTime = init(minutes, hours, month, day, year);

The time is attached to a div, in HTML and I am not using PHP.

I have heard that I need to use ajax to do this, but I'm not sure how to implement that.

Again, my question is: How do I refresh the time every 10 seconds so that it will display correctly on my site.

Thanks!

The updated code that solved my problem can be seen below.

var time = {};

(function () {
  var clock = document.getElementById('timecode');

  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();

    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);

    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;

    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

Thanks to everyone who helped!

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Jun 22, 2015 at 13:40 CatCodinator asked Jun 22, 2015 at 12:34 CatCodinatorCatCodinator 1311 silver badge66 bronze badges 7

• Are you using jQuery? – Tushar Commented Jun 22, 2015 at 12:34
• stackoverflow./questions/2604450/… – Pardeep Dhingra Commented Jun 22, 2015 at 12:35
• window.setTimeout(function(){ document.location.reload(true); }, 15000); – cfprabhu Commented Jun 22, 2015 at 12:36
• The setTimeout(...} would go inside of my init function? @cfprabhu. Yes, I am using jquery. I didn't include the $(document).ready(function(){ but it is in my code – CatCodinator Commented Jun 22, 2015 at 12:38
• When will you call the int() ? – cfprabhu Commented Jun 22, 2015 at 12:41

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 5

Move them to a function:

function updateTime() {
  var d = new Date();
  var weekday = d.getDay();
  var day = d.getDate();
  var month = d.getMonth() + 1; //JS says jan = 0
  var year = d.getFullYear();
  var minutes = d.getMinutes();
  var hours = d.getHours() + 1; //eastern time zone
  var seconds = d.getSeconds();
  var ms = d.getMilliseconds();

  distime(minutes, hours, month, day, year);
}

setInterval(updateTime, 10000);

If you require the values for other parts of your program, store them in some kind of global state, and update those values within the clock function.

In this example we store all the parts in an object called time, which minimizes how many global variables we create. We can then access those properties later: time.ms, etc. For accuracy, your clock should tick more often then not - one call a second is not going to hit performance very hard, and will keep your minutes more accurate at the top of a minute.

Another thing to note is, in JavaScript when you add a number to a string, the number will be coerced into a string, so calling .toString() beforehand isn't really needed.

var time = {};

(function () {
  var clock = document.getElementById('clock');
  
  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();
    
    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);
    
    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;
    
    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

console.log(time.ms); // We have access to all those properties via a single variable.

<div id="clock"></div>

function updateTime() {
//Your function that prints time and replace the old time
// call this function again in 10000ms
setTimeout(updateTime, 10000); }

Use the below line to call this function on your page.

updateTime(); //initial call

Hope it helps.

<div id="dvNow"></div>
 <input type="button" value="Time" onclick="init()" />

 <script type="text/javascript">
        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };

        function distime() {
            var now = new Date();
            var sDateTime = now.toLocaleString();

            $("#dvNow").html(sDateTime);
        }
 </script>

The function updates only the Div#dvNow element, no need to refresh you whole page

<script type="text/javascript">
        init();

        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };

        function distime() {
            var now = new Date();
            //var sDateTime = now.toLocaleString();
            var sDateTime = now.toDateString() + " " + now.toLocaleTimeString()
            $("#dvNow").html(sDateTime);
        }
    </script>

init() function will start execute, when the page loads. The date and time stamp can be customised.

本文标签： jqueryrefresh the time in javascriptStack Overflow