suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert eine dynamische Prozessfortschrittsanzeigeleiste

js implementiert eine dynamische Prozessfortschrittsanzeigeleiste

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 14:11:512760Durchsuche

Dieses Mal werde ich Ihnen die dynamische Prozessfortschrittsanzeige mit js vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der dynamischen Prozessfortschrittsanzeige mit js?

1. Designideen

Unterteilt in die folgenden Schritte (nur als Referenz)

【Vertikale Linie】

Dies geschieht mithilfe des ul-List-Tags, das dafür sorgt, dass es jederzeit hinzugefügt und vertikal angeordnet werden kann

【Kleiner Kreis】

Das HTML-Tag scheint kein kleines Kreis-Tag bereitzustellen. Wenn ein Quadrat p mit einem Bogenmaß gleich der Länge (oder Breite) von p hinzugefügt wird, kann ein kleiner Kreis hinzugefügt werden realisiert. Das Band ist noch einfacher: Fügen Sie einfach Text direkt zu p

hinzu 【Text】

Der Text muss dem kleinen Kreis folgen und die gleiche horizontale Höhe wie der kleine Kreis beibehalten. Positionieren Sie ihn hier oben, um das Layout mit der gleichen horizontalen Höhe zu vervollständigen 【Dynamischer Effekt】

Selbstverständlich müssen die dynamischen Effekte des Frontends durch Javascript vervollständigt werden. Hier müssen zwei Hauptereignisse festgelegt werden, nämlich

Mouseover-Ereignis<a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a>

=“on_mous_move('info_name_1')“

<a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a>=”on_mous_move(‘info_name_1')” Mouse-out-Event

onmouseout=”on_mous_out(‘info_name_1')” Die Hauptlogik besteht darin, ❤ und zwei Leerzeichen vor und nach dem Text hinzuzufügen und den hinzugefügten Inhalt zu löschen

【Hinweis】

Für js besteht ein Leerzeichen tatsächlich aus 6 Zeichen „;“, daher müssen Sie beim Schneiden auf

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

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

2. Quellcode implementieren

Der Quellcode lautet wie folgt und dient nur als Referenz:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website! 
<!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>

Empfohlene Lektüre:

Angularjs implementiert den Bildvorschau-Upload


vue verwendet Axios und Kapselung


Das obige ist der detaillierte Inhalt vonjs implementiert eine dynamische Prozessfortschrittsanzeigeleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript html 封装 JS 事件 position ul
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：Bootstrap-Table implementiert die serverseitige Paging-FunktionNächster Artikel：Bootstrap-Table implementiert die serverseitige Paging-Funktion

In Verbindung stehende Artikel

Mehr sehen