1. 程式人生 > >javascript做的一個根據table中某個td的值為日期時的倒計時

javascript做的一個根據table中某個td的值為日期時的倒計時

pan doc 現在 參數 tin continue 現在時間 諸葛亮 style

JavaScript代碼:

<script>
        window.onload = window.onload = function () { getTdValue(); }
        //根據傳過來的天數(day)和日期(datatime),返回在傳入日期上加上天數後的日期。如:day=2、datatime=2018/3/7 11:28:09,那麽返回的日期就是2018/3/9 11:28:09
        function showTime(day, datatime) { 
            var dayTime = day * 24 * 60 * 60 * 1000; //參數天數的時間戳
var nowTime = new Date(datatime).getTime(); //當天的時間戳 var t = new Date(nowTime + dayTime).toString("yyyy/MM/dd HH:mm:ss"); //把兩個時間戳轉換成普通時間 return t; } function leftTimer(enddate) { var leftTime = (new Date(enddate)) - new Date(); //計算剩余的毫秒數 var
days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計算剩余的天數 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計算剩余的小時 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘 var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數 days = checkTime(days); hours
= checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); if (days > 0 && hours >= 0 && minutes >= 0 && seconds >= 0) return days + "天" + hours + "小時" + minutes + "分" + seconds + "秒"; else if (days == 0 && hours >= 0 && minutes >= 0 && seconds >= 0) return hours + "小時" + minutes + "分" + seconds + "秒"; else if (days == 0 && hours == 0 && minutes >= 0 && seconds >= 0) return minutes + "分" + seconds + "秒"; else if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) { return ""; } } function checkTime(i) { //將0-9的數字前面加上0,例1變為01 if (i < 10) { i = "0" + i; } return i; } function getTdValue() { var tableId = document.getElementById("tab"); var str = ""; //循環獲取table for (var i = 1; i < tableId.rows.length; i++) { //tableId.rows[i].cells[4].innerHTML 獲取table中第5個td的值 var date1 = new Date(), data2 = new Date(showTime(2, tableId.rows[i].cells[4].innerHTML)); if (data2 < date1) continue;//設置的時間小於現在時間退出 tableId.rows[i].cells[5].innerHTML = leftTimer(showTime(2, tableId.rows[i].cells[4].innerHTML)) tableId.rows[i].cells[5].style.color = "red";//改變td顏色 setInterval("getTdValue()", 1000);//每秒刷新一次 } } </script>

HTML代碼:

<table style="width: 100%; height: 100%;" id="tab" border="1" cellpadding="1" cellspacing="1">
        <tr style="background-color: #CCC;">
            <th>學號</th>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
            <th>入學時間</th>
            <th>倒計時</th>
        </tr>
        <tr>
            <td>1</td>
            <td>李斯</td>
            <td></td>
            <td>22</td>
            <td>2018/2/8 11:28:09</td>
            <td>已入學</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王倩</td>
            <td></td>
            <td>20</td>
            <td>2018/3/7 11:28:09</td>
                 <td>已入學</td>
        </tr>
        <tr>
            <td>3</td>
            <td>於謙</td>
            <td></td>
            <td>18</td>
            <td>2018/3/8 13:28:09</td>
                 <td>已入學</td>
        </tr>
        <tr>
            <td>4</td>
            <td>柳浪</td>
            <td></td>
            <td>19</td>
            <td>2018/3/8 11:40:20</td>
                <td>已入學</td>
        </tr>
        <tr>
            <td>5</td>
            <td>諸葛亮</td>
            <td></td>
            <td>20</td>
            <td>2018/3/8 12:30:39</td>
                <td>已入學</td>
        </tr>
        <tr>
            <td>6</td>
            <td>東方雲</td>
            <td></td>
            <td>21</td>
            <td>2018/3/8 11:45:20</td>
              <td>已入學</td>
        </tr>
        <tr>
            <td>7</td>
            <td>公孫策</td>
            <td></td>
            <td>22</td>
            <td>2018/3/8 11:50:59</td>
             <td>已入學</td>
        </tr>
        <tr>
            <td>8</td>
            <td>寶清</td>
            <td></td>
            <td>23</td>
            <td>2018/3/8 13:28:47</td>
               <td>已入學</td>
        </tr>
        <tr>
            <td>9</td>
            <td>智育</td>
            <td></td>
            <td>20</td>
            <td>2018/3/8 13:08:09</td>
                <td>已入學</td>
        </tr>
        <tr>
            <td>10</td>
            <td>柳絲絲</td>
            <td></td>
            <td>21</td>
            <td>2018/3/8 14:28:09</td>
               <td>已入學</td>
        </tr>
    </table>

javascript做的一個根據table中某個td的值為日期時的倒計時