倒计时
需要先引入相关的CSS和JS文件:
<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>
<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/aui.getdate.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
示例代码
<style>
body{background: #FFF;}
.content{width: 100%; padding: 15px; box-sizing: border-box; text-align: center;}
.countdown-warp{width: auto; text-align: center; font-size: 14px; padding: 30px 0; display: inline-block; margin: 0 auto;}
.countdown-warp span{min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; color: #FFF; border-radius: 3px; padding: 0px 5px; box-sizing: border-box; display: inline-block; background: var(--aui-bg);}
</style>
<div class="container" id="app">
<header class="aui-header">
<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
<div class="aui-header-title">倒计时</div>
</header>
<div class="content" style="padding: 15px 15px 0 15px;">
<div class="countdown-warp">
距<span id="endtime"></span>还有: </br></br>
<span class="day"><span id="day">0</span>天</span>
<span class="hour"><span id="hour">0</span>小时</span>
<span class="minute"><span id="minute">0</span>分</span>
<span class="second"><span id="second">0</span>秒</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function (){
var data = {
endtime: '2099-12-31 23:59:59',
day: '00',
hour: '00',
minute: '00',
second: '00'
};
$('#endtime').html(data.endtime)
var nowtimestamp = new Date().getTime();
var endtimestamp = new Date(data.endtime).getTime();
aui.countdown(nowtimestamp, endtimestamp, function(ret){
$('#day).html(ret.day);
$('#hour).html(ret.hour);
$('#minute).html(ret.minute);
$('#second).html(ret.second);
});
})
</script>