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

有什么问题吗? – 2011-05-10 04:10:23

+0

问题是我已经从上面的链接中复制了Matt的bresenham示例中的代码,并将其粘贴到HTMl文档中,但是当您在浏览器中运行它时什么也不显示?任何想法? – Kram 2011-05-10 04:21:32

+1

布氏()函数需要一个数的参数(EL,X1,Y1,X2,Y2,则params),其中EL意味着是一个元素的参考页面(或,任选地,一个字符串)上。但是你的页面上没有任何元素,并且你根本就不会调用bresnehan()函数。查看您引用的页面的源代码并搜索以YAHOO.util.Event.onDOMReady开头的代码(注意这使用了超出此问题范围的Yahoo脚本库来解释它,它还使用' EL =使用document.createElement(“DIV”)'来创建动画的红盒子。 – nnnnnn 2011-05-10 04:42:22

你的问题是,虽然你在公用事业装做一些事情,你没有利用它的任何代码。

例如:

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改变为你实际希望他们成为的任何对象。

我可以说你是全新的整件事,所以我希望这很简单。

+0

对不起不知道发生在我身上的标签。我再补充吧。现在的问题是我从马特的布氏例如链接复制代码并将其粘贴到HTMl文档中,但是当您运行它时什么都不显示?任何想法? – Kram 2011-05-10 04:20:01

+0

查看更新后的答案。 – Kayla 2011-05-10 04:40:42

你已经提出了一个非常开放的问题,所以我不知道如何回答它。我假设你的页面上有一些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,因为你的算法使用了绝对定位的元素工作topleft CSS属性。

bresenham("elt1",100,100,300,300,null);