Web JavaScript Essence Code Set

Web JavaScript Essence Code Set _ Basics

Last Update:2017-01-18 Source: Internet

Author: User

Tags joins setinterval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

"1, normal pop-up window"

<script language=javascript>



</SCRIPT>

 are for some versions of browsers that do not display the code in the label as text in these old browsers

Come out. Both single and double quotes are OK, just don't mix.

"2, after the Set pop-up window"

<script language=javascript>



</SCRIPT>

Parameter explanation:

<script language=javascript> js script started;

window.open the command to eject a new window;

The filename of the ' page.html ' pop-up window;

' NewWindow ' pop-up window name, not required, available empty ' instead;

height=100 window height;

width=400 window width;

The pixel value of the Top=0 window from the top of the screen;

The pixel value of the left=0 window from the left side of the screen;

Toolbar=no whether the toolbar is displayed, yes for display;

Menubar,scrollbars represents the menu bar and scroll bar.

Resizable=no whether to allow changes to the window size, yes to allow;

Location=no whether the address bar is displayed, yes is allowed;

Status=no whether the information in the status bar is displayed (usually the file is open), yes to allow;

</SCRIPT> JS script End

"3, control pop-up window with function"

The following is a complete code.

<html>

<head>

<script language=javascript>



</script>

</head>

<body Onload=openwin () >

.....

</body>

</html>

Here defines a function openwin (), how to call it?

Method One: <body onload=openwin () > Browser pop-up window when reading the page;

Method Two: <body Onunload=openwin () > Browser out of the page pop-up window;

Method Three: Call with Link: Method Four: Use the button to call:

"4, pop-up 2 windows at the same time"

Change the source code a little bit:

<script language=javascript>



</script>

To avoid the 2 windows that pop up, use top and left to control the pop-up positions without overwriting each other. And I said it in the last

Four ways to call.

Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or simply all empty.

"5, the main window to open the file 1.htm, while pop-up small Windows page.html"

The following code is added to the main window <head> area:

<script language=javascript>



</script>

Join <body> Area:

<a href=1.htm Onclick=openwin () >open</a>.

"6, pop-up window of the timing off control"

Below we have some control of the pop-up window, the effect is better. If we add a small piece of code to the pop-up page (

Note that it is added to the page.html HTML, not the main page, otherwise ...), so that it automatically shuts down in 10 seconds is it cooler?

First, add the following code to the <head> area of the page.html file:

<script language=javascript>

function Closeit () {

SetTimeout (Self.close (), 10000)//MS

}

</script>

Then, then use <body Onload=closeit () > This sentence to replace the page.html in the central some <BODY> this sentence on it. (which

Never forget to write a word! The function of this sentence is to call the code that closes the window, and then close the window itself after 10 seconds. )

"7, add a Close button in the pop-up window"

<FORM>

<input type= ' BUTTON ' value= ' close ' onclick= ' window.close () ' >

</FORM>

"8, included pop-up window-one page two windows"

With the example below, you can do the above in one page.

<html>

<head>

<script language=javascript>

function Openwin ()

