[英]javascript setInterval() working in Dreamweaver but not in Chrome
每当用户单击标记中具有onClick="move()"
的菜单图像时,我都试图从菜单中下拉图像。 到目前为止,图像从页面顶部开始,在菜单后面,因此已隐藏,然后按预期向下滑动。 但是,在图像到达停止点后,当我在IE和Chrome中都测试页面时,再次单击菜单根本没有任何效果。 在Dreamweaver中,代码按预期执行,能够在图像到达底部后向上滑动并再次向下滑动。 我已经尝试过更改对setInterval()的调用,因为我假设这是问题所在,但似乎没有任何效果。 为什么Dreamweaver可以正确执行代码,而不是Chrome或IE?
var onMusic=false;
var id;
function move() {
if(!onMusic) {
moveDown()
}
else {
moveUp()
}
}
function moveUp() {
top=100
id = setInterval(function() {
top-=10 // update parameters
document.getElementById('guitar').style.top = top + 'px' // show frame
if (top <= -500) {// check finish condition
onMusic=false
clearInterval(id)
}
}, 10) // draw every 10ms
}
function moveDown() {
var top=-500
id = setInterval(function() {
top+=10 // update parameters
document.getElementById('guitar').style.top = top + 'px' // show frame
if (top == 100) {// check finish condition
onMusic=true
clearInterval(id)
}
}, 10) // draw every 10ms
}
id
仅在moveDown
函数的范围内可见。 将其设为全局,以便您可以在moveUp
调用clearInterval(id)
。
更改
function moveDown() {
var top=-500
var id = setInterval(function() {
至
var id;
function moveDown() {
var top=-500
id = setInterval(function() {
每十分之一毫秒( .1
)更改dom可能会有点极端...
我认为问题是:
top=100
// should be
var top = 100;
您可以尝试在控制台中查看我的意思:
>top = 12
12
> top
Window {top: Window, window: Window, location: Location, Proxy: Object, external: Object…}
但是我在jsfiddle中清理了一下: http : //jsfiddle.net/pNh57/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.