recherche

Maison >interface Web >js tutoriel >Comment utiliser jQuery pour obtenir un effet d'horloge électronique

Comment utiliser jQuery pour obtenir un effet d'horloge électronique

php中世界最好的语言
php中世界最好的语言original
2018-06-01 14:48:412122parcourir

Cette fois, je vais vous montrer comment utiliser jQuery pour obtenir l'effet d'horloge électronique. Quelles sont les précautions pour utiliser jQuery pour obtenir l'effet d'horloge électronique. Voici des cas pratiques, jetons un coup d'œil. 

<!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 réaffirmer 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 l'obtention ;
3. Faites attention à l'écriture de window.onload = function(){};
4. Faites attention à l'ordre de départ du tableau pour les mois, l'indice est 0, et ainsi de suite ; Notez que les fonctions heures, minutes et secondes 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. ne pas utiliser
, 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 :

Comment faire fonctionner les paramètres de routage Angular5

Comment faire fonctionner vue2.0+ du développement de plug-ins à npm release

Comment utiliser le code .vue dans vscode

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：Comment utiliser Vue nextTickArticle suivant：Comment utiliser Vue nextTick

Articles Liés

Voir plus