Home Web Front-end JS Tutorial Web page javascript essence code set_basic knowledge

Web page javascript essence code set_basic knowledge

May 16, 2016 pm 07:20 PM

[1. Ordinary pop-up window]


works on some older browsers. In these old browsers, the code in the tag will not be displayed as text

Come out. You can use either single quotes or double quotes, just don't mix them.

【2. Pop-up window after setting】



Parameter explanation:


End of js script
【 3. Use functions to control pop-up windows]
The following is a complete code.







.....




A function openwin() is defined here, how to call it?
Method 1:
A window pops up when the browser reads the page;
Method 2:
A window pops up when the browser leaves the page;
Method 3: Call with a link: Method 4: Call with button:


[4. Pop up 2 windows at the same time]
Slightly change the source code:




To avoid pop-up The two windows are covered. Use top and left to control the pop-up position so that they do not cover each other. Finally, use the four methods mentioned above

to call it. Note: The names of the two windows (newwindows and newwindow2) should not be the same, or they should all be empty.

[5. The main window opens the file 1.htm, and the small window page.html pops up at the same time]
The following code is added to the main window
area:

Join the
area:

open
.

 [6. Timing closing control of pop-up windows]
Now let’s control the pop-up windows, and the effect will be better. If we add a small piece of code to the pop-up page (
note that it is added to the HTML of page.html, not the main page, otherwise...), let it close automatically after 10 seconds, right? Cooler?
First, add the following code to the
area of ​​the page.html file:


Then, use the sentence
to replace the original This sentence will do. (Don’t forget to write this
sentence! The function of this sentence is to call the code to close the window, and then close the window automatically after 10 seconds.)
 [7. In the pop-up Add a close button to the window]





[8. Pop-up window included - two windows on one page]
Through the following example, you can complete the above effect in one page.





>

Look at the code in OpenWindow.document.write(). Isn’t it standard HTML? Just write more lines according to the format

. Be sure to note that an error will occur if there is one more label or one less label. Remember to end it with OpenWindow.document.close().


[9. Cookie Control of Pop-up Window]

Recall that although the above pop-up window is cool, it has a little problem. For example, if you put the above script in a page that needs to be visited frequently (such as the homepage), then every time you refresh the page, the window will pop up. Isn't it very annoying? :-(
Solution:
We can use cookies to control it. First, add the following code to the
area of ​​the main page HTML:



Then, replace the original sentence

in the main page with (note it is not openwin but loadpop!). You can try refreshing the page or re-entering it. Pages and windows will never pop up again. The real

Pop-Only-Once!

At this point, the production and application skills of pop-up windows are basically completed.


  1.弹启一个全屏窗口 

 

[url]www.e3i5.com[/url] 
 
 

  2.弹启一个被F11化后的窗口 

 

[url]www.e3i5.com[/url] 
 
 

  3.弹启一个带有收藏链接工具栏的窗口 

 

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

  4.网页对话框 

 
<script> <BR><!-- <BR>showModalDialog <br><br>('http://www.pconline.com.cn','example04','dialogWidth:400px;dialogHeight:300px; <BR>dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') <BR>//--> <BR></script> 
[url]www.e3i5.com[/url] 
 
 

 
<script> <BR><!-- <BR>showModelessDialog <br><br>('http://www.pconline.com.cn','example05','dialogWidth:400px;dialogHeight:300px; <BR>dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') <BR>//--> <BR></script> 
 target=_blank>[url]http://www.pconline.com.cn[/url] 
 
 

  showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开模式窗口,

showModelessDialog()打开无模式窗口。 

