如何为javascript的多个代码制作一个独特的函数

how to make a unique function for multiple codes of javascript

本文关键字：函数 一个 javascript 代码      更新时间：2023-09-26

我有以下代码，我想知道如何把它全部放在一个函数上，并给跨度的id一个唯一的id。这样我就不必每次都有相同代码的多个实例。现在，如果我想有3个倒计时，我必须添加他的代码三次，并将span id更改为唯一的id，如果我不这样做，它只会工作一次。所以基本上，我希望能够把JavaScript变成一个函数，这样我就可以调用它，而不必多次复制和粘贴它，也能够在一个页面上有多个倒计时，通过给跨度自己唯一的(随机)id。

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

下面是我推荐的几种方法，可以使这个函数更易于重用。

  1. 将过期时间作为参数传递，而不是将其硬编码为PHP代码打印的某些数据库值。

  2. 断开隐式定时器和UI (span)连接。

  3. 管理函数本身的定时器间隔。现在它在函数和全局代码(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)

假设你有两个span, id为a和b，需要显示这个定时器，那么你将使用这个函数，

showRemainingTime(1325544453556, document.getElementById('a'));
showRemainingTime(1218290387102, document.getElementById('b'));
相关文章：