如何使javascript的多个代码的独特功能

我有下面的代码，我想知道如何把它放在一个函数，并给范围的id一个唯一的ID。这样我就不必每次都有相同代码的多个实例。现在，如果我想要进行3次倒计时，我必须将其代码添加三次，并将跨度ID更改为唯一ID，如果我不这样做，它只会起作用。所以基本上我希望能够将JavaScript变成一个函数，这样我就可以调用它而不必复制和粘贴多次，并且还可以通过为跨度赋予它自己独特的（随机）编号。如何使javascript的多个代码的独特功能

<script> 
function showRemaining() { 
    <?php echo "var end = new Date('". $row['expires'] ."');"; ?> 

    var _second = 1000; 
    var _minute = _second * 60; 
    var _hour = _minute * 60; 
    var _day = _hour *24 
    var timer; 

    var now = new Date(); 
    var distance = end - now; 
    if (distance < 0) { 
     clearInterval(timer); 
     document.getElementById('countdown').innerHTML = 'EXPIRED!'; 

     return; 
    } 
    var days = Math.floor(distance/_day); 
    var hours = Math.floor((distance % _day)/_hour); 
    var minutes = Math.floor((distance % _hour)/_minute); 
    var seconds = Math.floor((distance % _minute)/_second); 

    document.getElementById('countdown').innerHTML = 'Days: ' + days + ' '; 
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours + ' '; 
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes + ' '; 
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds; 

} 

timer = setInterval(showRemaining, 1000); 
</script> 

<span id="countdown"></span>

来源

2012-01-02 bammab

只需使用类，而不是IDS。 – 2012-01-02 22:27:44

这里有一些方法，我会建议使这个功能更可重用。

将失效时间作为参数传递，而不是将其硬编码为由PHP代码打印的某个数据库值。
打破隐式计时器和UI（跨度）连接。传递此定时器将被明确更新的元素。
在函数本身内部管理定时器间隔。现在它在功能和全局代码之间传播（setInterval），这会使其难以重用。

这里是我为这个函数提出的更新接口。

/* 
    @param expiryTime timestamp when this countdown will expire 
    @param elementToUpdate a reference to a DOM element that shows the timer 
*/ 
function showRemainingTime(expiryTime, elementToUpdate)

说，如果你有两个跨度与ID的a和b这就需要显示此计时器，那么你可以使用这个功能，

showRemainingTime(1325544453556, document.getElementById('a')); 
showRemainingTime(1218290387102, document.getElementById('b'));

来源

2012-01-02 22:43:11 Anurag

如何使javascript的多个代码的独特功能

回答

相关问题