Home > Article > Web Front-end > How to operate jQuery to achieve electronic clock effect

How to operate jQuery to achieve electronic clock effect

php中世界最好的语言Original: 2018-06-01 14:48:412079browse

This time I will show you how to operate jQuery to achieve the electronic clock effect. What are the precautions for operating jQuery to achieve the electronic clock effect? The following is a practical case, let's take a look.

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery电子时钟</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <span id="time">haha</span>
    <script type="text/javascript">
    window.onload = function(){
      showTime();
    }
    function showTime(){
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    var dayArray = new Array(7);
    dayArray[0] = "星期日";
    dayArray[1] = "星期一";
    dayArray[2] = "星期二";
    dayArray[3] = "星期三";
    dayArray[4] = "星期四";
    dayArray[5] = "星期五";
    dayArray[6] = "星期六";
    var day1 = myDate.getDay();
    var day = dayArray[day1];
    var hour = myDate.getHours();
    var minute = myDate.getMinutes();
    var second = myDate.getSeconds();
    var min = checkTime(minute);
    var sec = checkTime(second);
    var time1 = year + "年" + month + "月" + date + "日";
    var time2 = hour + "：" + min + "：" + sec;
    // document.write(time1+day+time2);
    //用js方法
    // document.getElementById("time").innerHTML = time1+day+time2;
    //用jquery方法
    $('#time').text(time1+day+time2);
    setTimeout("showTime()",500);
    }
    function checkTime(i){
      if(i<10){
        i = "0" + i;
      }
      return i;
    }
    </script>
  </body>
</html>

Running effect:

Example summary:

1. Pay attention to the js file reference, which must be in the head declaration in the body, there is no need to re-declare the reference information when expanding in the body;

2. Pay attention to Date-related functions, and don’t forget get and parentheses when retrieving;
3. Pay attention to
window.onload = function( ){}; 4. Pay attention to the starting order of the array for months. Starting from January, the subscript is 0, and so on;
5. Note that the hour, minute, and second functions are complex numbers. ;
6. day means to get the day of the week, but what is obtained is a number, which can be converted with an array (0 means Sunday, the others correspond one to one)
7. setTimeout function:
setTimeOut(A,B) , note that out in setTimeout is lowercase A: function body B: function execution interval
8. During the execution of setTimeout, do not use
document.write, Otherwise, the recursive call is not implemented; 9. Are single quotes or double quotes used in JQuery selectors?
Theoretically, both odd and even numbers are acceptable. In the case of nesting, it depends on the specific situation.
10. Regarding jQuery to obtain the text content of the label: Method 1: text(); Method 2: html();
Note that when the text content needs to be changed, the correct format is:
$('#time' ).text("content") The error format is: $('#time').text() = "content"

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

How to operate jQuery to achieve electronic clock effect

Related articles