HTML中的Javascript脚本
我试图将这个JavaScript代码(这是从其他人借用信用额度借来的)插入HTML页面。我明白如何使用简单的document.write()
来显示带有JavaScript的文本,并且在Java中也很流利,但我很难试着让这些功能正常工作。由于缺乏更好的单词或单词,我试图用JavaScript来获得一些动画。我发现了各种教程,展示了一些JavaScript逻辑并打印到屏幕上,但没有一个使用动画,并且如果它们显示一些动画,则不会显示如何将其包含到HTML中。我想在HTML页面中正确显示动画。我一直在阅读关于JavaScript的W3学校教程,其中大多数都会返回一些内容或使用document.write从表单或浏览器中获取信息。我相信这可能与创建一个对象用于显示算法中的运动或JavaScript的DOM有关。HTML中的Javascript脚本
我的JavaScript背后的想法是,我想模拟一个bresenham线算法的工作示例。这里有一个这样的例子:Bresenham line algorithm
我还看到很多教程将JavaScript包含在辅助文件中,并使用src标记引用JavaScript,但我想将JavaScript保留在html页面的末尾请。
我也在使用Dreamweaver开发HTML & JavaScript页面。
代码如下。另外请随时列出一个网站或教程,我可以参考查看更多信息。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bresenham's Line Algorithm</title>
</head>
<body>
<script type="text/javascript">
/**
* Bresenham's line algorithm function
* by Matt Hackett [scriptnode.com]
* @param {Object} el The element to target (accepts both strings for id's and element *objects themselves)
* @param {Number} x1 The starting X coordinate
* @param {Number} y1 The starting Y coordinate
* @param {Number} x2 The finishing X coordinate
* @param {Number} y2 The finishing Y coordinate
* @param {Object} params Additional parameters [delay, onComplete, speed]
*/
var bresenham = function(el, x1, y1, x2, y2, params) {
var
interval,
b,
m,
sx,
y;
var init = function() {
var dx, dy, sy;
// Default parameters
params = params || {};
params.delay = params.delay || 10;
params.onComplete = params.onComplete || function(){};
params.speed = params.speed || 5;
// No point in doing anything if we're not actually moving
if ((x1 == x2) && (y1 == y2)) {
plot(x1, y);
params.onComplete();
return;
}
el = ((typeof el === 'string') ? document.getElementById(el) : el);
// Initalize the math
dx = x2 - x1;
sx = (dx < 0) ? -1 : 1;
dy = y2 - y1;
sy = (dy < 0) ? -1 : 1;
m = dy/dx;
b = y1 - (m * x1);
interval = setInterval(next, params.delay);
};
/**
* Execute the algorithm and move the element
*/
var next = function() {
y = Math.round((m * x1) + b);
plot(x1, y);
x1 += (sx * params.speed);
if (x1 >= x2) {
clearInterval(interval);
params.onComplete();
}
};
/**
* Move the target element to the given coordinates
* @param float x The horizontal coordinate
* @param float y The vertical coordinate
*/
var plot = function(x, y) {
el.style.left = x + 'px';
el.style.top = y + 'px';
};
init();
};
</script>
</body>
</html>
你的问题是,虽然你在公用事业装做一些事情,你没有利用它的任何代码。
例如:
function hello() {
alert('Hi!');
}
上面的代码应该告诉用户 “喜”,对不对?
错误。
告诉用户“嗨”的代码在那里,但我从来没有告诉过它,所以它不会。
您的网页没有做任何事情,因为您需要提供说明。
从通过网页上的代码,并为动画的来源看,我可以告诉你:
您需要添加一个调用brensenham
,你需要给它做什么的详细信息。
它需要的细节是:
- 元素的动画
- 起始位置
- 结束位置
所以,你需要添加到该脚本的到底是什么标签是:
// We need to make sure the elements are ready.
window.addEventListener('load', function() {
// Get the element and set up some details.
var element = document.getElementById('whatever-its-id-is'),
beginningX = 0,
beginningY = 0,
endX = 100,
endY = 100;
// Move the element.
brensenham(element, beginningX, beginningY, endX, endY);
});
然后将开始X,开始Y,结束X和结束Y改变为你实际希望他们成为的任何对象。
我可以说你是全新的整件事,所以我希望这很简单。
你已经提出了一个非常开放的问题,所以我不知道如何回答它。我假设你的页面上有一些HTML,为了节省空间,但我认为我们可能需要查看它(或者至少是其中的一部分)。
一般来说,我可以建议你避免像瘟疫一样的w3学校网站。去这里:http://w3fools.com了解原因的解释,然后向下滚动到他们可以完成的部分,为JavaScript,HTML和CSS提供一些很好的替代参考。
避免document.write() - 尤其是不要尝试使用它来更新页面加载后,我假设你需要做很多,如果你正在编写动画,但一般你根本不需要document.write()。谷歌自己的教程document.getElementById()
- 一个函数,返回您的网页上的HTML元素的引用;您可以使用返回的引用来更改该元素的文本,样式(以及位置)等。
不要担心在此阶段将JavaScript包含在单独的文件中。在真实世界的网站上这样做是有充分的理由的,但是如果您只是在尝试和学习,将所有内容放在一个页面中可能更容易。
查看http://htmldog.com/和http://www.w3schools.com/,了解html,css和javascript如何交互的基本介绍。还可以查看www.getfirebug.com以了解如何调试JavaScript。一旦你有了这个基本的理解,调试你的程序和搜索你所拥有的问题的答案变得更容易。
代码的简要扫描显示你是通过getElementById('el');
除非你直接写输出到文件如你所说使用document.write()
或alert()
你必须有HTML显示输出呼叫到HTML元素el
您码。
从更广泛的角度来看,您首先需要了解javascript和html如何交互,然后您可以开始通过Google搜索教程来完成您尝试构建的任何特定元素,即“如何使用innerHTML()显示输出” “...
对我来说代码是好的。也许你只需要在你的页面中移动元素。根据该函数的文档,您需要指定页面中存在的元素的ID。
如果您打算在页面启动时运行它,您需要等待在DOM上进行任何操作之前构建页面的DOM。否则你的函数可能会尝试访问尚未构造的元素。
(有几个JavaScript框架,允许其跨浏览器)
申报你想通过你的算法影响的元素体。
<div id="elt1" style="position:absolute; top : 200px; left : 200px">element1</div>
然后在Chrome中使用控制台我输入这个,我得到了动画工作。我想你必须声明你的元素的风格position:absolute
,因为你的算法使用了绝对定位的元素工作top
和left
CSS属性。
bresenham("elt1",100,100,300,300,null);
有什么问题吗? – 2011-05-10 04:10:23
问题是我已经从上面的链接中复制了Matt的bresenham示例中的代码,并将其粘贴到HTMl文档中,但是当您在浏览器中运行它时什么也不显示?任何想法? – Kram 2011-05-10 04:21:32
布氏()函数需要一个数的参数(EL,X1,Y1,X2,Y2,则params),其中EL意味着是一个元素的参考页面(或,任选地,一个字符串)上。但是你的页面上没有任何元素,并且你根本就不会调用bresnehan()函数。查看您引用的页面的源代码并搜索以YAHOO.util.Event.onDOMReady开头的代码(注意这使用了超出此问题范围的Yahoo脚本库来解释它,它还使用' EL =使用document.createElement(“DIV”)'来创建动画的红盒子。 – nnnnnn 2011-05-10 04:42:22