![](/img/trans.png)
[英]How do I interact with a javascript popup with Selenium or Poltergeist?
[英]How do I get JavaScript to interact with Jquery?
嗨,我正在做一个学校计算项目。 当框触摸时,我需要让可拖动的jQuery框与我的交通灯交互(我的交通灯处于循环中),这需要启动交通灯循环,这可能吗? 任何帮助将非常感激,
到目前为止,这是我的代码;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightscentre = 0
var timer
function ChangeImage() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function LightCycle() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function stopCycle() {
clearTimeout(timer)
}
</script>
</head>
<body>
<img src="red.png" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="ChangeImage()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
您可以针对动画(?)或您计划的内容在Jquery中执行该功能。 另外,您可以在JS中转换Jquery变量以在函数中使用它们。 最好的方法是采用任何GET / POST并在Jquery中进行,然后在JS中或数据获取部分中进行其他所有操作。
此外,祝您项目顺利。 随意在@ ev1stensberg(twitter)上找我聊天。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightsCentre = 0;
var timer = setInterval(function {
window.location.reload()
}, 3000);
var turnOnTheLights = function(e) {
e.preventDefaults();
switch(lights) {
case (document.getElementbyId('redLights').onClick == true) :
return lights[0]
setTimeout(function() {
console.log("hello"),
}, 3000);
case(document.getElementbyId('redLights').onClick == true &&
return lights[0] == true) :
return lights[1].
setTimeout(function() {
console.log("I'm a terrible programmer");
}, 3000)
case(document.getElementbyId('redLights').onClick == true &&
return lights[1] == true) :
return clearInterval(timer)
break;
default: window.location.reload();
}
return lights;
}
var turnOffTheLights = function(e) {
e.preventDefaults();
return window.setTimeout(function() {
console.log("Heyho"), 3000
});
}
</script>
</head>
<body>
<img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="turnOnTheLights()">
<input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
您可以使用拖动事件:
function init() {
var $light = $('img');
var $draggable = $('#makeMeDraggable').draggable({
drag: function( event, ui ) {
var light_offset = $light.offset();
if (ui.offset.left < light_offset.left+$light.width() &&
ui.offset.left + $draggable.width() > light_offset.left &&
ui.offset.top + $draggable.height() > light_offset.top &&
ui.offset.top < light_offset.top+$light.height()) {
if (!timer) {
LightCycle();
}
} else {
clearTimeout(timer);
timer = null;
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.