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>

有什么问题吗？ – 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

答

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

例如：

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文档中，但是当您运行它时什么都不显示？任何想法？ – Kram 2011-05-10 04:20:01

查看更新后的答案。 – 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，因为你的算法使用了绝对定位的元素工作top和left CSS属性。

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

HTML中的Javascript脚本

相关推荐