这段html代码为何无法调用JS文件

HazzaCheng 2016-05-24 10:05:06 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="utf-8" />

	<title>Web Design</title>

	<link rel="stylesheet" href="styles/layout.css" media="screen" />

</head>

<body>

	<h1>Web Design</h1>

	<p>There are things you should know.</p>

	<ol id="linklist">

		<li>

		<a href="structure.html">Structure</a>

		</li>

		<li>

		<a href="presentation.html">Presentation</a>

		</li>

		<li>

		<a href="behaviour.html">Behaviour</a>

		</li>

	</ol>

	<script src="scripts/addLoadEvent.js"></script>

	<script src="scripts/insertAfter.js"></script>

	<script src="scripts/moveElement.js"></script>

	<script src="scripts/prepareSlideshow.js"></script>

</body>

</html>

function insertAfter(newElement,targetElement)

{

	var parent=targetElement.parentNode;

	if(parent.lastChild==targetElement)

	{

		parent.appendChild(newElement);

	}

	else

	{

		parent.insertBefore(newElement,targetElement.nextSibling);

	}

}

addLoadEvent(insertAfter);

function moveElement(elementID,final_x,final_y,interval)

{

	//确保浏览器理解DOM的方法

	if(!document.getElementById)

	{

		return false;

	}

	//确保元素存在

	if(!document.getElementById(elementID))

	{

		return false;

	}

	var elem=document.getElementById(elementID);

	//清除在setTimeout队列里的事件

	if(elem.movement)

	{

		clearTimeout(elem.movement);

	}

	//确保left,top属性存在

	if(!elem.style.left)

	{

		elem.style.left="0px";

	}if(!elem.style.top)

	{

		elem.style.top="0px";

	}

	//将坐标转换为整形数

	var xpos=parseInt(elem.style.left);

	var ypos=parseInt(elem.style.top);

	var dist=0;

	//判断如何移动

	if(xpos==final_x&&ypos==final_y)

	{

		return true;

	}

	if(xpos<final_x)

	{

		dist=Math.ceil((final_x-xpos)/10);

		xpos+=dist;

	}

	if(xpos>final_x)

	{

		dist=Math.ceil((xpos-final_x)/10);

		xpos-=dist;

	}

	if(ypos<final_y)

	{

		dist=Math.ceil((final_y-ypos)/10);

		ypos+=dist;

	}

	if(ypos>final_y)

	{

		dist=Math.ceil((ypos-final_y)/10);

		ypos-=dist;

	}

	elem.style.left=xpos+"px";

	elem.style.top=ypos+"px";

	var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

	elem.movement=setTimeout(repeat,interval);

}

addLoadEvent(moveElement);

function prepareSlideshow()

{

	//确保浏览器理解DOM的方法

	if(!document.getElementsByTagName||!document.getElementById)

	{

		return false;

	}

	//确保元素存在

	if(!document.getElementById("linklist")

	{

		return false;

	}

	//构建图片显示的div

	var slideshow=document.createElement("div");

	slideshow.setAttribute("id","slideshow");

	var preview=document.createElement("img");

	preview.setAttribute("src","images/topics.gif");

	preview.setAttribute("alt","building blocks of web design");

	preview.setAttribute("id","preview");

	slideshow.appendChild(preview);

	var list=document.getElementById("linklist");

	insertAfter(slideshow,list);

	//取得列表中所有的链接

	var links=list.getElementsByTagName("a");

	//为mouseover事件添加动画效果

	links[0].onmouseover=function()

	{

		moveElement("preview",-100,0,10);

	}

	links[1].onmouseover=function()

	{

		moveElement("preview",-200,0,10);

	}

	links[2].onmouseover=function()

	{

		moveElement("preview",-300,0,10);

	}

}

addLoadEvent(prepareSlideshow);



新手小白研究了一天都没得出结果，仿照书写的代码。
为何<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/insertAfter.js"></script>
<script src="scripts/moveElement.js"></script>
<script src="scripts/prepareSlideshow.js"></script>
只有前两个调用了，而后面两个没有调用，根本没有创建动态标记，求大神指导！
...全文
259 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
jio可 2016-05-25
  • 打赏
  • 举报
 回复
用谷歌浏览器打开网页按f12会出现控制台,再点击控制台Sources在下面的左边菜单找到你使用的js文件然后点击文件,右边会打开文件,点击数字行标记添加断点刷新就可以调试了f10下一步。
HazzaCheng 2016-05-25
  • 打赏
  • 举报
 回复
引用 1楼KK3K2005 的回复:
不要连带测试 不相干的删掉 只加载有问题的一个js 可以吧js 直接黏贴在html中来测试 代码本身ok吗 如果会调试的话 这个问题就很简单了
我不会调试 请问JS怎样调试
HazzaCheng 2016-05-25
  • 打赏
  • 举报
 回复
引用 5楼三岁打酱油 的回复:
[quote=引用 4 楼 chengfeng1996 的回复:] [quote=引用 3 楼 u012418098 的回复:] 用谷歌浏览器打开网页按f12会出现控制台,再点击控制台Sources在下面的左边菜单找到你使用的js文件然后点击文件,右边会打开文件,点击数字行标记添加断点刷新就可以调试了f10下一步。
@u0124谢谢但是 根本没有那个文件是什么情况？ 没有prepareSlideshow.js 其他JS文件都在 [/quote] 没有就是没加载,你看下是不是架子啊的时候有问题吧[/quote]这就是我百思不得其解的地方 框架没错啊
jio可 2016-05-25
  • 打赏
  • 举报
 回复
引用 4 楼 chengfeng1996 的回复:
[quote=引用 3 楼 u012418098 的回复:] 用谷歌浏览器打开网页按f12会出现控制台,再点击控制台Sources在下面的左边菜单找到你使用的js文件然后点击文件,右边会打开文件,点击数字行标记添加断点刷新就可以调试了f10下一步。
@u0124谢谢但是 根本没有那个文件是什么情况？ 没有prepareSlideshow.js 其他JS文件都在 [/quote] 没有就是没加载,你看下是不是架子啊的时候有问题吧
KK3K2005 2016-05-25
  • 打赏
  • 举报
 回复
不要连带测试 不相干的删掉 只加载有问题的一个js 可以吧js 直接黏贴在html中来测试 代码本身ok吗 如果会调试的话 这个问题就很简单了
HazzaCheng 2016-05-25
  • 打赏
  • 举报
 回复
引用 3 楼 u012418098 的回复:
用谷歌浏览器打开网页按f12会出现控制台,再点击控制台Sources在下面的左边菜单找到你使用的js文件然后点击文件,右边会打开文件,点击数字行标记添加断点刷新就可以调试了f10下一步。
@u0124谢谢但是 根本没有那个文件是什么情况？ 没有prepareSlideshow.js 其他JS文件都在
html静态页面调用php文件的方法
静态页面中看上去好像是不能直接调用php文件的，但是却可以使用js调用方式来调用php文件，当然还可以使用ajax 调用php文件，下面就来给大家介绍一下： 举一个简单的例子来说明:   如在页面a.html中用下面这句调用，...
HTML5 Shiv 3.7.3.js
让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会...
让IE支持CSS3 Media Query实现响应式Web设计，html5.js让IE（包括IE6）支持HTML5元素方法
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。 这个html5的js文件...
html5shiv.js
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
IE支持html5脚本插件
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。 这个html5的js文件...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章