Javascript-Essenz-Codesatz für Webseiten

Autor：Eve Cole Aktualisierungszeit：2009-06-08 18:25:37

【1. Gewöhnliches Popup-Fenster】
Tatsächlich ist der Code sehr einfach:

Da es sich hierbei um einen Teil des Javascript-Codes handelt, sollten sie zwischen dem <SCRIPT LANGUAGE=javascript>-Tag und </script> platziert werden.  sind für einige ältere Browser wirksam. In diesen alten Browsern wird der Code im Tag nicht als Text angezeigt. Entwickeln Sie diese gute Angewohnheit.
window.open ('page.html') wird verwendet, um das Popup eines neuen Fensters page.html zu steuern. Wenn sich page.html nicht im selben Pfad wie das Hauptfenster befindet, sollte der Pfad vorne angegeben werden Absolute Pfade ([url]http:// )[/url] und relative Pfade (../) sind beide akzeptabel.
Sie können entweder einfache oder doppelte Anführungszeichen verwenden, mischen Sie sie jedoch nicht.
Dieser Code kann an einer beliebigen Stelle im HTML eingefügt werden, zwischen <head> und </head> oder zwischen <body> und </body>. Je früher der Code ist, desto früher wird er ausgeführt, insbesondere wenn die Seite Der Code ist lang und Sie möchten, dass die Seite früher angezeigt wird. Platzieren Sie ihn einfach so weit nach vorne wie möglich.

[2. Popup-Fenster nach der Einstellung]
Lassen Sie uns über die Einstellungen von Popup-Fenstern sprechen. Fügen Sie einfach etwas mehr zum obigen Code hinzu. Passen wir das Erscheinungsbild, die Größe und die Popup-Position dieses Popup-Fensters an die spezifischen Bedingungen der Seite an.

Parametererklärung:

<SCRIPT LANGUAGE=javascript> js-Skript startet;
window.open-Befehl zum Öffnen eines neuen Fensters;
'page.html' Der Dateiname des Popup-Fensters;
'newwindow' Der Name des Popup-Fensters (nicht der Dateiname), optional, kann durch leer ersetzt werden '';
Höhe = 100 Fensterhöhe;
Breite=400 Fensterbreite;
top=0 Pixelwert über dem Fenster vom Bildschirm;
left=0 Der Pixelwert des Fensters von der linken Seite des Bildschirms;
toolbar=nein, ob die Symbolleiste angezeigt werden soll, ja, um sie anzuzeigen;
Menüleiste, Bildlaufleisten repräsentieren Menüleisten und Bildlaufleisten.
resizable=no, ob die Änderung der Fenstergröße zugelassen werden soll, ja, um dies zuzulassen;
location=nein, ob die Adressleiste angezeigt werden soll, ja, um dies zuzulassen;
status=no gibt an, ob die Informationen in der Statusleiste angezeigt werden sollen (normalerweise wurde die Datei geöffnet), ja ist zulässig;
</SCRIPT> js-Skript endet

[3. Verwenden Sie Funktionen zur Steuerung von Popup-Fenstern]
Unten finden Sie einen vollständigen Code.
<html>
<Kopf>
<script LANGUAGE=javascript>

</script>
</head>
<body onload=openwin()>
..beliebiger Seiteninhalt...
</body>
</html>

Hier wird eine Funktion openwin() definiert, deren Funktionsinhalt darin besteht, ein Fenster zu öffnen. Es erfüllt keinen Zweck, bis es aufgerufen wird.
Wie nennt man es?

Methode 1: <body onload=openwin()> Ein Fenster erscheint, wenn der Browser die Seite liest;
Methode 2: <body onunload=openwin()> Ein Fenster erscheint, wenn der Browser die Seite verlässt;
Methode 3: Anruf mit Verbindung:
<a href=Hinweis: Verwenden Sie „Methode 4: Aufruf mit einer Schaltfläche:
<input type=button onclick=openwin() value=open window>

[2 Fenster werden gleichzeitig angezeigt]

Nehmen Sie geringfügige Änderungen am Quellcode vor:
<script LANGUAGE=javascript>

</script>

Um zu verhindern, dass sich die beiden Pop-up-Fenster gegenseitig verdecken, steuern Sie die Pop-up-Position mit „Oben“ und „Links“ so, dass sie sich nicht gegenseitig verdecken. Schließlich können Sie es mit den vier oben genannten Methoden aufrufen.
Hinweis: Die Namen der beiden Fenster (newwindows und newwindow2) sollten nicht identisch sein, oder sie sollten alle leer sein. OK?

[5. Das Hauptfenster öffnet die Datei 1.htm und gleichzeitig wird das kleine Fenster page.html angezeigt.]

Der folgende Code wird zum <head>-Bereich des Hauptfensters hinzugefügt:

[6. Zeitliche Steuerung des Schließens von Popup-Fenstern]

Als Nächstes führen wir eine gewisse Steuerung der Popup-Fenster durch, um einen besseren Effekt zu erzielen. Wenn wir der Popup-Seite einen kleinen Code hinzufügen (beachten Sie, dass er dem HTML von page.html hinzugefügt wird, nicht der Hauptseite, sonst ...), wäre es dann nicht cooler, wenn er danach automatisch geschlossen würde? 10 Sekunden?

Fügen Sie zunächst den folgenden Code zum <head>-Bereich der page.html-Datei hinzu:
<script language=javascript>

function closeit() {

setTimeout(self.close(),10000) //Milliseconds

}

</script>
Verwenden Sie dann den Satz <body onload=closeit()>, um den ursprünglichen <BODY>-Satz in page.html zu ersetzen. (Vergessen Sie nicht, diesen Satz zu schreiben! Die Funktion dieses Satzes besteht darin, den Code zum Schließen des Fensters aufzurufen und das Fenster dann nach 10 Sekunden automatisch zu schließen.)

[7. Fügen Sie dem Popup-Fenster eine Schaltfläche zum Schließen hinzu.]
<FORMULAR>
<INPUT TYPE='BUTTON' value='Close' onClick='window.close()'>
</FORM>
Haha, jetzt ist es noch perfekter!

[8. Popup-Fenster enthalten – zwei Fenster auf einer Seite]

Die obigen Beispiele enthalten alle zwei Fenster, eines ist das Hauptfenster und das andere ist ein kleines Popup-Fenster.
Mithilfe des folgenden Beispiels können Sie den oben genannten Effekt auf einer Seite vervollständigen.

<html>
<Kopf>
<SCRIPT LANGUAGE=javascript>
Funktion openwin()
{
OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//In einer Zeile schreiben
OpenWindow.document.write(<TITLE>Beispiel</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hallo!</h1>)
OpenWindow.document.write(Neues Fenster geöffnet!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<Körper>
<a href=<input type=button onclick=openwin() value=Fenster öffnen>
</body>
</html>

Schauen Sie sich den Code in OpenWindow.document.write() an. Ist das nicht Standard-HTML? Schreiben Sie einfach weitere Zeilen entsprechend dem Format. Beachten Sie unbedingt, dass ein Fehler auftritt, wenn ein Etikett mehr oder ein Etikett weniger vorhanden ist. Denken Sie daran, es mit OpenWindow.document.close() zu beenden.

[9. Ultimative Anwendung – Cookie-Kontrolle von Popup-Fenstern]

Denken Sie daran, dass das obige Popup-Fenster zwar cool ist, aber ein kleines Problem hat (Sie müssen es nicht bemerkt haben, wenn Sie in Freude versunken sind?) Zum Beispiel: Wenn Sie das obige Skript in eine Seite einfügen, die häufig übergeben werden muss (z. B. die Homepage), wird das Fenster jedes Mal angezeigt, wenn die Seite aktualisiert wird. Ist das nicht sehr ärgerlich? :-(
Gibt es eine Lösung? Ja! ;-) Folge mir.
Wir können Cookies verwenden, um dies zu steuern.
Fügen Sie zunächst den folgenden Code zum <HEAD>-Bereich des HTML-Codes der Hauptseite hinzu:

Funktion loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie=popped=yes
}
}

</script>

Ersetzen Sie dann den ursprünglichen <BODY>-Satz auf der Hauptseite durch <body onload=loadpopup()> (beachten Sie, dass es sich nicht um openwin, sondern um loadpop handelt!). Sie können versuchen, die Seite zu aktualisieren oder sie erneut aufzurufen. Das Fenster wird dann nie wieder angezeigt. Echter Pop-Only-Once!

Zu diesem Zeitpunkt sind die Fähigkeiten zur Erstellung und Anwendung von Popup-Fenstern im Grunde genommen erschöpft. Ich hoffe, dass es für Freunde, die Webseiten erstellen, hilfreich sein wird .
Es ist zu beachten, dass es am besten ist, die Groß- und Kleinschreibung in JS-Skripten konsistent zu halten.

1. Öffnen Sie ein Vollbildfenster

2. Öffnen Sie ein Fenster, das mit F11 formatiert wurde

3. Öffnen Sie ein Fenster mit einer Favoriten-Link-Symbolleiste

4. Webseiten-Dialogfeld

<html>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
<b> target=_blank>[url]http://www.pconline.com.cn[/url]</b>
</body>
</html>

showModalDialog() oder showModelessDialog() zum Aufrufen des Webdialogfelds. Der Unterschied zwischen showModalDialog() und showModelessDialog() besteht darin, dass das von showModalDialog() geöffnete Fenster (kurz modales Fenster) auf dem übergeordneten Fenster platziert wird Um auf das übergeordnete Fenster zugreifen zu können, muss es geschlossen sein (es wird empfohlen, es so wenig wie möglich zu verwenden, um Personen nicht zu beleidigen); Sie können auf das vom übergeordneten Fenster geöffnete Fenster zugreifen, ohne es zu schließen nach dem Öffnen.

dialogHeight: iHeight legt die Höhe des Dialogfensters fest.
dialogWidth: iWidth legt die Breite des Dialogfensters fest.
dialogLeft: iXPos legt die linke Position des Dialogfensters relativ zur oberen linken Ecke des Desktops fest.
dialogTop: iYPos legt die obere Position des Dialogfensters relativ zur oberen linken Ecke des Desktops fest.
center: {yes |. 1 |. 0} Gibt an, ob das Dialogfeld auf dem Desktop zentriert werden soll.
help: {yes |. 0 } Gibt an, ob kontextsensitive Hilfesymbole im Dialogfenster angezeigt werden sollen. Der Standardwert ist „ja“.
veränderbar: {ja |. 1 |. 0} Gibt an, ob das Dialogfenster veränderbar ist. Der Standardwert ist „nein“.
Status: {ja |. 1 |. 0} Gibt an, ob das Dialogfenster eine Statusleiste anzeigt. Der Standardwert ist „Ja“ für nichtmodale Dialogfenster und „Nein“ für modale Dialogfenster.

Klassischer Webseitencode
1. Die rechte Maustaste wird vollständig blockiert und es wird kein Rechtsklick-Menü angezeigt.
<body oncontextmenu=window.event.returnvalue=false>

kann auch im Tabellenrahmen auf Webseiten verwendet werden
<table border oncontextmenu=return(false)><td>nein</table>

2. Abwählen und Kopieren verhindern
<body onselectstart=return false>

3. Kein Einfügen erlaubt
<body onpaste=return false>

4. Verhindern Sie das Kopieren
<body oncopy=return false; oncut=return false;>

5. Ändern Sie die IE-Adressleiste in Ihr eigenes Symbol
<link rel=Shortcut Icon href=favicon.ico>

Beschreibung: Informationen zur Erstellung der Datei favicon.ico. Sie können zunächst in FW ein Bild erstellen, ein kleines Symbol für Ihre eigene Website. Ändern Sie dann die Dateiattribute in *.ico in ACD und übertragen Sie dann die von Ihnen erstellte *.ICO-Datei in Ihr Serververzeichnis. Anschließend können Sie den obigen Code verwenden, um dies zu erreichen bar Verwenden Sie Ihr benutzerdefiniertes Symbol.

6. Ihr Symbol kann in den Favoriten angezeigt werden
<link rel=Bookmark href=favicon.ico>

Anleitung: Die Produktionsmethode ist die gleiche wie oben. Es ist nur so, dass die Anzeigemethode anders ist. Dies ist das personalisierte Symbol, das angezeigt wird, wenn andere Ihre Webadresse mit einem Lesezeichen versehen.

7. Schließen Sie die Eingabemethode
<input style=ime-mode:disabled>

Erläuterung: Dieser Code wird beim Absenden des Formulars verwendet. Das heißt, andere Eingabemethodenmodi können bei der Dateneingabe nicht verwendet werden.

8. Tragen Sie immer einen Rahmen
<script language=javascript></script>

Erläuterung: Frames.htm ist Ihre Webseite. Dies ist auch eine Möglichkeit, die Seite zu schützen.

9. Verhindern Sie, dass etwas hereingelegt wird
<SCRIPT LANGUAGE=javascript></SCRIPT>

10. Webseiten werden nicht gespeichert als
<noscript><iframe src=*.html></iframe></noscript>
Hinweis: <noscirpt> hat eine breite Palette von Verwendungsmöglichkeiten, darunter die Ungültigmachung von JS-Anzeigen.

11. Überprüfen Sie die Quelldateien
<Eingabetyp=Schaltflächenwert=Webseiten-Quellcode anzeigen
onclick=window.location = 'view-source:'+ target=_blank>[url]http://bbs.055.cn/test.htm[/url]';>

12.COOKIE-Skripteintrag ist eine sehr nützliche

Funktion get_cookie(Name) {
var search = Name + =

var returnvalue = ;

if (documents.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) { // wenn Cookie vorhanden ist

offset += search. Länge

// Index des Wertanfangs festlegen

end = document.cookie.indexOf(;, offset);

// Index des Endes des Cookiewerts festlegen

if (end == -1)

end = document.cookie.length=

unescape (documents.cookie.substring(offset, end))

}

return returnvalue

}

function loadpopup(){

if (get_cookie('popped')==''){

openpopup()

document.cookie=popped=yes

}

Hinweis: Das Obige ist JS-Code, bitte fügen Sie die Start- und Endzeichen selbst hinzu

13. Verwendung des Innenrahmens <IFRAME>
Das Verwendungsformat des Iframe-Tags ist:

Beispiel: <iframe name=mm src=http://bbs.055.cn;; width=100% height=100% marginwidth=0 marginheight= ... ot; frameborder=0 scrolling=no></iframe>

14 .Fügen Sie den folgenden Code hinzu, um im Quellcode automatisch zu <head>…</head> zu springen:
<meta http-equiv=refreshcontent=3;URL=http://bbs.055.cn;

Erklärung: content=3 bedeutet Aktualisierung der URL in 3 Sekunden

15. Wie ändere ich die Mausform eines Links? Fügen Sie einfach diesen Code zum Link hinzu oder schreiben Sie ihn wie oben beschrieben in CSS:

style=cursor:hand style=cursor:crosshair
style=cursor:text style=cursor:wait
style=cursor:move style=cursor:help
style=cursor:e-resize
style=cursor:n-resize
style=cursor:nw-resize style=cursor:w-resize
style=cursor:s-resize
style=cursor:se-resize
style=cursor:sw-resize

Sie müssen nur den obigen Code zum Link oder zum Stilbereich der Seite hinzufügen, um die Maus zu diversifizieren.

16. Vollbildanzeige
<Formular>
<div align=center>
<input type=BUTTON name=FullScreen value=Full Screen onClick=window.open(document.location, 'big', 'fullscreen=yes')>
</div>
</form>

Platzieren Sie es im Bereich <body>.

17. Als Startseite

festlegen

<!--
Funktion default_home(){
this.home.style.behavior='url(#default#homepage)';this.home.setHomePage([url]http://bbs.055.cn/[/url]';
}
var focusok=false;
if (navigator.appName == Netscape{
focusok=true;
}
vers=navigator.appVersion;
if (navigator.appName == Microsoft Internet Explorer{
pos=vers.lastIndexOf('.');
vers=vers.substring(pos-1,vers.length);
}
proper_version=parseFloat(vers);

if(proper_version>=5){
focusok=true;
}
Funktion launchstock1(htmlurl){
var stock=window.open(htmlurl,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
resizable=no,width=700,height=510;
if(focusok){
stock.focus();
}
return true;
}
Funktion launchstock(){
var stock=window.open(,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,

resizable=no,width=700, Höhe=510;
if(focusok){
stock.focus();
}
return true;
}
// -->
</script>
<a href=# name=home onClick=defaul_home(); title===E-generation time==>Als Homepage festlegen</a>

18. Hier ist der Code zum Hinzufügen von Favoriten

<a href=# onClick=window.external.addFavorite([url]http://bbs.055.cn[/url]';.'Dawn Accord') target=_self title = Dawn Accord>Zu Favoriten hinzufügen</a>

19. Der folgende Code für Flash-Bildeffekte wird zum <head>-Bereich hinzugefügt
<SCRIPT-Sprache=Javascript>
<!--
Funktion makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
anders
cur.filters.alpha.opacity=20
}

//-->

</SCRIPT>
Der folgende Code wird zum Bereich <body> hinzugefügt
<img src=/u/info_img/2009-06/08/logo.gif;; style=filte ... nbsp;onMouseOver=makevisible(this,0) onMouseOut=makevisible(this,1) width=63 height=56 > //Bitte ändern Sie die Bildadresse selbst

20. Ladefortschrittsbalken

<table cellpacing=0 cellpadding=0 bgcolor=#FFFFFF width=40% id=P><tr><td>
<table cellpacing=0 cellpadding=0 bgcolor=#0000FF height=18 id=Q><tr><td></td></tr></table></td></tr></table>
</center>
<Skriptsprache=Javascript>
var R = 0; laden();
function load() {R = R + 2; Q.style.width = R + % time= setTimeout(load(),50);
if (R > 100) {clearTimeout(time); P.style.width=0}}
</script>
27 Vollbild
<Skriptsprache=Javascript>
window.open('index.asp','','fullscreen=1');
</script>

21. Hintergrundbild scrollen

<body scroll=no background=images/bg.jpg link=#00FF00 alink=#FF0000 vlink=#00FF00 bgcolor=#000080 topmargin=8>
<Skriptsprache=Javascript>
var backgroundOffset = 0;
var bgObject = eval('document.body');
Funktion scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = 0 + backgroundOffset;}
varScrollTimer = window.setInterval(scrollBG(410), 20)
</script>

22. Webseiten werden nicht zwischengespeichert.

HTML-Seiten
<META HTTP-EQUIV=pragma CONTENT=no-cache>
<META HTTP-EQUIV=Cache-Control CONTENT=kein Cache, muss erneut validiert werden>
<META HTTP-EQUIV=expires CONTENT=Mi, 26. Februar 1997 08:21:57 GMT>
Oder <META HTTP-EQUIV=expires CONTENT=0>
ASP webpageResponse.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = kein Cache
PHP-Webseite
header(Läuft ab: Mo, 26. Juli 1997 05:00:00 GMT;
header(Cache-Control: kein Cache, muss erneut validiert werden;
header(Pragma: no-cache;

23.

<%
'Definieren Sie einige Konstanten für die Datenbankverbindung
Const adOpenForwardOnly = 0 'Der Cursor durchsucht Datensätze nur vorwärts und unterstützt kein Paging, Recordset und Bookmark
Const adOpenKeyset = 1 'Keyset-Cursor, von anderen Benutzern an Datensätzen vorgenommene Änderungen werden im Datensatzsatz widergespiegelt, von anderen Benutzern hinzugefügte oder gelöschte Datensätze werden jedoch nicht im Datensatzsatz widergespiegelt. Unterstützt Paging, Recordset und Lesezeichen
Const adOpenDynamic = 2 'Dynamische Cursor haben die leistungsstärksten Funktionen, verbrauchen aber auch die meisten Ressourcen. Von Benutzern vorgenommene Änderungen an Datensätzen sowie das Hinzufügen oder Löschen von Datensätzen werden im Datensatz widergespiegelt. Unterstützt das Surfen mit vollem Funktionsumfang (nicht von ACCESS unterstützt).
Const adOpenStatic = 3 'Der statische Cursor ist nur eine Momentaufnahme der Daten, die der Benutzer an Datensätzen vornimmt; das Hinzufügen oder Löschen von Datensätzen wird nicht im Datensatz widergespiegelt. Unterstützt das Vorwärts- oder Rückwärtsbewegen
Const adLockReadOnly = 1 'Sperrtyp, Standard, schreibgeschützt, es können keine Änderungen vorgenommen werden
Const adLockPessimistic = 2 'Den Datensatz beim Bearbeiten sofort sperren, der sicherste Weg
Const adLockOptimistic = 3 'Das Recordset wird nur gesperrt, wenn die Update-Methode aufgerufen wird, und andere vorherige Vorgänge können den aktuellen Datensatz weiterhin ändern, einfügen und löschen.
Const adLockBatchOptimistic = 4 „Datensätze werden beim Bearbeiten nicht gesperrt und Änderungen, Einfügungen und Löschungen werden im Stapelmodus durchgeführt.“
Const adCmdText = &H0001
Const adCmdTable = &H0002
%>

24. Fenster minimieren, maximieren und schließen
<Objekt-ID=hh1 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Befehlswert=Minimieren></object>
<Objekt-ID=hh2 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=Befehlswert=Maximieren></object>
<OBJECT id=hh3 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11>
<PARAM NAME=Befehlswert=Schließen></OBJECT>
<input type=button value=minimize onclick=hh1.Click()>
<input type=button value=maximize onclick=hh2.Click()>
<input type=button value=Close onclick=hh3.Click()>

Hinweis: Dieses Beispiel ist für IE geeignet

25. Bestimmen Sie die Quelle der vorherigen

ASP-Seite:
request.servervariables(HTTP_REFERER
Javascript:
document.referrer

26. Der Cursor wird am Ende des Textes im Textfeld

angehalten

functioncc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value=123 onfocus=cc()>

Beschreibung: Geeignet für die Übermittlung von Formulardaten