如何使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的多個代碼的獨特功能

回答

相關問題