dialogHeight: iHeight 设置对话框窗口的高度。 
dialogWidth: iWidth 设置对话框窗口的宽度。    
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。 
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。 
center: {yes no 1 0 } 指定是否将对话框在桌面上居中,默认值是“yes”。 
help: {yes no 1 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。    
resizable: {yes no 1 0 } 指定是否对话框窗口大小可变。默认值是“no”。 
status: {yes no 1 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口,默认值是“yes”;

对于模式对话框窗口,默认值是 “no”。 


网页经典代码 
1. 将彻底屏蔽鼠标右键,无右键菜单 
 

也可以用于网页中Table框架中 
no
 


2.取消选取、防止复制 
 


3.不准粘贴 
 


4.防止复制 
 


5.IE地址栏前换成自己的图标 
 

说明:关于favicon.ico文件的制作。你可以先在FW中做一个图片,属于你自己站点一个小图标。然后在

ACD see将文件属性改为*.ico,然后将你做的*.ICO文件传到你的服务器目录中,然后就可以使用以上代

码来实现,当别人登陆你的站点时,地址栏里使用的就是你自定义的图标了。 


6.可以在收藏夹中显示出你的图标 
 

说明:制作方法和上面的一样。只是显示的方式不同,这个是在别人收藏你的网页地址时显示的个性图

标。 


7.关闭输入法 
 

说明:这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。 


8.永远都会带着框架 
<script><!-- <BR> if (window == top)top.location.href = frames.htm;// --></script> 

说明:frames.htm为你的网页,这也是保护页面的一种方法 


9.防止被人frame 
<script><!-- <BR> if (top.location != self.location)top.location=self.location; <BR>// --></script> 


10.网页将不能被另存为 
 
说明:的用法很广,其中一条就是可以使JS广告失效。 


11.查源文件 
onclick=window.location = 'view-source:'+ target=_blank>[url]http://bbs.055.cn/test.htm

[/url]';> 


12.COOKIE脚本记录,有很大的用处哦 

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 





说明:以上是JS代码,请自己加起始符和结束符 


13.内框架 
src:文件的路径,既可是HTML文件,也可以是文本、ASP等   
width、height:内部框架区域的宽与高;    
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动

条;如为Auto:则自动出现滚动条;如为Yes,则显示;  FrameBorder:区域边框的宽度,为了让“内

部框架“与邻近的内容相融合,常设置为0。 
name:框架的名字,用来进行识别。 
比如:  当你想用父框架控制内部框架时,可以使用: target=框架的名字来控制。 

例子: 

14.自动跳转
在源代码中的…加入如下代码:


说明:content=3 表示3秒刷新到URL


15.如何改变链接的鼠标形状
只需在链接上加上这一代码就行的了
或者跟上面的用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

以上代码你只需要加到连接或是页面的style区里就可以实现鼠标多样化。


16.全屏显示



'big', 'fullscreen=yes')>


把它放到中。


17.设为首页

<script> <BR><!-- <BR>function defaul_home(){ <BR>this.home.style.behavior='url(#default#homepage)';this.home.setHomePage([url] <br><br>http://bbs.055.cn/[/url]'; <BR>} <BR>var focusok=false; <BR>if (navigator.appName == Netscape{ <BR>focusok=true; <BR>} <BR>vers=navigator.appVersion; <BR>if (navigator.appName == Microsoft Internet Explorer{ <BR>pos=vers.lastIndexOf('.'); <BR>vers=vers.substring(pos-1,vers.length); <BR>} <BR>proper_version=parseFloat(vers); <br><br>if(proper_version>=5){ <BR>focusok=true; <BR>} <BR>function launchstock1(htmlurl){ <BR>var stock=window.open <br><br>(htmlurl,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scro <br><br>llbars=yes, <BR>resizable=no,width=700,height=510; <BR>if(focusok){ <BR>stock.focus(); <BR>} <BR>return true; <BR>} <BR>function launchstock(){ <BR>var stock=window.open <br><br>(,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars= <br><br>yes, <br><br>resizable=no,width=700,height=510; <BR>if(focusok){ <BR>stock.focus(); <BR>} <BR>return true; <BR>} <BR>// --> <BR></script>
设为首页


18.这里是加入收藏夹的代码


target=_self title=拂晓雅阁>加入收藏夹



19.flash图片效果
以下代码加入区域
<script> <BR><!-- <BR>function makevisible(cur,which){ <BR>if (which==0) <BR>cur.filters.alpha.opacity=100 <BR>else <BR>cur.filters.alpha.opacity=20 <BR>} <br><br>//--> <br><br></script>
以下代码加入区域
Web page javascript essence code set_basic knowledge
(this,0) onMouseOut=makevisible(this,1) width=63 height=56> //图片地址请自己改


20.load 进度条



id=Q>


<script> <BR>var R = 0; load(); <BR>function load() {R = R + 2; Q.style.width = R + %; time= setTimeout(load(),50); <BR>if (R > 100) {clearTimeout(time); P.style.width=0}} <BR></script>
27 全屏
<script> <BR>window.open('index.asp','','fullscreen=1'); <BR></script>


21.背景图片滚动


bgcolor=#000080 topmargin=8>
<script> <BR>var backgroundOffset = 0; <BR>var bgObject = eval('document.body'); <BR>function scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1; <BR>if (backgroundOffset > maxSize) backgroundOffset = 0; <BR>bgObject.style.backgroundPosition = 0 + backgroundOffset;} <BR>var ScrollTimer = window.setInterval(scrollBG(410), 20) <BR></script>


22.网页不会被缓存

HTMl网页



或者
ASP网页
 Response.Expires = -1
 Response.ExpiresAbsolute = Now() - 1
 Response.cachecontrol = no-cache
PHP网页
header(Expires: Mon, 26 Jul 1997 05:00:00 GMT;
header(Cache-Control: no-cache, must-revalidate;
header(Pragma: no-cache;

23.最小化、最大化、关闭窗口










24.判断上一页的来源

asp页:
request.servervariables(HTTP_REFERER
java script:
document.referrer


25.光标是停在文本框文字的最后

<script> <BR>function cc() <BR>{ <BR> var e = event.srcElement; <BR> var r =e.createTextRange(); <BR> r.moveStart('character',e.value.length); <BR> r.collapse(true); <BR> r.select(); <BR>} <BR></script>



JavaScript几个表单常用的验证脚本:

     只能输入数字

       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/

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

 
     ENTER键可以让光标移到下一个输入框

 


     只能是中文


event.keyCode=9"> 


     屏蔽输入法

 


     只能输入英文和数字

       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/

[^\d]/g,''))"
       onkeydown="if(event.keyCode==13)event.keyCode=9"> 



     只能显示,不能修改



     禁止复制选择等................

<script> <br><br> 双击鼠标滚动屏幕的代码 <BR>var currentpos,timer; <BR>function initialize() <BR>{ <BR>timer=setInterval ("scrollwindow ()",30); <BR>} <BR>function sc() <BR>{ <BR>clearInterval(timer); <BR>} <BR>function scrollwindow() <BR>{ <BR>currentpos=document.body.scrollTop; <BR>window.scroll(0,++currentpos); <BR>if (currentpos !=document.body.scrollTop) <BR>sc(); <BR>} <BR>document.onmousedown=sc <BR>document.ondblclick=initialize <BR> </script>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles