你如何将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代码结合在一起？

回答

相关问题