Heim > Artikel > Web-Frontend > js implementiert eine dynamische Prozessfortschrittsanzeigeleiste
js implementiert eine dynamische Prozessfortschrittsanzeigeleiste
- php中世界最好的语言Original
- 2018-04-18 14:11:512747Durchsuche
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>
<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('info_name_1')" onmouseout="on_mous_out('info_name_1')">
<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('info_name_2')" onmouseout="on_mous_out('info_name_2')">
<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('info_name_3')" onmouseout="on_mous_out('info_name_3')">
<strong name="info_name_3">关上冰箱</strong>
</p>
</p>
</body>
</html>
Empfohlene Lektüre:
Angularjs implementiert den Bildvorschau-Uploadvue verwendet Axios und KapselungDas 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!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse