寫給兔小白的js教程(1)

時間 2021-01-19

標籤 javascript html java 瀏覽器 ide spa xml htm blog 教程欄目 JavaScript 简体版

原文原文鏈接

最近我家兔小白要轉行學javascript了，不過又懶得抱着大本的書死啃語法，因而只好爲兔寶寫篇教程了。javascript

生物書上講，大段的文字對兔子有催眠效果，所以本教程爭取以有趣的示例爲主，防止兔子睡着。沒有兔子基因的物種以及高手們請繞道，由於本教程真的不會寫出什麼新鮮東西來，嘿嘿。html

先上個小遊戲吧，名字叫「追逐兔小白的兔小灰」，遊戲中移動鼠標就能移動兔小白，而兔小灰會不停的追兔小白：java

上代碼嘍，兔小白請認真閱讀，不要睡着：瀏覽器

  
  
           
  
  
   
   
            
   
   <html> 
   
   
            
   
   <head> 
   
   
            
   
   <title> 
   
   
            
   
   追逐兔小白的兔小灰 
   
   
            
   
   </title> 
   
   
            
   
   <style> 
   
   
            
   
   .bunny{ 
   
   
            
   
       position:absolute; 
   
   
            
   
       width:91px; 
   
   
            
   
       height:152px; 
   
   
            
   
   } 
   
   
            
   
   </style> 
   
   
            
   
   <script> 
   
   
            
   
   /* 
   
   
            
   
    * 定義一個名叫init的方法 
   
   
            
   
    * 在body的onload時調用它，咱們用它來初始化一些東西 
   
   
            
   
    */ 
   
   
            
   
   function init(){ 
   
   
            
   
    
   
   
            
   
       //setInterval方法用於設定一個定時器，它會每隔必定時間執行你指定的方法 
   
   
            
   
       //第一個參數是一個function，它就是每次定時器觸發時須要執行的代碼 
   
   
            
   
       //第二個參數50表示每50毫秒執行一次 
   
   
            
   
       window.setInterval(function(){ 
   
   
            
   
    
   
   
            
   
           //document.getElementById表示按id獲取文檔中的指定元素 
   
   
            
   
           var white = document.getElementById("white"),  
   
   
            
   
               gray = document.getElementById("gray"); 
   
   
            
   
    
   
   
            
   
           //爲了讓兔小灰追着兔小白，咱們要判斷二者的位置 
   
   
            
   
           //若是兔小灰當前的x座標(offsetLeft)大於兔小白的，就把兔小灰向左移動一點（減5個像素），反之就向右移動 
   
   
            
   
           if(gray.offsetLeft > white.offsetLeft) 
   
   
            
   
               gray.style.left = gray.offsetLeft - 5; 
   
   
            
   
           else if(gray.offsetLeft < white.offsetLeft) 
   
   
            
   
               gray.style.left = gray.offsetLeft + 5; 
   
   
            
   
    
   
   
            
   
           //同理處理縱座標 
   
   
            
   
           if(gray.offsetTop > white.offsetTop) 
   
   
            
   
               gray.style.top = gray.offsetTop - 5; 
   
   
            
   
           else if(gray.offsetTop < white.offsetTop) 
   
   
            
   
               gray.style.top = gray.offsetTop + 5; 
   
   
            
   
    
   
   
            
   
       }, 50); 
   
   
            
   
        
   
   
            
   
   } 
   
   
            
   
    
   
   
            
   
   /* 
   
   
            
   
    * 定義一個名叫bunnyRun的方法 
   
   
            
   
    * 在body的onmousemove時調用它，咱們用它來移動兔小白 
   
   
            
   
    */ 
   
   
            
   
   function bunnyRun(){ 
   
   
            
   
       //把兔小白的x與y座標設定成與鼠標當前位置一致，這樣就能用鼠標移動兔小白了 
   
   
            
   
       var white = document.getElementById("white"); 
   
   
            
   
       white.style.left = event.clientX; 
   
   
            
   
       white.style.top = event.clientY; 
   
   
            
   
   } 
   
   
            
   
    
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
   <!-- onload事件在文檔加載完成時觸發，onmousemove事件在鼠標於body上移動時觸發 --> 
   
   
            
   
   <body onload="init()" onmousemove="bunnyRun()"> 
   
   
            
   
    
   
   
            
   
   <!-- 這兩張圖片分別表明兔小白和兔小灰 --> 
   
   
            
   
   <img class="bunny" id="white" src="white.gif" /> 
   
   
            
   
   <img class="bunny" id="gray" src="gray.gif" /> 
   
   
            
   
    
   
   
            
   
   </body> 
   
   
            
   
   </html>