웹페이지에서 일반적으로 사용되는 Javascript 클래식 코드 모음

저자：Eve Cole 업데이트 시간：2009-06-11 16:26:18

즐겨찾기

HTML 코드

에 추가

<스크립트 언어="자바스크립트">
함수 북마크()
{
window.external.addFavorite('<a href="http://" target="_blank" rel="external">http://</a>귀하의 URL','귀하의 웹사이트 이름')
}
if (document.all)document.write('<a href="#" onClick="bookmarkit()">즐겨찾기에 추가</a>')
</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

하이퍼링크에 밑줄이 그어진

HTML 코드가

표시되지 않도록 설정

<스타일 유형="텍스트/css">
<!-
a:링크{텍스트 장식:없음}
a:hover{텍스트 장식:없음}
a:방문{텍스트 장식:없음}
->
</style>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

3. 마우스 오른쪽 버튼 동작을 비활성화하는

HTML 코드

4. 이 페이지를 홈페이지

HTML 코드 <body bgcolor="#FFFFFF" text="#000000">

으로 설정하세요.

</script>
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 후 실행을 클릭하면 됩니다.]

2초 후에 지정된 웹 페이지의

HTML 코드를

로드합니다.

<머리>
<meta http-equiv="refresh" content="2;URL=http://귀하의 URL">
</head>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

10. 휴일 카운트다운

HTML 코드
<스크립트 언어="자바스크립트">
var timedate= new Date("2003년 12월 25일");
var times="크리스마스";
var now = new Date();
var 날짜 = timedate.getTime() - now.getTime();
var time = Math.floor(날짜 / (1000 * 60 * 60 * 24));
만약 (시간 >= 0)
document.write("이제 다음이 있습니다: "+times+"에서 "+time +"days")</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

11. 물 반사 효과

HTML 코드
<img id="reflect" src="자신의 이미지 파일 이름" width="175" height="59">
<스크립트 언어="자바스크립트">
함수 f1()
{
setInterval("mdiv.filters.wave.phase+=10",100);
}
if(문서.모두)
{
document.write('<img id=mdiv src="'+document.all.reflect.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) Blur() Flipv()">')
window.onload=f1
}
</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

12. 천천히 증가하는 창

HTML 코드
<스크립트 언어="자바스크립트">

</script>
<p> <a href="javascript:openwindow(<a href=" http://www.code-123.com " target="_blank" rel="external"> http://www.code-123. com</a>)">입력</a>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누르면 됩니다.]

13. IE 주소 표시줄의 IE 아이콘을 변경

하고 해당 내용을 클립보드에 복사하려면 먼저 16*16 아이콘(아이콘 파일)을 만들어 index.ico로 저장해야 합니다. 이 아이콘 파일을 루트 디렉터리에 업로드하고 홈페이지의 <head></head> 사이에 다음 코드를 추가합니다:

14. 버튼을 클릭하면

현재 페이지의

HTML 코드가

인쇄됩니다.

<스크립트 언어="자바스크립트">

</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

15.

현재 페이지

HTML 코드

'다른 이름으로 저장' 버튼을 클릭하세요.

<input type="button" name="Button" value="이 페이지 저장"
onClick="document.all.button.ExecWB(4,1)">
<객체 ID="버튼"
너비=0
높이=0
classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
<embed width="0" height="0"></embed>
</object>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

16. 시스템의 현재 날짜

HTML 코드

표시

<스크립트 언어=자바스크립트>
오늘=새 날짜();
함수 날짜(){
this.length=date.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=date.arguments }
var d=new date("일요일","월요일","화요일","수요일","목요일","금요일","토요일");
문서.쓰기(
"<font color=##000000 style='font-size:9pt;font-family: 宋体'> ",
today.getYear(),"연도",today.getMonth()+1,"월",today.getDate(),"일",
d[today.getDay()+1],"</font>" );
</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누를 수 있습니다.]

17.

다양한 기간에

다양한 인사말

HTML 코드

표시

<스크립트 언어="자바스크립트">

</script>
[Ctrl+A 모든 선택 팁: 일부 코드를 먼저 수정한 후 실행을 누를 수 있습니다.]

18. 논스톱 음악

HTML 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " target= "_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href=" http://www.w3.org/1999/xhtml " target="_blank" rel="external">http://www.w3.org/1999/xhtml</ a>">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
</head>
<본문>
<p>
<입력 이름="src" type="file" id="src" value="E:music2fighter.mp3" />
</p>
<p>
<input type="button" name="button" id="button" value="Play" onclick="play(document.getElementById('src').value)" />
<input type="button" name="button2" id="button2" value="Stop" onclick="stop()" />
<input type="button" name="button2" id="button2" value="Pause" onclick="pause()" />
</p>
</body>
</html>
<스크립트>
var player = new ActiveXObject("MediaPlayer.MediaPlayer");
함수 재생(pSrc){
if(pSrc == ""){
Alert("재생하고 싶은 음악을 선택해주세요!");
반품 ;
}
player.Open(pSrc);
}
함수 중지(){
플레이어.정지();
}
함수 일시정지(){
플레이어.일시 중지();
}
</script>
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 후 실행을 누르면 됩니다.]

