Web-Frontend
js-Tutorial
JavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke
JavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke
Dec 05, 2017 pm 02:26 PM
Bei unserer t?glichen Entwicklungsarbeit sto?en wir h?ufig auf kleine Funktionen, die ein Popup-Eingabeaufforderungsfeld oder eine Anzeige in der unteren rechten Ecke der Seite erfordern. So implementieren Sie ein Popup Eingabeaufforderungsfeld in der unteren rechten Ecke der Webseite? Heute stellen wir Ihnen vor, wie Sie mit JavaScript das Popup-Eingabeaufforderungsfeld in der unteren rechten Ecke realisieren!
Dieser Artikel erkl?rt anhand von Beispielen den Beispielcode des Popup-Werbeinformationsfelds in der unteren rechten Ecke der Webseite und teilt ihn als Referenz mit allen ist wie folgt
Rendering:
Spezifischer Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>網(wǎng)頁右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
width:200px;
height:0px;
position:absolute;
right:0;
bottom:0;
border:1px solid #666;
margin:0;
padding:1px;
overflow:hidden;
display:none;
}
#winpop .title{
width:100%;
height:22px;
line-height:20px;
background:#FFCC00;
font-weight:bold;
text-align:center;
font-size:12px;
}
#winpop .con{
width:100%;
height:90px;
line-height:80px;
font-weight:bold;
font-size:12px;
color:#FF0000;
text-decoration:underline;
text-align:center
}
#silu{
font-size:12px;
color:#666;
position:absolute;
right:0;
text-decoration:underline;
line-height:22px;
}
.close{
position:absolute;
right:4px;
top:-1px;
color:#FFF;
cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);//將對象的高度轉(zhuǎn)化為數(shù)字
if(popH==0){
MsgPop.style.display="block";//顯示隱藏的窗口
show=setInterval("changeH('up')",2);
}
else{
hide=setInterval("changeH('down')",2);
}
}
function changeH(str){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if(popH<=100){
MsgPop.style.height=(popH+4).toString()+"px";
}
else{
clearInterval(show);
}
}
if(str=="down"){
if(popH>=4){
MsgPop.style.height=(popH-4).toString()+"px";
}
else{
clearInterval(hide);
MsgPop.style.display="none"; //隱藏p
}
}
}
window.onload=function(){
var oclose=document.getElementById("close");
var bt=document.getElementById("bt");
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",3000);
oclose.onclick=function(){tips_pop()}
bt.onclick=function(){tips_pop()}
}
</script>
<body>
<p id="silu">
<button id="bt">3秒后會在右下角自動彈出窗口，如果沒有彈出請點(diǎn)擊這個按鈕</button>
</p>
<p id="winpop">
<p class="title">您有新的短消息！<span class="close" id="close">X</span></p>
<p class="con">1條未讀信息(</p>
</p>
</body>
</html> Der obige Code implementiert die von uns ben?tigten Funktionen. Hier finden Sie eine kurze Einführung in den Implementierungsprozess.
Umsetzungsprinzip:
Das Prinzip ist ganz einfach:
1. Platzieren Sie das Fenster in der unteren rechten Ecke die Webseite:
Der Implementierungscode lautet wie folgt:
#winpop {
width:200px;
height:0px;
position:absolute;
right:0;
bottom:0;
border:1px solid #666;
margin:0;
padding:1px;
overflow:hidden;
display:none;
}Der obige Code setzt das Windpop-Element auf absolute Positionierung, insbesondere auf die richtige und Die unteren Attributwerte werden auf 0 gesetzt. Dies stellt sicher, dass es sich in der unteren rechten Ecke der Webseite befindet, und setzt au?erdem seine H?he auf 0 Pixel, was bedeutet, dass es standardm??ig ausgeblendet ist.
2. So zeigen und verbergen Sie:
Die Funktion ?changeH()“ wird zu jedem angegebenen Zeitpunkt über die Timer-Funktion ?setInterval()“ aufgerufen Der übergebene Wert stellt die H?he von Windpop konstant ein, um ein reibungsloses Erscheinen und Verschwinden dieses Fensters zu erreichen. Das Prinzip ist ungef?hr das gleiche wie oben, daher werde ich es hier nicht viel vorstellen.
Zusammenfassung:
Dieser Artikel verwendet Beispiele und eine Einführung in den Implementierungsprozess und die Prinzipien, um Freunden eine bessere Erkl?rung zu geben, die ich habe Ich habe JavaScript verwendet, um die Methode zum Einblenden des Eingabeaufforderungsfelds in der unteren rechten Ecke zu realisieren. Ich glaube, jeder hat ein besseres Verst?ndnis dafür! Ich hoffe, es hilft Ihnen bei Ihrer Arbeit!
Verwandte Empfehlungen:
Beispielcode für ein Popup-Fenster in der unteren rechten Ecke von Pure js
js-Popup-Effektcode in der unteren rechten Ecke (nur IE)
js erkennt den Pop- oben in der unteren rechten Ecke imitiert MSN mit Schlie?funktion Fenstercode
Das obige ist der detaillierte Inhalt vonJavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Wie entferne ich das Wasserzeichen der Testkopie in der unteren rechten Ecke von win11 24H2? Tipps zum Entfernen der Testkopie in der unteren rechten Ecke von win11
Jun 01, 2024 pm 09:52 PM
Wie entferne ich den Bewertungskopietext in der unteren rechten Ecke von win1124H2? Wenn wir das System verwenden, zeigt der Desktop manchmal ein transparentes Wasserzeichen in der unteren rechten Ecke des Bildschirms an. Wie entfernen wir dieses transparente Wasserzeichen? Benutzer k?nnen für den Betrieb direkt Software von Drittanbietern verwenden. Lassen Sie sich auf dieser Website den Benutzern sorgf?ltig vorstellen, wie das Wasserzeichen auf der Testversion von win1124H2 entfernt wird. Um das Wasserzeichen auf der Evaluierungskopie von win1124H2 zu entfernen, laden Sie das UniversalWatermarkDisabler-Tool herunter. Nach der Ausführung werden die aktuelle Systemversion und der Wasserzeichenstatus angezeigt. Wenn unter ?Status“ ?Bereit zur Installation“ angezeigt wird, kann es entfernt werden.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erl?utert. 1. WebSocket-Technologie
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen geh?ren die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Gr??e des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erw?hnenswert
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS
Dec 17, 2023 pm 06:55 PM
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen M?glichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden h?ufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das t?gliche Leben und die Entscheidungsfindung von gro?er Bedeutung. Mit der Weiterentwicklung der Technologie k?nnen wir genauere und zuverl?ssigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist h?ufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir h?ufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen
Dec 18, 2023 pm 03:39 PM
Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine h?ufig verwendete Methode der technischen Analyse. Sie k?nnen den sich ?ndernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verst?ndnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zun?chst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns h?ufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erl?utert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
