Durch Klicken auf die Schaltfläche in nativem JS wird die Seite aktualisiert
Grund:
Die native Schaltfläche wird verwendet, und Sie müssen bei der Verwendung der nativen Schaltfläche Folgendes beachten: Standardtyp der nativen Schaltfläche button = 'submit' Dieser Attributwert verfügt standardmäßig über die Formularübermittlungsfunktion, sodass in Nicht-IE-Browsern Die Seite wird nach dem Klicken aktualisiert. Frage.
Lösung:
Ändern Sie das Standardattribut type='submit' in type='button'
tabindex
Legen Sie die Position für den Platzhalter in der Eingabe fest
input::-webkit-input-placeholder{
position：relative；left：20px；}
CSS passt die Anfangsposition des Textes und des Cursors in der Eingabe an
- Passen Sie den Text in der Eingabe, die Position des Platzhaltertexts und die Cursorposition an
input {
/*方法一*/
text-align = center; /*placeholder文字居中*/
text-align = left; /*placeholder文字居左*/
text-align = right; /*placeholder文字居右*/
/*方法二*/
padding-left：10px; /*placeholder文字距左10px*/
padding-right：10px; /*placeholder文字距右10px*/
/*方法三*/
box-sizing:border-box;
}
Das ist alles, Sie können den Wert von padding-left entsprechend Ihren Anforderungen ändern
Das Formular ist gestreckt, achten Sie auf die Änderung
//改变密码显示与隐藏的功能
//获取一下眼睛eye
var eye = document.getElementById("eye")
var eyeChange = document.getElementById("eyeChange")
//获取一下密码框usepassword
var usepassword = document.getElementById("usepassword")
function changeStatus() {
if (usepassword.type == "password") {
usepassword.type = "text"
eyeChange.src = "./img/显示.png"
}
else {
usepassword.type = "password"
eyeChange.src = "./img/隐藏.png"
}
}
<div class="input__inner">
<i id="imgpassword"><img src="./img/密码.png" alt=""></i>
<input type="password" autocomplete="off" placeholder="密码" class="offBorder" id="usepassword" >
<i id="eye" onclick="changeStatus()" ><img src="./img/隐藏.png" alt="" id="eyeChange"></i>
</div>
Cookie, SessionStorage, LocalStorage (nicht verfügbar)
Da es zu ermüdend ist, jedes Mal den Benutzernamen und das Passwort einzugeben, möchte ich meiner persönlichen Website eine Funktion zum Speichern von Passwörtern hinzufügen. Das vorherige Projekt wurde mithilfe von Browser-Cookies implementiert. Cookies können die Ablaufzeit festlegen, localStorage jedoch nicht, was der Fall ist Vorteil von Cookies. , aber der Cookie-Code ist relativ komplex. localStorage kann die Funktion perfekt ersetzen und der Code ist einfach. Es ist nicht erforderlich, die Ablaufzeit des Passworts im Projekt festzulegen, daher wird localStorage zur Implementierung verwendet.
Cookie (automatische Anmeldung)
Wenn die Cookie-Ablaufzeit nicht festgelegt ist, bleibt der Lebenszyklus des Cookies nur bestehen, bis der Browser geschlossen wird. Wenn die Ablaufzeit auf MaxValue eingestellt ist, läuft das Cookie nie ab. Da die meisten Browser die Größe von Cookies auf 4 KB begrenzen, können keine großen Datenmengen in Cookies gespeichert werden. Wenn der Browser so eingestellt ist, dass er Cookies deaktiviert, sind die im Programm verwendeten Cookie-Objekte ungültig.
Der Unterschied zwischen Cookie, SessionStorage und LocalStorage
1. Die Gültigkeitsdauer der Speicherzeit ist unterschiedlich
1. Die Gültigkeitsdauer des Cookies kann eingestellt werden. Standardmäßig läuft es nach dem Schließen des Browsers ab.
2. Die Gültigkeitsdauer von sessionStorage bleibt nur auf der aktuellen Seite erhalten und wird nach dem Schließen der aktuellen Sitzungsseite oder des Browsers ungültig.
3. Der Gültigkeitszeitraum von localStorage ist ohne manuelle Löschung immer gültig.
2. Unterschiedliche Speichergrößen
1. Der Cookie-Speicher beträgt etwa 4 KB und die Speicherkapazität ist gering. Im Allgemeinen kann eine Seite bis zu etwa 20 Informationen speichern.
2. Die Speicherkapazität von localStorage und sessionStorage beträgt 5 MB (offizielle Einführung, es kann einige Unterschiede zwischen Browsern geben)
3. Kommunikation mit dem Server
1. Cookies nehmen an der Kommunikation mit dem Server teil und werden im Allgemeinen im Header von HTTP-Anfragen übertragen, z. B. bei der Schlüsselüberprüfung usw.
2. localStorage und sessionStorage sind reine Front-End-Speicher und nehmen nicht an der Kommunikation mit dem Server teil.
4. Bequeme Lese- und Schreibvorgänge
Cookie-bezogene Vorgänge, der Cookie-Vorgang ist umständlicher und einige Daten können nicht gelesen und verarbeitet werden. 5. Unterstützung für Browser
1. Cookies sind schon früher erschienen und werden von allen derzeit verfügbaren Browsern unterstützt.
2. localStorage und sessionStorage erschienen später und werden von Browsern mit niedrigeren Versionen nicht unterstützt (z. B. IE8 und niedriger werden nicht unterstützt).
Das Ereignis brodelt
Manchmal haben wir diese Situation: Durch Klicken auf eine Schaltfläche (oder ein bestimmtes Element) wird eine Menüleiste angezeigt, und durch Klicken auf die Schaltfläche und den Bereich außerhalb der Menüleiste wird die Menüleiste ausgeblendet.
Dies wird hauptsächlich durch die Verhinderung der Ereignissprudelung implementiert .
Tab
Wenn Sie auf das Verzeichnis klicken, ist es sehr mühsam, zwischen den einzelnen Li zu wechseln. Zu diesem Zeitpunkt werden Tabulatoren verwendet, was prägnanter ist und die Codeleistung erheblich reduziert.
JS-Teil
var imgMe = document.getElementById("imgMe")
var Vergetable = document.getElementById("Vergetable")
var Users = document.getElementById("Users")
var Order = document.getElementById("Order")
var MyInfo = document.getElementById("MyInfo")
var Exit = document.getElementById("Exit")
function showVergetable() {
main.style.display = "block"
UserInfo.style.display = "none"
MyInfo.style.display = "none"
order.style.display = "none"
Vergetable.style.backgroundColor="rgb(54, 78, 88)"
Users.style.backgroundColor="rgb(70, 106, 121)"
Order.style.backgroundColor="rgb(70, 106, 121))"
MyInfo.style.backgroundColor="rgb(70, 106, 121)"
}
function show(evt, cityName,bool) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
if(bool!=true){
evt.currentTarget.className += " active";
}
}
HTML-Teil
<div class="menu">
<ul>
<li class="userMe">
<div id="imgMe" onclick="show(event, 'MyInfo',true)">
<img src="./img/favorite.jpg" alt="">
</div>
</li>
<li class="father tablinks active" id="Vergetable" onclick="show(event, 'main',false)">菜单管理</li>
<li class="father tablinks" id="Users" onclick="show(event, 'UserInfo',false)">用户管理</li>
<li class="father tablinks" id="Order" onclick="show(event, 'order',false)">订单管理</li>
<li class="father tablinks" id="MyInfoa" onclick="show(event, 'MyInfo',false)">个人信息</li>
<li class="father tablinks" id="Exit" onclick="exit()">退出登录</li>
</ul>
