您如何将JavaScript代码和html代码结合在一起？

Question

我刚接触Javascript和HTML。 我想检查是否已加载图像。 我在StackOverflow上找到了这段代码，但是我不知道如何将它们组合成成品：有谁能告诉我？

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;
}

Answer 1

您发现的代码正在使用jquery库，因此为了使其工作，必须首先在页面中获取jquery插件，然后将此代码放在文档中的任何位置。 为了更快地加载，请将其放在页面底部。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>其次，将您的jquery代码放在此链接下，否则将无法工作。

Answer 2

<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>

小提琴

Answer 3

这是一个基本的入门html模板

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

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

Answer 4

您的代码中有一些错误：

脚本标记后不应有分号
jQuery具有“ on”方法，此处拼写错误的“ one”

当在一个文件中时，基本的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>

Answer 5

将<script>...</script>块放在页面末尾</body>标记之前。 如果您的脚本位于页面顶部，则有时可能会导致错误。

您如何将JavaScript代码和html代码结合在一起？

问题描述

5 个解决方案

解决方案1
1 2016-09-14 13:25:22

解决方案2
1 已采纳 2016-09-14 13:29:14

解决方案3
0 2016-09-14 13:17:29

解决方案4
0 2016-09-14 13:31:11

解决方案5
0 2016-09-14 13:35:17

您如何将JavaScript代码和html代码结合在一起？

问题描述

5 个解决方案

解决方案1 1 2016-09-14 13:25:22

解决方案2 1 已采纳 2016-09-14 13:29:14

解决方案3 0 2016-09-14 13:17:29

解决方案4 0 2016-09-14 13:31:11

解决方案5 0 2016-09-14 13:35:17

解决方案1
1 2016-09-14 13:25:22

解决方案2
1 已采纳 2016-09-14 13:29:14

解决方案3
0 2016-09-14 13:17:29

解决方案4
0 2016-09-14 13:31:11

解决方案5
0 2016-09-14 13:35:17