Comment définir l'heure du réseau dans jquery

Dans le développement front-end, nous avons souvent besoin d'obtenir l'heure actuelle pour effectuer diverses opérations. Cependant, l'un des inconvénients de l'obtention de l'heure locale est qu'elle est affectée par l'heure du système informatique de l'utilisateur. Si l'heure de l'ordinateur de l'utilisateur est incorrecte, l'heure obtenue sera également erronée. Par conséquent, il est parfois nécessaire d’obtenir l’heure du réseau pour garantir l’exactitude.

Alors comment obtenir l'heure du réseau ? Une approche courante consiste à obtenir l’heure actuelle via l’interface de demande d’heure. Ici, nous pouvons utiliser jQuery pour obtenir l'heure du réseau.

Méthode de réglage manuel de l'heure jQuery

Dans jQuery, nous pouvons utiliser le code suivant pour obtenir l'heure du réseau :

$.ajax({

url: 'http://quan.suning.com/getSysTime.do',
type: 'post',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function(data){
    console.log(data);//data为当前时间格式为YYYY-MM-DD HH:MM:SS，例如 2022-01-01 12:00:00
}

});

Ici, nous obtenons l'heure actuelle via l'interface fournie par Heure Suning.com. Parmi eux, le paramètre url est l'adresse de l'interface, le paramètre dataType est le type de données de réponse, nous utilisons ici le format JSONP pour obtenir les données, le paramètre jsonp est le nom de la fonction de rappel spécifiée et le paramètre jsonpCallback est le nom de. la fonction de rappel.

Lorsque la demande réussit, nous pouvons obtenir les données d'heure actuelles dans la fonction de rappel de réussite. Ici, nous imprimons l'heure sur la console.

Et si vous souhaitez régler l'heure manuellement ? Nous pouvons utiliser le code suivant :

const date = new Date('2022/01/01 12:00:00');
console.log(date);

Ici, nous passons d'abord une chaîne Date Pour créer un Objet Date, le format est AAAA/MM/JJ HH:MM:SS L'heure que nous définissons ici est le 01/01/2022 12:00:00. Ensuite, imprimez simplement l'objet sur la console. Si nous avons besoin d'obtenir l'horodatage de cette heure, nous pouvons utiliser le code suivant :

const timeStamp = date.getTime();
console.log(timeStamp);

Ici, nous pouvons obtenir l'heure actuelle via getTime méthode de l'horodatage de l'objet Date (le nombre de millisecondes entre le 1er janvier 1970 00:00:00 UTC et l'heure actuelle), puis imprime la valeur sur la console.

Méthode de synchronisation automatique de l'heure jQuery

Bien qu'il soit pratique de régler l'heure manuellement, dans les applications réelles, nous préférons que l'heure puisse être automatiquement synchronisée et mise à jour en permanence. Ici, nous pouvons utiliser la méthode setInterval pour mettre à jour l'heure régulièrement.

Par exemple, nous pouvons utiliser le code suivant :

function syncTime(){

$.ajax({
    url: 'http://quan.suning.com/getSysTime.do',
    type: 'post',
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    success: function(data){
        const date = new Date(data.replace(/-/g, '/'));
        $('#current-time').html(date.toLocaleString());
    }
});

}
//Mettre à jour l'heure toutes les secondes
setInterval(syncTime, 1000);

Ici, nous définissons une méthode syncTime pour Get et mettre à jour l'heure. Dans la fonction de rappel de réussite, nous formatons la chaîne d'heure renvoyée, créons un objet Date via la nouvelle méthode Date et utilisons la méthode toLocaleString pour convertir l'heure au format local et affichons l'heure dans le dom avec l'identifiant de l'heure actuelle. élément.

À la fin, nous utilisons la méthode setInterval pour appeler périodiquement la méthode syncTime afin d'obtenir l'effet de synchronisation automatique de l'heure.

Résumé

Ci-dessus, nous avons présenté comment obtenir l'heure du réseau avec jQuery, ainsi que comment régler manuellement l'heure et synchroniser automatiquement l'heure. Dans les applications pratiques, nous devons choisir la méthode appropriée en fonction de la situation spécifique pour garantir l'exactitude de l'heure.

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!