How to get current time and day of week using jQuery

In web pages, it is often necessary to obtain the current time and day of the week. At this time, jQuery can be used to achieve it. Especially where the time needs to be updated in real time, it is relatively simple to implement it with jQuery.

This article will introduce how to use jQuery to get the current time and day of the week. I hope it will be helpful to everyone.

jQuery implements the current time

The following is the code to use jQuery to get the current time:

$(document).ready(function () {
    var date = new Date();
    var time = date.toLocaleTimeString();
    $('#time').text(time);
});

Explain this code:

1. $(document).ready() means to execute this function after the page is loaded to ensure that the page elements can be operated.
2. var date = new Date(); is a method to obtain the current time, and assign the obtained time to the variable date.
3. var time = date.toLocaleTimeString(); Use the toLocaleTimeString() method to localize the time and assign it to the variable time.
4. $('#time').text(time); Update the obtained time to the element #time specified on the page.

The complete code is as follows:

nbsp;html>


    <meta>
    <title>jQuery获取当前时间</title>
    <script></script>


    <div></div>
    <script>
        $(document).ready(function () {
            var date = new Date();
            var time = date.toLocaleTimeString();
            $(&#39;#time&#39;).text(time);
        });
    </script>

The effect is as shown in the figure:

jQuery implements the days of the week

The following is the code for using jQuery to get the day of the week:

$(document).ready(function () {
    var date = new Date();
    var day = date.getDay();
    var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    $('#week').text(weeks[day]);
});

Explain this code:

1. var day = date.getDay(); Yes Method to obtain the current day of the week and assign the obtained day of the week to the variable day.
2. var weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; defines an array , stores the name of each week.
3. $('#week').text(weeks[day]); Update the obtained day of the week to the element #week specified on the page.

The complete code is as follows:

nbsp;html>


    <meta>
    <title>jQuery获取星期几</title>
    <script></script>


    <div></div>
    <script>
        $(document).ready(function () {
            var date = new Date();
            var day = date.getDay();
            var weeks = [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;];
            $(&#39;#week&#39;).text(weeks[day]);
        });
    </script>

The effect is as shown in the figure:

jQuery implements the current time and day of the week Combination

The following is the code to use jQuery to get the current time and day of the week at the same time:

$(document).ready(function () {
    setInterval(function () {
        var date = new Date();
        var time = date.toLocaleTimeString();
        var day = date.getDay();
        var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        $('#time').text(time);
        $('#week').text(weeks[day]);
    }, 1000);
});

Explain this code:

1. UsesetInterval() Method updates the time and day of the week every second.
2. $('#time').text(time); Update the obtained time to the element #time specified on the page.
3. $('#week').text(weeks[day]); Update the obtained day of the week to the element #week specified on the page.

The complete code is as follows:

nbsp;html>


    <meta>
    <title>jQuery获取当前时间和星期几</title>
    <script></script>


    <div></div>
    <div></div>
    <script>
        $(document).ready(function () {
            setInterval(function () {
                var date = new Date();
                var time = date.toLocaleTimeString();
                var day = date.getDay();
                var weeks = [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;];
                $(&#39;#time&#39;).text(time);
                $(&#39;#week&#39;).text(weeks[day]);
            }, 1000);
        });
    </script>

The effect is as shown in the figure:

Summary

Passed By studying this article, we can master how to use jQuery to get the current time and day of the week.

In actual development, we can use the above methods according to needs to achieve a better user experience.

The above is the detailed content of How to get current time and day of week using jQuery. For more information, please follow other related articles on the PHP Chinese website!