J'ai commencé à apprendre JSP, donc je veux rendre l'affichage de l'heure dynamique sur JSP.
J'ai créé une classe Times
<%@ page import="data.Times"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var time="";
function showTime(){
<%
Times t=new Times();
%>
time = '<%=t.getTime()%>';
}
function startTime() {
showTime();
document.getElementById('time').innerHTML =time;
t = setInterval(function () {
startTime()
}, 500);
}
</script>
<style>
@font-face{
font-family: clock;
src:url(content/digital-7.ttf)
}
#time{
width: 100%;
margin: 0 auto;
font-family: clock;
font-size: 100px;
}
</style>
</head>
<body onload="startTime()">
<div id="time" align="center">
</div>
</body>
</html>
J'appelle getTime dans le fichier JSP
public class Times {
DateTimeFormatter dtf =null;
LocalDateTime now =null;
public Times()
{
dtf = DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss");
}
public String getTime()
{
now = LocalDateTime.now();
return dtf.format(now);
}
}
Mais le problème est que la page est chargée, cependant, l'heure est initialisée mais elle reste inchangée.
Si j'actualise la page, l'heure est correctement modifiée. Puis-je changer de manière dynamique du temps?
3 Réponses :
En gros, vous avez deux options principales:
AJAX peut être utilisé pour envoyer une requête à votre backend. Sur votre backend, vous pouvez répondre à ces requêtes AJAX avec l'heure, puis dans le rappel, actualiser la valeur de l'heure.
Vous pouvez également créer un objet Date en fonction de l'heure reçue du serveur et l'ajuster. Mais je suppose que vous êtes plus intéressé par la solution AJAX
Votre code envoie actuellement une page au navigateur où l'heure est correctement calculée au départ. Votre setInterval appelle showTime, mais <%=t.getTime()%> a été évalué sur le serveur avant l'envoi de la page. Vous devez établir une communication supplémentaire avec votre serveur si vous avez l'intention d'obtenir des informations à partir de là. Via AJAX, par exemple.
@ CengizAltürk vous êtes les bienvenus. De plus, je suis heureux que votre problème ait été résolu.
Lorsque vous affichez cette page, la JSP est exécutée une fois sur le serveur, ce qui signifie que t.getTime () est exécuté une fois .
Si vous effectuez un "Afficher la source" dans le navigateur Web, vous verrez que le serveur a généré les éléments suivants:
function showTime() {
const date = Date.now();
time = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
.toISOString() // yyyy-MM-ddTHH:mm:ss.SSSZ
.replace(/\..*/, '') // yyyy-MM-ddTHH:mm:ss
.replace(/T/, ' ') // yyyy-MM-dd HH:mm:ss
.replace(/-/g, '/'); // yyyy/MM/dd HH:mm:ss
}
Comme vous pouvez le voir, le La valeur de time est désormais fixée à la date / heure à laquelle le serveur a traité la JSP. L'appel répété de showTime () ne changera pas la valeur de time.
Si vous voulez que la valeur de l'heure soit "live", vous devez faire ceci en code JavaScript, pas en code JSP.
Voici un moyen de le faire, basé sur cette réponse a> à la question " Formater la date JavaScript comme aaaa-mm-jj ":
<script type="text/javascript">
var time="";
function showTime(){
time = '2020/03/03 17:47:45';
}
function startTime() {
showTime();
document.getElementById('time').innerHTML =time;
t = setInterval(function () {
startTime()
}, 500);
}
</script>
Merci pour votre réponse
le temps reste inchangé sauf si la page est invoquée. afin d'appeler dynamiquement, essayez de le rafraîchir pour l'intervalle spécifié comme ci-dessous, incluez-le dans
<meta http-equiv="refresh" content="5" >
Merci pour votre réponse
C'est un plaisir Cengiz Altürk
34.91.166.167 - Cette page est ma page de travail sur googleCloud
Cette question n'a rien à voir avec Javascript.