이 기사에서는 동일한 웹 페이지에서 여러 JavaScript 특수 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
일반적으로 <script type = "text/javaScript"> </script> 태그가 두 번 나타나면 모든 javaScript 스크립트가 다시 효과가없고 <script type = "text/javaScript"> </script> 태그가 나타납니다. 그러나 동일한 웹 페이지에서 여러 자바 스크립트 특수 효과가 종종 필요합니다.
1. 기본 목표
웹 페이지에 2 개의 JavaScript 시계를 장착하는데, 그 중 하나는 1 초마다 사라지는 일반 시간이며 다른 하나는 3 초마다 사라지는 비정상적인 시계입니다. 그것은 단지 그것을 구별하고 동일한 웹 페이지에서 여러 개의 JavaScript 특수 효과를 구현하는 방법을 설명하는 것입니다. 효과는 아래 그림에 나와 있습니다.
2. 생산 과정
방법 1 : 방법 1
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
함수 clocka () {
var time = new date (). tolocalestring ();
document.getElementById ( "clocka"). innerhtml = time;
}
기능 a () {
clocka ();
setInterval ( "clocka ()", 1000);
}
함수 clockb () {
var time = new date (). tolocalestring ();
document.getElementById ( "clockb"). innerhtml = time;
}
함수 b () {
clockb ();
setInterval ( "clockb ()", 3000);
}
</스크립트>
</head>
<body onload = "a (), b ()">
<div id = "clocka"> </div>
<div id = "clockb"> </div>
</body>
</html>
먼저 특수 효과를 기능, 함수 a (), b ()로 구현 한 다음 본문의 onload를 사용하여 웹 페이지를로드 하고이 기능을 즉시로드하십시오.
clocka () 및 clockb ()의 경우 원래 JavaScript 코드를 기반으로 다시 작성됩니다. 원래 <body>에 있던 JavaScript 코드는 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">
함수 클록 () {
var time = new date (). tolocalestring ();
document.getElementById ( "clock"). innerhtml = time;
}
setInterval ( "clock ()", 1000);
</스크립트>
방법 2 : 방법 2.
<cript>에서 유형을 쓰지 않지만 유형은 직접 작성됩니다. 그러나이 방법에는 일정 지연이 있습니다. 특수 효과는 하나씩로드됩니다. 특수 효과가 너무 많으면 효과가 나빠질 것입니다.
그러나 인코딩의 깔끔함과 직관은 위의 방법보다 낫습니다.
코드는 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<cript>
함수 clocka () {
var time = new date (). tolocalestring ();
document.getElementById ( "clocka"). innerhtml = time;
}
함수 clockb () {
var time = new date (). tolocalestring ();
document.getElementById ( "clockb"). innerhtml = time;
}
</스크립트>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> twojs </title>
</head>
<body>
<cript>
setInterval ( "clocka ()", 1000);
</스크립트>
<cript>
setInterval ( "clockb ()", 3000);
</스크립트>
<div id = "clocka"> </div>
<div id = "clockb"> </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.