recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes pour implémenter la fonction d'horloge électronique avec jQuery

Explication détaillée des étapes pour implémenter la fonction d'horloge électronique avec jQuery

php中世界最好的语言
php中世界最好的语言original
2018-05-15 09:44:222072parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter la fonction d'horloge électronique avec jQuery. Quelles sont les précautions pour que jQuery implémente la fonction d'horloge électronique. Voici un cas pratique, allons-y. jetez un oeil. 

<!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>

Effet opérationnel :

Exemple de résumé :

Faites attention aux références des fichiers js. .Déclaré dans l'en-tête, lorsqu'il est développé dans le corps, il n'est pas nécessaire de déclarer à nouveau les informations de référence, etc.
2 Faites attention aux fonctions liées à la date, et n'oubliez pas get et les parenthèses lors de la récupération. ;
3. Faites attention à l'écriture de window.onload = function(){};
4. Faites attention à l'ordre de départ du tableau à partir de janvier, l'indice est 0, et ainsi de suite ; . Notez que les fonctions heure, minute et seconde sont des nombres complexes ;
6. Jour signifie obtenir le jour de la semaine, mais ce que vous obtenez est un nombre, vous pouvez utiliser la conversion de tableau (0 signifie dimanche, les autres correspondent un à un)
7. Fonction setTimeout :
, notez que out in setTimeOut(A,B) est en minuscule setTimeoutA : corps de la fonction B : Intervalle d'exécution de la fonction
8. n'utilisez pas
, sinon l'appel récursif ne sera pas implémenté document.write9. Les guillemets simples ou doubles doivent-ils être utilisés dans les sélecteurs JQuery ?
Théoriquement, les nombres impairs et pairs sont acceptables. Dans le cas de l'imbrication, cela dépend de la situation spécifique.
10. À propos de l'obtention du contenu du texte de l'étiquette avec jQuery : Méthode 1 : text(); Méthode 2 : html();
Notez que lorsque le contenu du texte doit être modifié, le format correct est :
et le format incorrect est : $('#time').text("content")$('#time').text() = "content"

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Parcours jQuery des nœuds XML et étapes de mise en œuvre des attributs

Explication détaillée de l'utilisation de Vue ripple composant bouton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation du mécanisme Vue nextTickArticle suivant：Explication détaillée de l'utilisation du mécanisme Vue nextTick

Articles Liés

Voir plus