我們以產品分類列表爲例
js部分
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="<?php echo $this->getUrl('')?>js/lefttime/leftTime.min.js"></script>
css部分
<style type="text/css">
table.data-table{width:100%;}
table.data-table tr:odd{background:#dcebff;}
table.data-table td{line-height:24px;padding:3px;vertical-align: top;}
table.data-table th{height:50px;line-height:50px;padding: 3px;font-size:20px;text-align: left;}
table.data-table .colspan-a{width:35%;}
table.data-table .colspan-b{width:25%;}
table.data-table .colspan-c{width:40%;}
table.data-table td pre{display: block; padding:5px; border: 1px solid #00caff;background: #f8fcff;text-align: left;}
.testBtn-a{display: inline-block;height:30px;line-height:30px;padding:0 10px; border:0; border-radius:5px;color:#fff;background:rgb(65,133,244);cursor: pointer;}
.testBtn-a.on{background:#c9c9c9;color:#666;cursor: default;}
.data-show-box{line-height:30px;}
.date-tiem-span,.date-s-span{display: inline-block;font-size:18px; width:58px; height:40px;line-height:40px; text-align: center; color:#fff; border-radius:5px;}
.date-tiem-span{ background:#333;}
.date-s-span{ background:#f00;}
.date-select-a{margin-right:5px;}
</style>
html部分
<table cellpadding="0" cellspacing="0" class="data-table">
<!--
<tr>
<th colspan="3">2019/01/22 23:45:24</th>
</tr>
-->
<tr>
<td class="colspan-a">
<div class="data-show-box" id="dateShow1">
<span class="date-tiem-span d">00</span>D
<span class="date-tiem-span h">00</span>H
<span class="date-tiem-span m">00</span>M
<span class="date-s-span s">00</span>S
</div>
</td>
</tr>
<script type="text/javascript">
$(function(){
//日期倒計時
$.leftTime("2019/01/16 23:45:24",function(d){
if(d.status){
var $dateShow1=$("#dateShow1");
$dateShow1.find(".d").html(d.d);
$dateShow1.find(".h").html(d.h);
$dateShow1.find(".m").html(d.m);
$dateShow1.find(".s").html(d.s);
}
});
});
</script>
</table>
<?php endif; ?>
自行測試。。。