{

Openwindow=window.open (, Newwin, height=250,

Width=250,toolbar=no,scrollbars=+scroll+,menubar=no);

Write a line

OpenWindow.document.write (<TITLE> example </TITLE>)

OpenWindow.document.write (<body bgcolor=openwindow.document.write (<h1>Hello!</h1>)

OpenWindow.document.write (New window opened!)

OpenWindow.document.write (</BODY>)

OpenWindow.document.write (</HTML>)

OpenWindow.document.close ()

}

</SCRIPT>

</head>

<body>

<a href=<input Type=button onclick=openwin () value= open Window >

</body>

</html>

Look at the code inside OpenWindow.document.write () is not standard HTML? Just write more lines in the format

Can Be sure to pay attention to one more label or one less label will cause errors. Remember to end with OpenWindow.document.close ().

"9, pop-up window cookie control"

Recall that the pop-up window above is cool, but it's a little bit of a problem. For example, you put the above script in a need to frequently

page (such as the first page), then each refresh this page, the window will pop up once, is not very annoying? :-(

Solution:

We can use cookies to control it. First, add the following code to the <HEAD> area of the homepage HTML:

<script>

function Openwin () {

window.open (page.html,,width=200,height=200)

}

function Get_cookie (Name) {

var search = Name + =

var returnvalue =;

if (Documents.cookie.length > 0) {

offset = documents.cookie.indexOf (search)

if (offset!=-1) {

Offset + = Search.length

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

if (end = = 1)

end = Documents.cookie.length;

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

}

}

Return returnvalue;

}

function Loadpopup () {

if (Get_cookie (' popped ') = = ") {

Openwin ()

Documents.cookie=popped=yes

}

}

</script>

Then, with <body Onload=loadpopup () > (note not openwin but Loadpop!). Replace the main page in the central

<BODY> this sentence can be. You can try to refresh the page or re-enter the page, and the window will never pop again. The real

pop-only-once!

Writing here the pop-up window of the production and application techniques are basically completed.

1. Bounce a full-screen window

<html>

<body onload=window.open (' http://www.pconline.com.cn ', ' example01 ', ' fullscreen ');>;

<b>[url]www.e3i5.com[/url]</b>

</body>

</html>

2. Restart a F11 window

<html>

<body onload=window.open (' http://www.pconline.com.cn ', ' example02 ', ' Channelmode ');>;

<b>[url]www.e3i5.com[/url]</b>

</body>

</html>

3. Bounce a window with the Favorites Link toolbar

<html>

<body Onload=window.open

(' http://www.pconline.com.cn ', ' example03 ', ' width=400,height=300,directories ');>

<b>[url]www.e3i5.com[/url]</b>

</body>

</html>

4. Web Page dialog box

<html>

<script language=javascript>



</SCRIPT>

<b>[url]www.e3i5.com[/url]</b>

</body>

</html>

<html>

<script language=javascript>



</SCRIPT>

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

</body>

</html>

The difference between ShowModalDialog () and showModelessDialog () is that the ShowModalDialog () opens the modal window,

showModelessDialog () Opens the modeless window.

Dialogheight:iheight sets the height of the dialog box window.

Dialogwidth:iwidth sets the width of the dialog box window.

Dialogleft:ixpos sets the left position of the dialog window relative to the upper-right corner of the desktop.

Dialogtop:iypos sets the top position of the dialog window relative to the upper-left corner of the desktop.

Center: {Yes No 1 0} Specifies whether the dialog box is centered on the desktop, and the default value is yes.

Help: {Yes No 1 0} Specifies whether the dialog box window displays a context-sensitive aid icon. The default value is yes.

Resizable: {Yes No 1 0} Specifies whether the dialog box window is variable in size. The default value is "no".

Status: {Yes No 1 0} Specifies whether the dialog box window displays the status bar. For modeless dialog windows, the default value is yes;

For a modal dialog window, the default value is "no".

Web page Classic Code

1. Will completely screen the right mouse button, no right button menu

<body oncontextmenu=window.event.returnvalue=false>

can also be used in a table frame in a Web page

<table border Oncontextmenu=return (false) ><td>no</table>

2. Deselect, prevent replication

<body Onselectstart=return false>

3. No pasting

<body Onpaste=return false>

4. Prevention of duplication

<body Oncopy=return false; Oncut=return false;>

5.IE Address bar in front of your own icon

<link rel=shortcut Icon href=favicon.ico>

Description: About the production of favicon.ico documents. You can first in the FW to do a picture, belong to your own site a small icon. And then in

ACD to change the file properties to *.ico, and then you do the *. The ICO file is uploaded to your server directory, and you can then use the

Code to achieve, when others log on to your site, the address bar used is your custom icon.

6. You can display your icon in the Favorites folder

<link Rel=bookmark href=favicon.ico>

Description: The production method is the same as above. Just the way it's displayed, this is the personality map displayed when someone collects your web address.

Standard.

7. Close the Input method

<input style=ime-mode:disabled>

Description: This piece of code is used when the form is submitted. That is, you cannot use other Input method modes when entering data.

8. Always with the frame

<script language=javascript></script>

Description: frames.htm for your Web page, which is also a way to protect the page

9. Prevent a person from being frame

<script language=javascript></script>

10. Web pages will not be saved as

<noscript><iframe src=*.html></iframe></noscript>

Explain the use of:<noscirpt> is very wide, one of which is to make JS ads invalid.

11. Check Source files

<input type=button value= View Web page source code

Onclick=window.location = ' View-source: ' + target=_blank>[url]http://bbs.055.cn/test.htm

[/URL] ';>

12.COOKIE script record, it's very useful.

function Get_cookie (Name) {

var search = Name + =

var returnvalue =;

if (Documents.cookie.length > 0) {

offset = documents.cookie.indexOf (search)

if (offset!=-1) {//if cookie exists

Offset + = Search.length

Set index of beginning of value

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

Set index of end of cookie value

if (end = = 1)

end = Documents.cookie.length;

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

}

}

Return returnvalue;

}

function Loadpopup () {

if (Get_cookie (' popped ') = = ") {

Openpopup ()

Documents.cookie=popped=yes

}

}

Description: The above is JS code, please add their own starting and Terminator

13. Internal Frame <IFRAME> Use

The use format of the IFRAME tag is:

<iframe src=url width=x height=x scrolling=[option] Frameborder=x

Name=main></iframe>

SRC: The path to the file, either HTML file, or text, ASP, etc.

Width and Height: the width and height of the inner frame area;

Scrolling: When the specified HTML file in SRC does not show up in the specified area, the scrolling option, if set to No, does not appear scrolling

If it is auto: The scroll bar appears automatically, and if yes, it displays; Frameborder: The width of the area border, in order to let "inside

The frame "is merged with the adjacent content and is usually set to 0."

Name: The names of the frames used for identification.

For example: When you want to use the parent frame to control the internal framework, you can use the name of the target= frame to control it.

Example: <iframe name=mm src=http://bbs.055.cn;; width=100% height=100% marginwidth=0

marginheight=. ot; Frameborder=0 scrolling=no></iframe>

14. Automatic Jump

In the source code <head>...</head> add the following code:

<meta http-equiv=refreshcontent=3; url=http://bbs.055.cn; Charset=gb2312>

Description: Content=3 indicates 3 seconds to refresh to URL

15. How to change the linked mouse shape

Just add this code to the link.

Or you can write it with 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

The above code you only need to add to the link or page of the style area can be implemented to diversify the mouse.

16. Full Screen Display

<form>

<div align=center>

<input Type=button name=fullscreen value= full Screen onclick=window.open (document.location,

' Big ', ' Fullscreen=yes ') >

</div>

</form>

Put it in the <body>.

17. Set as homepage

<script language=javascript>



</script>

<a href=# name=home onclick=defaul_home (); Title===e Time ==> Set homepage </a>

18. Here is the code to add favorites

<a href=# Onclick=window.external.addfavorite ([Url]http://bbs.055.cn[/url] ';. ' Dawn Accord ')

Target=_self title= Dawn Accord > Add Favorites </a>

19.flash Picture Effect

The following code joins the <head> area

<script language=javascript>



</SCRIPT>

The following code joins the <body> area

<img src=yun_qi_img/logo.gif;; Style=filte ... nbsp;onmouseover=makevisible

(this,0) onmouseout=makevisible (this,1) width=63 height=56>//Picture address please change it yourself

20.load progress bar

<table cellspacing=0 cellpadding=0 bgcolor= #FFFFFF width=40% id=p><tr><td>

<table cellspacing=0 cellpadding=0 bgcolor= #0000FF height=18

Id=q><tr><td></td></tr></table></td></tr></table>

</center>

<script language=javascript>

var R = 0; Load ();

function Load () {R = R + 2; Q.style.width = R +%; Time= settimeout (Load (), 50);

if (R > MB) {cleartimeout (time); P.style.width=0}}

</script>

27 Full Screen

<script language=javascript>

window.open (' index.asp ', ', ', ' fullscreen=1 ');

</script>

21. Background picture Scrolling

<body scroll=no background=images/bg.jpg link= #00FF00 alink= #FF0000 vlink= #00FF00

bgcolor= #000080 topmargin=8>

<script language=javascript>

var backgroundoffset = 0;

var bgobject = eval (' document.body ');

function SCROLLBG (maxSize) {backgroundoffset = Backgroundoffset + 1;

if (Backgroundoffset > maxSize) backgroundoffset = 0;

bgObject.style.backgroundPosition = 0 + backgroundoffset;}

var Scrolltimer = Window.setinterval (SCROLLBG (410), 20)

</script>

22. Web pages are not cached

HTML Web page

<meta Http-equiv=pragma content=no-cache>

<meta Http-equiv=cache-control Content=no-cache, must-revalidate>

<meta http-equiv=expires content=wed Feb 1997 08:21:57 gmt>

or <meta http-equiv=expires content=0>.

ASP Web page

Response.Expires =-1

Response.ExpiresAbsolute = Now ()-1

Response.CacheControl = No-cache

PHP Web page

Header (Expires:mon, June June 1997 05:00:00 GMT;

Header (Cache-control:no-cache, must-revalidate;

Header (Pragma:no-cache;

23. Minimize, maximize, close windows

<object ID=HH1 classid=clsiddb880a6-d8ff-11cf-9377-00aa003b7a11>

<param Name=command value=minimize></object>

<object ID=HH2 classid=clsiddb880a6-d8ff-11cf-9377-00aa003b7a11>

<param Name=command value=maximize></object>

<object Id=hh3 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11>

<param Name=command value=close></object>

<input Type=button value= Minimize onclick=hh1. Click () >

<input Type=button value= maximize ONCLICK=HH2. Click () >

<input Type=button value= closes Onclick=hh3. Click () >

24. Determining the origin of the previous page

ASP page:

Request.ServerVariables (Http_referer

java Script:

Document.referrer

25. Cursor is stopped at the end of text box text

<script language=javascript>

function cc ()

{

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 () >

JavaScript several forms commonly used for validation scripts:

Only numbers can be entered

<input onkeyup= "Value=value.replace (/[^\d]/g,") "

Onbeforepaste= "Clipboarddata.setdata" (' Text ', Clipboarddata.getdata (' text '). Replace (/

[^\d]/g, ']) ' >

Enter to move the cursor to the next input box

<input onkeydown= "if (event.keycode==13) event.keycode=9" > <br>

can only be Chinese

<input onkeyup= "Value=value.replace (/[-~]/g, '") "onkeydown=" if (event.keycode==13)

Event.keycode=9 "> <br>

Shielding Input Method

<input style= "ime-mode:disabled" onkeydown= "if (event.keycode==13) event.keycode=9" > <br>

Only English and numbers can be entered

<input onkeyup= "Value=value.replace (/[\w]/g,") "

Onbeforepaste= "Clipboarddata.setdata" (' Text ', Clipboarddata.getdata (' text '). Replace (/

[^\d]/g, ']) "

Onkeydown= "if (event.keycode==13) event.keycode=9" > <br>

Can only be displayed, cannot be modified

<input readonly value= "can only be displayed, cannot be modified" >

No copy selection, etc. ........

<script language= "JavaScript" type= "Text/javascript" >

Double-click the mouse to scroll the screen code

var Currentpos,timer;

Function Initialize ()

{

Timer=setinterval ("ScrollWindow ()", 30);

}

function SC ()

{

Clearinterval (timer);

}

function ScrollWindow ()

{

Currentpos=document.body.scrolltop;

Window.Scroll (0,++currentpos);

if (Currentpos!=document.body.scrolltop)

SC ();

}

Document.onmousedown=sc

Document.ondblclick=initialize

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More