19. 이미지를 상하좌우로 원활하게 스크롤하는 효과(Firefox 및 IE와 호환)

HTML 코드
<html xmlns="<a href=" http://www.w3.org/1999/xhtml " target="_blank" rel="external">http://www.w3.org/1999/xhtml</ a>">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>사진을 위, 아래, 왼쪽, 오른쪽으로 원활하게 스크롤하는 효과(Firefox 및 IE와 호환)</title>
</head>
<body>

<div id=jsweb8_cn_top 스타일=오버플로:숨김;높이:100;너비:90;>
<div id=jsweb8_cn_top1>
<img src="<a href= " <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src=" <a href=" <img src="<a href=" <img src="<a href=" </div>
<div id=jsweb8_cn_top2></div>
</div>
<스크립트>
변수 속도=30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //jsweb8_cn_top1을 jsweb8_cn_top2로 복제합니다.
함수 Marquee1(){
//jsweb8_cn_top1과 jsweb8_cn_top2의 교차점으로 스크롤할 때
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top이 맨 위로 이동합니다.
또 다른{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//타이머 설정
//마우스가 위로 움직일 때 타이머를 지워 스크롤을 중지합니다.
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
//마우스가 멀어지면 타이머를 재설정합니다.
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

<br>

<div id=jsweb8_cn_bottom 스타일=오버플로:숨김;높이:100;너비:90;>
<div id=jsweb8_cn_bottom1>
<img src="<a href= " <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src=" <a href=" <img src="<a href=" <img src="<a href=" </div>
<div id=jsweb8_cn_bottom2></div>
</div>
<스크립트>
변수 속도=30
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
함수 Marquee2(){
if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
또 다른{
jsweb8_cn_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,속도)
jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>

<br>

<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellpacing="0" border="0">
<tr><td id="jsweb8_cn_left1" valign="top" align="center">
<table cellpadding="2" cellpacing="0" border="0">
<tr 정렬="가운데">
<td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href =" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" </tr>
</table>
</td>
<td id="jsweb8_cn_left2" valign="top"></td>
</tr>
</table>
</div>
<스크립트>
var speed=30//속도 값이 클수록 속도는 느려집니다.
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
함수 Marquee3(){
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
또 다른{
jsweb8_cn_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,속도)
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

<br>

<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellpacing="0" border="0">
<tr><td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellpacing="0" border="0">
<tr 정렬="가운데">
<td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href =" <td><img src="<a href=" </tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<스크립트>
var speed=30//속도 값이 클수록 속도는 느려집니다.
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
함수 Marquee4(){
if(jsweb8_cn_right.scrollLeft<=0)
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
또 다른{
jsweb8_cn_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,속도)
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>

</body>
</html>

[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 후 실행을 클릭할 수 있습니다.]

20.

HTML 코드를

왼쪽으로

계속 스크롤합니다.

<div id=데모 스타일=overflow:hidden;height:139;width:232;배경:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id =demo1 valign=top><img src="<a href=" <스크립트>
변수 속도=30
데모2.innerHTML=demo1.innerHTML
함수 마키(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
데모.scrollLeft-=demo1.offsetWidth
또 다른{
데모.scrollLeft++
}
}
var MyMar=setInterval(선택 윤곽,속도)
데모.onmouseover=function() {clearInterval(MyMar)}
데모.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

21.

중단 없이

HTML 코드를

오른쪽으로 스크롤

<div id=데모 스타일=overflow:hidden;height:139;width:232;배경:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id =demo1 valign=top><img src="<a href=" <스크립트>
변수 속도=30
데모2.innerHTML=demo1.innerHTML
데모.scrollLeft=demo.scrollWidth
함수 마키(){
if(demo.scrollLeft<=0)
데모.scrollLeft+=demo2.offsetWidth
또 다른{
데모.scrollLeft--
}
}
var MyMar=setInterval(선택 윤곽,속도)
데모.onmouseover=function() {clearInterval(MyMar)}
데모.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

연속 스크롤 또는 중단 없는 스크롤 코드(다양한 스크롤 방법)는 IE 및 FireFox Opera Maxthon 및 기타 브라우저의

왼쪽에서 오른쪽으로

간격 스크롤 코드와 호환됩니다.

방법 1:

HTML 코드
<div id=demo style="오버플로우: 숨김; 너비: 980px; 높이: 80px;정렬: 중앙">
<테이블 셀 간격="0" cellpadding="0" 정렬="중앙"
테두리="0">
<본체>
<tr>
<td id="marquePic1" valign="top">

<table width="980" height="80" border="0" cellpadding="0" cellpacing="0">
<tr>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad01.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad02.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad03.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad04.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad05.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="/info/about.asp?id=4" target="_blank"><img src="/img/bottom_ad06 .gif" border="0"></a></td>
</tr>

</테이블>

</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<스크립트 유형=텍스트/자바스크립트>
var speed=80 
marquePic2.innerHTML=marquePic1.innerHTML
함수 마키(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
데모.스크롤왼쪽=0
}또 다른{
데모.scrollLeft++
}}
var MyMar=setInterval(선택 윤곽,속도)
데모.onmouseover=function() {clearInterval(MyMar)}
데모.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A 모든 팁 선택: 코드의 일부를 먼저 수정한 후 실행을 누르면 됩니다.]

방법 1 아래에서 위로:

HTML 코드
<table width="100%" border="0" cellpacing="2" cellpadding="2">
<tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" cellpacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="오버플로: 숨김; 너비: 145px; 높이: 200px">
<DIV id=rolllinkk1>

<table width="100%" border="0" cellpacing="2" cellpadding="2">

</table>

<DIV align=center> </DIV> </DIV> </DIV>
<스크립트>
var 롤속도=30
Rolllinkk2.innerHTML=rolllinkk1.innerHTML //
함수 Marquee1(){
if(rolllinkk2.offsetTop-rolllinkk.scrollTop <=0) //
Rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
또 다른{
Rolllinkk.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,rollspeed) //
Rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
Rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
</SCRIPT>
</td>

</tr>
</table>
</td> </tr>

</table>
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 다음 실행을 누를 수 있습니다.]

연속적인 여러 줄 스크롤, 제어 버튼

HTML 코드
<스크립트 언어="JavaScript" 연기>
//qswh의 원본 및 windy_sk < [email protected] > 20040120에 의해 수정됨
함수 reportError(msg,url,line) {
var str = "아래 오류를 발견했습니다: nn";
str += "오류: " + msg + " 온라인: " + line;
경고(str);
사실을 반환;
}
window.onerror=reportError;
var obj_marquee = document.getElementById("marquee");
var 반복 = null;
var marquee_spd = 50;
함수 marquee_init() {
var obj_unit = obj_marquee.firstChild;
var marquee_high =parseInt(obj_marquee.style.height);
var marquee_wide =parseInt(obj_marquee.style.width);
var unit_high = obj_unit.offsetHeight;
var unit_wide = obj_unit.offsetWidth;
var m = 0, n = 0, i = 0;
var tmp = null;

m = Math.ceil(marquee_wide / unit_wide);
n = Math.ceil(marquee_high/unit_high);
obj_unit.style.width = marquee_wide * (m+1);
obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width

for(i=0; i<m; i++) {
tmp = obj_unit.rows[0].insertCell(-1);
tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;
tmp.style.width = marquee_wide;
tmp = 널;
}
for(i=0; i<n; i++) {
obj_marquee.appendChild(obj_unit.cloneNode(true));
}
반품;
}
함수 marquee_show(방향) {
스위치(방향) {
"위"의 경우:
if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight;
} 또 다른 {
obj_marquee.scrollTop++;
}
부서지다;
케이스 "다운":
if(obj_marquee.scrollTop <= 0) {
obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight;
} 또 다른 {
obj_marquee.scrollTop--;
}
부서지다;
"왼쪽" 경우:
if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) {
obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
} 또 다른 {
obj_marquee.scrollLeft++;
}
부서지다;
경우 "맞아요":
if(obj_marquee.scrollLeft <= 0) {
obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
} 또 다른 {
obj_marquee.scrollLeft--;
}
부서지다;
기본:
부서지다;
}
반품;
}
함수 marquee_doit() {
var 방향 = "";
방향 = obj_marquee.getAttribute("방향");
if(방향 != null) marquee_show(방향);
방향 = obj_marquee.getAttribute("direction2");
if(방향 != null) marquee_show(방향);
반품;
}
marquee_init();
반복 = setInterval("marquee_doit()",marquee_spd);
marquee.onmouseover = function() {clearInterval(repeat);}
marquee.onmouseout = function() {repeat=setInterval("marquee_doit()",marquee_spd);}
</script>
<table style="border:1px black solid;"><tr><td>
<div id="marquee" 방향="위로" style="overflow:hidden;height:200px;width:250px">
<테이블 스타일="테두리:0px;패딩:0px;"><tr><td>

<a href="#" target="_blank">기본 포럼</a><br>
<a href="#" target="_blank">163.com</a><br>
<a href="#" target="_blank">21cn.com</a><br>
<a href="#" target="_blank">새해 복 많이 받으세요</a>

</td></tr></table>
</div>
</td></tr></table>
방향1:
<input type="button" value="↑" onclick="obj_marquee.direction='up'">
<input type="button" value="↓" onclick="obj_marquee.direction='down'">
<input type="button" value="←" onclick="obj_marquee.direction='left'">
<input type="button" value="→" onclick="obj_marquee.direction='right'">
<input type="button" value=" X " onclick="obj_marquee.direction=''"> <br>
방향2:
<input type="button" value="↑" onclick="obj_marquee.direction2='up'">
<input type="button" value="↓" onclick="obj_marquee.direction2='down'">
<input type="button" value="←" onclick="obj_marquee.direction2='left'">
<input type="button" value="→" onclick="obj_marquee.direction2='right'">
<input type="button" value=" X " onclick="obj_marquee.direction2=''">
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]