你如何將JavaScript代碼和html代碼結合在一起？

我更新Javascript和HTML。我想檢查圖像是否加載。我在StackOverflow上找到了這個代碼，但我不知道如何將它們合併爲一個完成的部分：任何人都可以告訴我？你如何將JavaScript代碼和html代碼結合在一起？

JS代碼：

<script language="JavaScript"> 
    $("img").one("load", function() { 
     // do stuff 
    }).each(function() { 
     if(this.complete) $(this).load(); 
    }); 
    </script>;

的HTML代碼：

<div> 
    <table width="100%" height="100%" align="center" valign="middle"> 
    <tr> 
     <td bgcolor="258cca"><td align="center" valign="middle"> 
     <p> 
      <img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png"> 
     </p> 
     <p class="STYLE1 STYLE2"></p> 
     </td> 
    </tr> 
    <tr></tr> 
    </table> 
    <BODY ondragstart="return false;" ondrop="return false;"> 
</div>

的CSS：

body { 
    background-color: #558CCA; 
} 
.STYLE1 { 
    color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px; 
} 
.STYLE2 { 
    font-size: 21px; 
}

來源

2016-09-14 monk master

我建議通過一些在線教程，或者可能註冊一個學習網站，如teamtreehouse.com – Cruiser

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <style type="text/css"> 
      body {background-color: #558CCA;} 
      .STYLE1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;} 
      .STYLE2 {font-size: 21px}  
     </style> 

     <title></title> 
     <script type="text/javascript"> 
      window.onload=function(){ 
       $("img").on("load", function() { 
       }).each(function() { 
       if(this.complete) $(this).load(); 
       }); 
      } 
     </script> 
    </head> 

    <body> 
     <div> 
      <table width="100%" height="100%" align="center" valign="middle"> 
       <tbody> 
        <tr> 
         <td bgcolor="258cca"></td><td align="center" valign="middle"> 
          <p> 
          <img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png"> 
          </p> 
          <p class="STYLE1 STYLE2"></p> 
         </td> 
        </tr> 
        <tr> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

Fiddle

來源

2016-09-14 13:29:14 1337

謝謝大家，感謝您的幫助，我認爲這個答案是像我這樣的新人最好的答案。 :) –

這是一個基本的入門HTML模板

<html> 
    <head> 
     <script language="Javascript"> 
      Function here 
     </script> 
    </head> 

    <body> 
     Html code here 
    </body> 
</html>

來源

2016-09-14 13:17:29

你找到的代碼是使用jquery庫，所以爲了它的工作，你必須先在你的頁面中獲取jquery插件，只需將這些代碼放在你的文檔中的任何位置。爲了加快載入速度，請將它放在頁面底部。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 其次，把你的jQuery代碼放在這個鏈接下，否則它將無法工作。

來源

2016-09-14 13:25:22 AntonyMN

代碼中的幾個誤區：

應該有腳本標記之後別無分號
jQuery有「上」的方法，它的拼寫錯誤「一」在這裏

當在一個文件中基本的html頁面語法如下：

<!DOCTYPE html> 
<html> 
<title>Web Page Design</title> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<style type="text/css"> 
/* css styles go here*/ 
body { 
    background-color: #558CCA; 
} 
.STYLE1 { 
    color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px; 
} 
.STYLE2 { 
    font-size: 21px; 
} 
</style> 
<script type="text/javascript"> 
    // javascript/jquery code goes here 
    $("img").on("load", function() { 
     // do stuff 
    }).each(function() { 
     if(this.complete) $(this).load(); 
    }); 
</script> 
</head> 
<BODY ondragstart="return false;" ondrop="return false;"> 
<div> 
    <table width="100%" height="100%" align="center" valign="middle"> 
    <tr> 
     <td bgcolor="258cca"><td align="center" valign="middle"> 
     <p> 
      <img src="http://findicons.com/files/icons/1072/face_avatars/300/a05.png"> 
     </p> 
     <p class="STYLE1 STYLE2"></p> 
     </td> 
    </tr> 
    <tr></tr> 
    </table> 
</div> 
</body> 
</html>

來源

2016-09-14 13:31:11

把<script>...</script>塊到你的頁面的最後，</body>標記之前。如果您的腳本位於頁面頂部，則有時會導致錯誤。

來源

2016-09-14 13:35:17 Remzes

你如何將JavaScript代碼和html代碼結合在一起？

回答

相關問題