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的值为日期时的倒计时的更多相关文章

  1. jquery遍历table中每个td的值

    废话不说直接上: <table style="border:1px solid #ccc">        <tr>            <td&g ...

  2. table中的td限制宽度width也不能让字符过长变成省略号生效?

    table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...

  3. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

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

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

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

    https://www.2cto.com/kf/201711/701872.html table是一个布局神器,之前看过很多代码,都是用table布局的.但是,我在学习的过程中,发现table有很迷的 ...

  6. jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...

  7. table中的td等长(不随内容大小变化)

    使用的table时候发现td的长度是随着内容的大小而变化的,但是有的时候我们不希望这样.想要td等长可以在 tbale中加上         style=“table-layout:fixed”   ...

  8. table中的td内容过长显示为固定长度,多余部分用省略号代替

    如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...

  9. table中的td自动换行

    总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时 ...

随机推荐

  1. tcpdump查看某个端口数据

    tcpdump -i eth0 -nn -A port tcpdump src

  2. 深入浅出 Java Concurrency (6): 锁机制 part 1 Lock与ReentrantLock

      前面的章节主要谈谈原子操作,至于与原子操作一些相关的问题或者说陷阱就放到最后的总结篇来整体说明.从这一章开始花少量的篇幅谈谈锁机制. 上一个章节中谈到了锁机制,并且针对于原子操作谈了一些相关的概念 ...

  3. uwsgi的python2+3多版本共存实操使用virtualenv

    1首先,机器需要有python2和python3的可执行环境.确保pip和pip3命令可用.原理就是在哪个环境下安装uwsgi.uwsgi启动的时候,就用的哪个python版本 2安装virtuale ...

  4. 【转】C# 调用 C++ 数据转换

    原文:https://www.cnblogs.com/82767136/articles/2517457.html 在合作开发时,C#时常需要调用C++DLL,当传递参数时时常遇到问题,尤其是传递和返 ...

  5. Linux学习---新建文件,查看文件,修改权限,删除

    过程:在一个文件夹下面新建一个文件,然后查看文件,再修改权限,运行,最后删除 1.新建文件: touch  Test.sh 补充:新建文件有好多种方式,一般用mkdir(创建目录,即文件夹).touc ...

  6. Graphics.Blit

    [Graphics.Blit] 需求注意第4个参数,用4个参数pass用于指定使用哪一个pass.默认值为-1,即使用所有的pass. 参考:file:///C:/Program%20Files%20 ...

  7. 11. Container With Most Water 装水最多的容器

    [抄题]: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ...

  8. 使用mybatis提供的各种标签方法实现动态拼接Sql。这里演示where标签和if标签实现使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录。

    1.需求: 使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录. 2.在UserMapper接口中定义方法: public List<User> findU ...

  9. Halcon阈值化算子dual_threshold和var_threshold的理解

    Halcon中阈值二值化的算子众多,通常用得最多的有threshold.binary_threshold.dyn_threshold等. threshold是最简单的阈值分割算子,理解最为简单:bin ...

  10. strops()

    <?php echo strpos("You love php, I love php too!","php"); ?>