동일한 웹 페이지_javascript 기술로 여러 JavaScript 효과를 구현하는 방법

이 기사의 예에서는 동일한 웹 페이지에서 여러 JavaScript 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

일반적으로 태그가 웹페이지에 두 번 나타나면 모든 JavaScript 스크립트는 더 이상 적용되지 않으며 한 번만 나타날 수 있습니다. 태그가 있지만 동일한 웹 페이지에 여러 JavaScript 효과가 필요한 경우가 많습니다.

1. 기본 목표

웹 페이지에 두 개의 JavaScript 시계를 마운트합니다. 그 중 하나는 1초에 한 번 실행되는 정상 시간이고, 다른 하나는 3초에 한 번만 실행되는 비정상적인 시계입니다. 동일한 웹 페이지를 구별하고 설명하기 위한 것입니다. . 여러 JavaScript 효과를 구현하는 방법. 효과는 아래와 같습니다.

2. 제작과정

방법 1:

코드 복사 코드는 다음과 같습니다.

함수 clocka() {
          var time = new Date().toLocaleString()
                document.getElementById("clocka").innerHTML = 시간
~ 함수 a(){
클락카()
setInterval("clocka()", 1000)
}
함수 clockb() {
          var time = new Date().toLocaleString()
                document.getElementById("clockb").innerHTML = 시간
~ 함수 b(){
시계b()
setInterval("clockb()", 3000)
}
스크립트>
머리>

본문>


구현할 특수 효과를 먼저 a(), b() 함수로 작성한 뒤, 웹페이지 로딩 후 바로 이 함수를 로딩하기 위해 바디의 onLoad를 사용합니다.
clocka() 및 clockb()는 원래 JavaScript 코드를 기반으로 다시 작성되었습니다. 의 원래 JavaScript 코드는 다음과 같습니다.





코드 복사

코드는 다음과 같습니다.

방법 2:


그냥 type을 작성하는 것이 아니라 <script>에 직접 작성하는 방식인데, 특수효과가 하나씩 로딩되기 때문에 효과가 좋지 않습니다. <br /> <br />하지만 코딩의 깔끔함과 직관성은 위의 방법을 완전히 능가합니다. <br /> </script>

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

 
 
 
 
함수 clocka() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clocka").innerHTML = 시간; 
        } 
함수 clockb() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clockb").innerHTML = 시간; 
        }    
스크립트> 
 
 
머리> 
 
 
 
setInterval("clocka()", 1000); 
스크립트> 
 
setInterval("clockb()", 3000); 
스크립트> 

 

 
 

希望本文所述对大家의 javascript는 程序设计有所帮助。