倒计时功能，当前时间距离明天0点的倒计时

最新推荐文章于 2021-11-02 15:53:40 发布

diaoyuzhi7228

最新推荐文章于 2021-11-02 15:53:40 发布

阅读量3k

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/haixiahuang/p/8277220.html

版权

先上效果图

上代码截图

如有参考见代码: *注意页面样式是用rem写的，有段js是控制rem的

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="format-detection" content="telephone=no">
<title>开通成功</title>
<link rel="stylesheet" href="openedSuccessfully.css">
</head>
<body>
<div id="contentbox">
<div class="countdown">
<div class="obtain">
<div class="obtainPic"></div>
<p>恭喜您，开通成功！</p>
</div>
<div class="kimsSecurities">明天0点生效，时间还剩：</div>
<div class="kimsSecuritiesTime">
<span>0</span>
<span>0</span>
<span>时</span>
<span>0</span>
<span>0</span>
<span>分</span>
<span>0</span>
<span>0</span>
<span>秒</span>
</div>
<div class="publishLots">发布拍品</div>
<div class="tips">赶紧去发布拍品，明天即可开始推广！</div>
</div>
<div class="conditions">
<div class="promoteConditions">拍品的推广条件</div>
<div class="condition">
<div>1.当天截拍且无人出价的拍品</div>
<div>2.加价幅度在10~50元</div>
<div>3.起拍价在0元</div>
</div>
</div>
</div>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<script>
var nowDate = new Date();
var newDate=new Date(nowDate.getFullYear(),nowDate.getMonth(), nowDate.getDate() + 1)
var t = Math.floor((newDate - nowDate)/1000);
var jdTimeInfo = document.querySelector('.kimsSecuritiesTime');
var jdTimeInfoSpan = jdTimeInfo.querySelectorAll('span');
var secKillTimer = null;
secKillTimer = setInterval(function(){
t--;
if(t < 0){
clearInterval(secKillTimer);
return false;
}
var h = Math.floor(t%86400/3600);
var m = Math.floor(t%3600/60);
var s = Math.floor(t%60);
var str = toTwo(h) + '时' + toTwo(m) + '分' + toTwo(s)+ '秒';
for(var i = 0; i < jdTimeInfoSpan.length; i++){
jdTimeInfoSpan[i].innerHTML = str.charAt(i);
}
}, 1000);
function toTwo (n){
return n = n > 9 ? '' + n : '0' + n;
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/haixiahuang/p/8277220.html

diaoyuzhi7228

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时功能，当前时间距离明天0点的倒计时

先上效果图上代码截图如有参考见代码: *注意页面样式是用rem写的，有段js是控制rem的<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"...
复制链接

扫一扫