如何将JavaScript代码和html代码结合在一起
How do you combine JavaScript code and html code together?
我是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;
}
<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
您发现的代码正在使用jquery库,因此为了使其工作,您必须首先在页面中获取jquery插件,只需将此代码放在文档中的任何位置即可。为了更快地加载,请将其放在页面底部。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
其次,将您的jquery代码放在此链接下,否则它将无法工作。
这是一个基本的入门html模板
<html>
<head>
<script language="Javascript">
Function here
</script>
</head>
<body>
Html code here
</body>
</html>
将<script>...</script>
块放在页面末尾的</body>
标记之前。如果你把脚本放在页面的顶部,有时会导致错误。
代码中的一些错误:
- 脚本标记后面不应该有分号
- 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>
相关文章:
- 创建一个循环来简化HTML和CSS代码
- HTML 5 和 3.js 代码不会在网页上显示任何内容
- 如何解析结构不良的 html 代码
- HTML标记,包含带引号的JavaScript代码中的引号
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- HTML 标记未在 AngularJS ckEditor 中应用,而是在 Ediator 中显示 HTML 元素标记代码
- 如何在html中将字符串转换为数字?以及如何将变量传递到scriptlet代码中
- 将第一个字母大写并去掉html代码
- 我在下拉列表中尝试了下一个和前五年的html代码.接下来的5年我都过得很好.我怎样才能拿到之前的5年
- 使用.format在一些HTML代码中插入文本,会出现错误(Python)
- html代码没有在记事本++上运行
- 来自mysql的动态值用于html代码点火器视图中的图形
- 如何:编写漂亮的HTML代码和Javascript控制台
- 在html标记中序列化javascript代码
- 我需要java代码来打开html代码onclick事件
- html代码需要可点击的文本按钮
- 无法使用我的代码(html/js/css)初始化网络摄像头
- 如何编辑此代码HTML/CSS以使'选择'JS代码也复制2剪贴板
- 如何使用js来反转义代码html
- 如何在 ATTR 标题中显示代码 HTML