如何使js移动脚本具有可重复性
How do you make a js movement script repeatable?
我制作了以下脚本:
var object = document.getElementById("object");
var omhoog = document.getElementById("omhoog");
var omlaag = document.getElementById("omlaag");
var links = document.getElementById("links");
var rechts = document.getElementById("rechts");
var currentInterval;
object.style.left = '0px';
object.style.top = '0px';
omhoog.onclick = function()
{
var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
clearInterval(currentInterval);
var positiehuidigtop = parseInt(object.style.top);
currentInterval = setInterval(function()
{
if (parseInt(object.style.top)>positiehuidigtop-aantalpixels)
{
object.style.top = (parseInt(object.style.top) - 1) + 'px';
}
}, 10);
}
omlaag.onclick = function()
{
var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
clearInterval(currentInterval);
var positiehuidigtop = parseInt(object.style.top);
currentInterval = setInterval(function()
{
if (parseInt(object.style.top)<positiehuidigtop+aantalpixels)
{
object.style.top = (parseInt(object.style.top) + 1) + 'px';
}
}, 10);
}
links.onclick = function()
{
var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
clearInterval(currentInterval);
var positiehuidigleft = parseInt(object.style.left);
currentInterval = setInterval(function()
{
if (parseInt(object.style.left)>positiehuidigleft-aantalpixels)
{
object.style.left = (parseInt(object.style.left) - 1) + 'px';
}
}, 10);
}
rechts.onclick = function()
{
var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
clearInterval(currentInterval);
var positiehuidigleft = parseInt(object.style.left);
currentInterval = setInterval(function()
{
if (parseInt(object.style.left)<positiehuidigleft+aantalpixels)
{
object.style.left = (parseInt(object.style.left) + 1) + 'px';
}
}, 10);
}
当我单击一个div时,它会移动另一个div,其像素量为变量"aantalpixels"此时所保持的像素量。(变量的名称为荷兰语)。
它第一次工作,但第二次div将永远继续。我认为这与if语句有关。
您的脚本没有正确计算目标。如果将div(比如100px)向右移动,那么在第一次运行时,positiehuidigleft+aantalpixels
将是0100
,它仍然被视为100。然而,在第二次运行时,positiehuidigleft+aantalpixels
将是0100100
,这有点太高,因此创建了看似无穷无尽的动画。
有关工作示例,请参见DEMO(注意:移动按钮绝对设置为离顶部300px,因此请确保预览框足够大,可以看到它们)。
if构造已更改为
if (parseInt(object.style.top)>parseInt(positiehuidigtop)-parseInt(aantalpixels))
相关文章:
- 带有嵌入脚本的SVG可扩展到浏览器的可用空间
- 如何制作自定义的可拖动脚本
- 在过去24小时内,谷歌应用程序脚本或可视化API的任何变化
- 可从网页调用的Bash脚本
- HTML可读的单独脚本标记
- 动画滚动脚本可防止从外部链接访问本地锚点位置
- Greasemonkey 可防止脚本在 Inernet 出现故障时卡住
- 带有客户端脚本的HTML表,可存储在Mysql数据库中
- 如何使用用户脚本删除烦人的可点击正文链接
- 如何将值从可视化力量组件中的脚本传递到其控制器
- 一个可翻译成JavaScript的脚本,带有callback-hell自动避免器
- 将一些 Codepen 脚本与可视化编辑器一起使用
- 具有可单击区域的网页图像,可将数据发送到服务器脚本,并保留在同一页面上,无需刷新
- JavaScript var 分配一个动态可为空的值显示脚本错误
- 在应用脚本中,如何在自定义函数中包含可选参数
- 无法让单元格专注于内容可编辑脚本
- 如何使js移动脚本具有可重复性
- 如何使JSTL编写的元素id可用于脚本
- HTML5 LocalStorage存储可执行脚本
- 可编写脚本的mp3播放器,类似于niftyplayer