[英]javascript execute function with time interval
I have the simple function of changing content of container div. 我有改变容器div内容的简单功能。 There is a
<table>
inside the container <div>
, with 2 <td>
s, the javascript simply moves left this <table>
and it works, but onclick
and I need to execute the moving function with time interval. 在容器
<div>
有一个<table>
,有2 <td>
,javascript只是向左移动<table>
并且它可以工作,但是onclick
我需要以时间间隔执行移动函数。
<div onclick="move(this.children[0])" class="table_wrap">
<div class="table_scroll" style="left: 0px;">
<table cellpadding="0" cellspacing="5" width="1920px">
<tr>
<td style="background-color: red;">
a
</td>
<td style="background-color: blue;">
b
</td>
</tr>
</table>
</div>
</div>
<script language="javascript">
function move(elem) {
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}
</script>
And CSS: 和CSS:
<style type="text/css">
.table_wrap{
position:relative;
overflow:hidden;
width: 967px;
height: 250px;
left: -2px;
top: 5px;
}
.table_wrap .table_scroll{
position: absolute;
text-align:center;
white-space:nowrap;
}
</style>
I tryed to use setInterval
, but failed. 我尝试使用
setInterval
,但失败了。
http://jsfiddle.net/hqztm2dt/1/ here is the JSfiddle, just click on the red line.. Thanks in advance for the attention ! http://jsfiddle.net/hqztm2dt/1/这里是JSfiddle,只需点击红线即可。提前感谢您的关注!
If you need to move it on interval, see this: http://jsfiddle.net/gsddsxgy/2/ (here the time interval is 3ms)
如果你需要间隔移动它,请看: http : //jsfiddle.net/gsddsxgy/2/ (这里的时间间隔是3ms)
html: HTML:
<div class="table_wrap">
<div id='move' class="table_scroll" style="left: 0px;">
<table cellpadding="0" cellspacing="5" width="1920px">
<tr>
<td style="background-color: red;">
a
</td>
<td style="background-color: blue;">
b
</td>
</tr>
</table>
</div>
</div>
JS: JS:
setInterval(function(){
var elem=document.getElementById('move');
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}, 3000);
If you need to move the div on click but after a little time gap, see this http://jsfiddle.net/gsddsxgy/
如果您需要在点击时移动div,但在一点时间间隔后,请参阅此http://jsfiddle.net/gsddsxgy/
code: 码:
function move(elem) {
setTimeout(function(){
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}, 1000);
}
The problem with your code in jsFiddle is the move function isn't defined when trying to call it - if you use addEventListener you can bind the method to the click event using just javascript and not the onClick attribute. 你在jsFiddle中的代码的问题是在尝试调用它时没有定义move函数 - 如果使用addEventListener,你可以使用javascript而不是onClick属性将方法绑定到click事件。 Using your code:
使用你的代码:
var elem = document.getElementById('wrapper');
elem.addEventListener('click', move);
function move() {
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}
JS fiddle - http://jsfiddle.net/b1q7poj4/2/ JS小提琴 - http://jsfiddle.net/b1q7poj4/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.