Javascript/Jquery——簡單定時器

print?第一種方法: 

第一種方法:[html]
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html> 
 <head> 
 <title>定時器</title> 
 <script language="javascript" src="jquery-1.4.2.js"></script> 
 <script language="javascript"> 
    //使用setInterval間歇調用 (不建議使用該方法) 
    $(function(){ 
        setInterval(function(){ 
            $("#currentTime").text(new Date().toLocaleString()); 
        },1000); 
    }); 
 </script> 
 </head> 
 <body> 
 <p id="currentTime"></p> 
 </body> 
 </html>  

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <title>定時器</title>
 <script language="javascript" src="jquery-1.4.2.js"></script>
 <script language="javascript">
 //使用setInterval間歇調用 (不建議使用該方法)
 $(function(){
   setInterval(function(){
   $("#currentTime").text(new Date().toLocaleString());
   },1000);
 });
 </script>
 </head>
 <body>
 <p id="currentTime"></p>
 </body>
 </html> 第二種方法:

[html]
%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <head> 
 <title>定時器</title> 
 <script language="javascript" src="jquery-1.4.2.js"></script> 
 <script language="javascript"> 
    //使用setTimeout超時調用 
    function startTime(){ 
         $("#currentTime").text(new Date().toLocaleString()); 
         setTimeout('startTime()',1000); 
     } 
 </script> 
 </head> 
 <body onload="startTime()"> 
 <p id="currentTime"></p> 
 </body> 
 </html>  

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
 <title>定時器</title>
 <script language="javascript" src="jquery-1.4.2.js"></script>
 <script language="javascript">
 //使用setTimeout超時調用
 function startTime(){
   $("#currentTime").text(new Date().toLocaleString());
   setTimeout('startTime()',1000);
  }
 </script>
 </head>
 <body onload="startTime()">
 <p id="currentTime"></p>
 </body>
 </html>
第三種方法:

[html]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <head> 
 <title>定時器</title> 
 <script type="text/javascript"> 
    var c=0; 
    var t; 
    function timedCount(){ 
        document.getElementById('txt').value=c; 
        c=c+1; 
        t=setTimeout("timedCount()",1000); 
    } 
 
    function stopCount(){ 
        clearTimeout(t); 
    } 
 </script> 
 </head> 
 
 <body> 
   <form> 
     <input type="button" value="開始計時!" onclick="timedCount()"/> 
     <input type="text" id="txt"/> 
     <input type="button" value="停止計時!" onclick="stopCount()"/> 
   </form> 
 </body> 
 </html> 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head>
 <title>定時器</title>
 <script type="text/javascript">
    var c=0;
 var t;
 function timedCount(){
  document.getElementById('txt').value=c;
  c=c+1;
  t=setTimeout("timedCount()",1000);
 }

 function stopCount(){
  clearTimeout(t);
 }
 </script>
 </head>

 <body>
   <form>
     <input type="button" value="開始計時!" onclick="timedCount()"/>
     <input type="text" id="txt"/>
     <input type="button" value="停止計時!" onclick="stopCount()"/>
   </form>
 </body>
 </html>

 

 

You May Also Like