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

How to operate jQuery to achieve electronic clock effect

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

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!

Recommended reading:

How to operate Angular5 routing parameters

How to operate vue2.0 from plug-in development to npm release

How to use .vue code in vscode

The above is the detailed content of How to operate jQuery to achieve electronic clock effect. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to use Vue nextTickNext article:How to use Vue nextTick