[JAVA] [Einführung in JSP + Servlet] Eine kleine Animation ♬

Dieses Mal habe ich versucht zu erkennen, dass ich mit JSP + Servlet animieren möchte. So wie es ist, ist Python einfacher, wenn es lokal ausgeführt wird, und die Schlussfolgerung ist, dass Sie in erster Linie mit js arbeiten können, aber ich habe viel gespielt, also werde ich es aufnehmen. Die Referenz dieses Mal ist wie folgt. 【Referenz】 ①js_arrays@JS [email protected] ② element.style.position - Anzeige der Positionseinstellung @JavaScriptist ③ @JS gebrauchsfertige Beispielsammlung, die Bilder in einem bestimmten Zeitraum wechselt ④ Bilddatei in JSP anzeigen

Was ich getan habe

・ Zeigen Sie das angegebene Bild an ·Animation

・ Zeigen Sie das angegebene Bild an

Beim letzten Mal konnte ich das Bild bereits anzeigen, sodass ich dieses Mal das durch Bildschirmeingabe angegebene Bild einfügen konnte. Zur Zeit verweise ich auf Referenz ④. Wenn Sie 12.png in den Textbereich eingeben, in dem Sie etwas eingeben und die Senden-Taste drücken, Folgendes wird ausgegeben.

[Referenz] Wenn der Fehler "Server-Port verwendet" angezeigt wird, siehe unten. Doppelklicken Sie auf den lokalen Beitrag Tomcat8 (Java8) und ändern Sie die Portnummer entsprechend (Erhöhung um 10). ⑤ Was tun, wenn Tomcat nicht gestartet werden kann, weil der Port verwendet wird

·Code

Die JSP ist wie folgt

`.jsp`


<body>
	<br/>
        <p>Vom Servlet"foo"Zeigen Sie die entsprechende Zeichenfolge mit an</p>
	<%= request.getAttribute("foo") %><br/>
        <p>Zum Servlet"name"Zeichenfolge senden</p>
	<form method="post" action="./helloPicture">
Gib etwas ein: <input type="text" name="name">
        <button type="submit">Senden</button>
    </form>
    <br/>
    <p>Vom Servlet"userName"Holen Sie sich eine Zeichenfolge und zeigen Sie sie an</p>
    <%= request.getAttribute("userName") %>
    <br/>
    <p>Vom Servlet"useName"Holen Sie sich die Zeichenkette und zeigen Sie das entsprechende Bild an</p>
    <img src="${pageContext.request.contextPath}/media/<%= request.getAttribute("userName") %>" width="400px" height ="400" name="<%= request.getAttribute("userName") %>">
	<br/>
</body>

Servlet ist wie folgt

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Übergeben Sie eine entsprechende Zeichenfolge an JSP
		request.setAttribute("foo", "1.png,2.png,...15.png ");
	    //Wenn es keinen Benutzernamen gibt"1.png "Zum Benutzernamen
	    String name = (String) request.getAttribute("userName");
		if (name == null || "".equals(name)) {
	        request.setAttribute("userName", "1.png ");
	    }
	    String view = "/WEB-INF/view/index_simple.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
	    //Versenden Sie userName an JSP
	    dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Zeichencode-Spezifikation
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    //Übergeben Sie den Inhalt von userName an name
	    request.setAttribute("userName", name);
   	    //Geben Sie die Namenszeichenfolge an die Konsole aus
        System.out.println(name);
        doGet(request, response);
	}

Übrigens ist die Anordnung jedes Elements wie folgt

·Animation

Zunächst ist die Anzeige der Gif-Animation dieselbe wie bei einem normalen Bild. Wenn Sie also face_smile11.gif in den obigen Textbereich einfügen und darauf drücken, wird an der Position des obigen Bildes Folgendes angezeigt. Und in vollem Umfang? Animation Wenn sich das Bild nicht bewegt, ist es genau das gleiche wie oben. Lassen Sie es also weg ... So bewegt sich der größere unten.

Code

Es gibt keine Änderung in Servlet. Mit anderen Worten, abgesehen von der obigen Geschichte funktioniert es innerhalb der JSP ohne Interaktion mit dem Servlet.

Ich brauche kein Servlet

`.jsp`


<body>
...
  	<img src="mayuyu.gif" width="400px" height ="400px" name="mayuyu">
	<div id="comment"></div>
</body>
<script type="text/javascript">
img_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*1
com_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*2
count_ = -1; //*2
mayuyuTimer();
function mayuyuTimer() {
	//Bildnummer
	count_++; //*3
	//Überprüfen Sie die Anzahl der Bilder
	if (count_ == img_.length) count_ = 0; //*4
	//Bildausgabe
	document.mayuyu.src = "${pageContext.request.contextPath}/media/"+img_[count_]; //*5
	//Kommentarausgabe
	document.getElementById("comment").innerHTML = com_[count_]; //*3
	//Nächster Timer-Aufruf
	setTimeout("mayuyuTimer()",500); //*6
}
</script>

Außerdem habe ich es satt, img_ = new Array (...) in die Mitte zu schreiben, und habe festgestellt, dass ich dies mit dem folgenden Code tun kann.

`.js`


<script>
var fruits, text, fLen, i;
fruits = ["1.png ","2.png "];
fLen = fruits.length;
    
function myFunction() {
  fLen = 26; //fruits.length;
  for (i = 3; i < fLen; i++) {
      fruits.push( i + ".png ");
  }
  for (i = 1; i < fLen; i++) {
      fruits.push( fLen - i + ".png ");
  }
  return fruits;
}
</script>
<script type="text/javascript">
img_ = myFunction();
...

Das? Dieser Code sieht länger aus. Das Wiederholen derselben Aktion ist jedoch geistig anstrengend. Daher ist es außergewöhnlich, sie in Code zu schreiben und zu verschieben.

Wenn Sie es von Hand bekommen, werden Sie mit ungefähr 10 Stück müde, aber in gewissem Sinne können Sie so viele einstellen, wie Sie möchten. Die oben genannten sind auf 51 Hin- und Rückfahrten bis zu 26 eingestellt. ** Auch die Verzeichnisstruktur ist genau die gleiche wie oben. ** ** **

Zusammenfassung

・ Zeigen Sie das angegebene Bild an ・ Versuchen Sie es mit Animation

Stellen Sie eine Reihe von Animationen mit Javascript ein

・ Ich werde etwas ausprobieren, das sich etwas mehr bewegt