suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Methode zur Anzeige des Prozessfortschrittsbalkens durch Kombination von JS und HTML

Einführung in die Methode zur Anzeige des Prozessfortschrittsbalkens durch Kombination von JS und HTML

巴扎黑
巴扎黑Original
2017-09-04 09:27:492659Durchsuche

Die auf der Kombination von JS und HTML basierende Prozessfortschrittsanzeige ist sehr praktisch und kann auf allen wichtigen Websites verwendet werden. Der folgende Editor erläutert Ihnen ausführlich die Idee der Implementierung der Prozessfortschrittsanzeige durch die Kombination von JS und HTML. Was Sie brauchen Freunde, beziehen Sie sich bitte darauf

Der Effekt ist wie folgt:

Einführung in die Methode zur Anzeige des Prozessfortschrittsbalkens durch Kombination von JS und HTML

1. Designideen

Es ist in die folgenden Schritte unterteilt (nur als Referenz)

[Vertikale Linien]

Dies wird mit dem ul-List-Tag erstellt , wodurch sichergestellt wird, dass es jederzeit hinzugefügt und vertikal angeordnet werden kann

【Kleiner Kreis】

Das HTML-Tag scheint kein kleines Kreis-Tag bereitzustellen. Hier wird p mit a hinzugefügt Der Bogenmaßwinkel muss vervollständigt werden, und ein Quadrat p wird mit einem Bogenmaß gleich der Länge (oder Breite) von p hinzugefügt, um einen kleinen Kreis zu erhalten. Das Band ist noch einfacher. Sie können Text direkt zu p hinzufügen.

【Text】

Der Text muss dem kleinen Kreis folgen und sich auf derselben Ebene wie der kleine Kreis befinden. Position: absolut; oben setzen, um das Layout mit der gleichen horizontalen Höhe zu vervollständigen

[Dynamischer Effekt]

Der dynamische Effekt des Frontends muss hier natürlich durch Javascript vervollständigt werden Es müssen zwei Hauptereignisse festgelegt werden, nämlich

Maus rein-Ereignisonmouseover=”on_mous_move(‘info_name_1')”

Maus raus-Ereignisonmouseout=”on_mous_out(‘info_name_1')”

Die Hauptlogik besteht darin, ❤ hinzuzufügen und zwei Leerzeichen vor und nach dem Text und löschen Sie den hinzugefügten Inhalt

[Hinweis]

Ein Leerzeichen besteht tatsächlich aus 6 Zeichen „ “ Sie müssen also beim Schneiden aufpassen

. . . . Das ist alles, hier ist der Quellcode der Implementierung

--------------------------------- - ---------------------------------------------

2. Implementierungsquellcode

Der Quellcode lautet wie folgt und dient nur als Referenz: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>一个好看的进度页面</title>
</head>
<body>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  a, img {
    border: 0;
  }
  body {
    background: #f2f2f2;
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
  }
  /* stepInfo */
  .stepInfo {
    position: relative;
    background: #f2f2f2;
    margin: 80px auto auto 100px;
    height: 240px;
  }
  .stepInfo ul {
    /*float: left;*/
    height: 100%;
    width: 0.6em;
    background: #45a0f3;
  }
  .stepIco {
    /*圆形显示*/
    border-radius: 1.4em;
    padding: 0.2em;
    background: #45a0f3;
    text-align: center;
    line-height: 1.4em;
    color: #fff;
    position: absolute;
    width: 1.4em;
    height: 1.4em;
  }
  .stepIco1 {
    left: -0.7em;
    top: -1%;
  }
  .stepIco2 {
    left: -0.7em;
    top: 50%;
  }
  .stepIco3 {
    left: -0.7em;
    top: 95%;
  }
  .stepText {
    color: #666;
    margin-top: 0.2em;
    width: 4em;
    text-align: center;
    margin-left: -1.4em;
  }
  .info {
    /*信息布局及颜色*/
    position: absolute;
    font-size: large;
    color: black;
    margin: 0 0 0 25px;
    width: 200px;
    color: #45a0f3;
  }
  .info_1 {
    top: -1%;
  }
  .info_2 {
    top: 50%;
  }
  .info_3 {
    top: 95%;
  }
</style>
<script type="text/javascript">
  function on_mous_move(name) {
    var info = document.getElementsByName(name)[1];
    var value = info.innerHTML;
    info.innerHTML = " ❤ " + value;
    var p_info = document.getElementsByName(name)[0];
    p_info.style.backgroundColor = "#47009b";
  }
  function on_mous_out(name) {
    var info = document.getElementsByName(name)[1];
    var value = info.innerHTML;
    info.innerHTML = value.substr(13, value.length);
    var p_info = document.getElementsByName(name)[0];
    p_info.style.backgroundColor = "#45a0f3";
  }
</script>
<p class="stepInfo">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <p class="stepIco stepIco1" name="info_name_1">1</p>
  <p class="info info_1" onmouseover="on_mous_move(&#39;info_name_1&#39;)" onmouseout="on_mous_out(&#39;info_name_1&#39;)">
    <strong name="info_name_1">打开冰箱</strong>
  </p>
  <p class="stepIco stepIco2" name="info_name_2">2</p>
  <p class="info info_2" onmouseover="on_mous_move(&#39;info_name_2&#39;)" onmouseout="on_mous_out(&#39;info_name_2&#39;)">
    <strong name="info_name_2">把大象放进去</strong>
  </p>
  <p class="stepIco stepIco3" name="info_name_3">3</p>
  <p class="info info_3" onmouseover="on_mous_move(&#39;info_name_3&#39;)" onmouseout="on_mous_out(&#39;info_name_3&#39;)">
    <strong name="info_name_3">关上冰箱</strong>
  </p>
</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Anzeige des Prozessfortschrittsbalkens durch Kombination von JS und HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiele zur Erläuterung der asynchronen Programmierung von PromisNächster Artikel：Beispiele zur Erläuterung der asynchronen Programmierung von Promis

In Verbindung stehende Artikel

Mehr sehen