javascript做的一个根据table中某个td的值为日期时的倒计时

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>

原文地址:https://www.cnblogs.com/strive-boy/p/8533224.html

时间: 2024-10-07 15:56:32

javascript做的一个根据table中某个td的值为日期时的倒计时的相关文章

HTML基础知识 table中 th,td,tr

https://www.2cto.com/kf/201711/701872.html table是一个布局神器,之前看过很多代码,都是用table布局的.但是,我在学习的过程中,发现table有很迷的三个宝宝,他们是tr,th以及td; tr:这是表中的"行".每一行是一个tr(table row). th:这是表头,也就是每一列的标题(table head). td:这是表的每一个单元格 th与td的区别是:th内部的文本样式为居中+粗体,td 内的文本样式为左对齐+普通文本. 例(

Jquery Ajax 异步设置Table中某列的值

可根据table中某列中的ID去改变某列的值! JS: 1 $(document).ready(function () { 2 setTimeout(GetDate, 1000); 3 4 }); 5 6 function GetDate() { 7 $("#tbData tbody").find("tr").each(function () { 8 var prjectBalanceObj = $(this).find("td:eq(3)");

JavaScript做的一个日历

小米手机上的日历看着不错,就用javascript试着做了一下,如图: 核心内容就是三个部分,公历部分--->script.js,农历部分--->lunar.js,天气部分--->weather.js,尽管日历上加个天气好像看起来不那么恰当,但本来就是练习,就顺便写了. script.js主要在表格上填写日期信息以及绑定一些事件处理程序,基本上就是一个calendar对象,具体过程就是先得到当天的星期和本月的天数,这样当月的公历日期信息就完整了,而上月和下月的公历信息也跟着出来了. lu

table中的td自动换行

总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时遇到"牛逼"的领导你能怎么办,就要用table怎么办!就问你怎么办!!! 那就把tr当ul,td当li用咯! 1.效果图: 2.这是重置样式normalize.css代码: /** * Correct `block` display not defined in IE 8/9. * * 修

让table中的td不会被过长的文字撑开,并且自动出现省略号

<style type="text/css"> table {width:600px;table-layout:fixed;} td {white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis} </style> <table border=1 > <tr> <td width="30%">dd</td&

当table中的td内容过多,显示不完全,用省略号表示。

.format{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 首先需要设置表头宽度,然后在需要的内容过长用省略号表示的td上加上class="word"即可,好像是要加到td上,不能加到th上,具体可以试下

JavaScript获取select下拉框中的第一个值

JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

关于html中table表格tr,td的高度和宽度

做网页的时候精到会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题. 首先,来分析一下这三个标签中height和width的区别: 1.table中的width和height设置及其作用:table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值.table中设置的width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变.(这个

css实现table中td单元格鼠标悬浮时显示更多内容

table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span class="tdtip">popAddress</span></td> css: td{ position:relative; z-index:2; } td:hover{ z-index:3; background:none; } td .tdtip { di