javascript执行具有时间间隔的函数

javascript execute function with time interval

本文关键字：函数 时间 执行 javascript      更新时间：2023-12-22

我有一个更改容器div内容的简单功能。容器<div>中有一个<table>，有两个<td>s，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>

和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>

我尝试使用setInterval，但失败了。

http://jsfiddle.net/hqztm2dt/1/这是JSfiddle，只需点击红线。。提前感谢您的关注！

如果您需要在间隔中移动它，请参阅以下内容：http://jsfiddle.net/gsddsxgy/2/（此处时间间隔为3ms）

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:

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);

如果您需要在单击时移动div，但经过一段时间后，请参阅这http://jsfiddle.net/gsddsxgy/

代码：

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);
        }

jsFiddle中代码的问题是在尝试调用move函数时没有定义它-如果使用addEventListener，则可以仅使用javascript而不使用onClick属性将该方法绑定到click事件。使用您的代码：

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小提琴-http://jsfiddle.net/b1q7poj4/2/

相关文章：