维哲信息网-WordPress炫酷的网站小工具-倒计时-维哲BOKS-信息化-OA-协同办公-财务ERP-WMS- CRM-OMS-流程维哲BOKS

今天给大家分享一个简单又炫酷的网站小工具-倒计时代码，挺适合网站做一些限时推广、限时会员、限时售东西等等。话不多说，现在就分享代码！?

倒计时HTML+CSS+JS都放到一起了，如果觉得不妥，自己修改吧！?

使用教程

把下面的代码放在站点后台 >>外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。

代码

<html >
<head>
<style type=\"text/css\">
.se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:\"\";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class=\"se-kl\">
<div class=\"se-cn\">倒计时</div>
<div class=\"se-en\">COUNT DOWN</div>
<i class=\"se-io\"></i>
<div class=\"se-info\">距离结束还剩</div>
<div class=\"se-count\">
<div class=\"se-day\"></div>
<div class=\"se-hour\"><span class=\"se-txt\">00</span></div>
<div class=\"se-min\"><span class=\"se-txt\">00</span></div>
<div class=\"se-sec\"><span class=\"se-txt\">00</span></div>
</div>
</div>
<script src=\"http://www.jq22.com/jquery/jquery-1.10.2.js\"></script>
<script type=\"text/javascript\">
        $(document).ready(function () {
            var oDate = new Date();
            var nowTime = oDate.getTime(); //现在的毫秒数
            oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
            var targetDate = new Date(oDate.toLocaleDateString());
            run(targetDate);
        });

        function run(enddate) {
            getDate(enddate);
            setInterval(\"getDate(\'\" + enddate + \"\')\", 500);
        }

        function getDate(enddate) {
            var oDate = new Date(); //获取日期对象

            var nowTime = oDate.getTime(); //现在的毫秒数
            var enddate = new Date(enddate);
            var targetTime = enddate.getTime(); // 截止时间的毫秒数
            var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

            var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
            second = second % 86400; //余数代表剩下的秒数；
            var hour = Math.floor(second / 3600); //整数部分代表小时；
            second %= 3600; //余数代表 剩下的秒数；
            var minute = Math.floor(second / 60);
            second %= 60;
            var spanH = $(\'.se-txt\')[0];
            var spanM = $(\'.se-txt\')[1];
            var spanS = $(\'.se-txt\')[2];

            spanH.innerHTML = tow(hour);
            spanM.innerHTML = tow(minute);
            spanS.innerHTML = tow(second);
        }

        function tow(n) {
            return n >= 0 && n < 10 ? \'0\' + n : \'\' + n;
        }
    </script>
</body>
</html>

效果：

.se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:\”\”;display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}

倒计时

COUNT DOWN

距离结束还剩

$(document).ready(function () {
var oDate = new Date();
var nowTime = oDate.getTime(); //现在的毫秒数
oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
var targetDate = new Date(oDate.toLocaleDateString());
run(targetDate);
});

function run(enddate) {
getDate(enddate);
setInterval(\”getDate(\’\” + enddate + \”\’)\”, 500);
}

function getDate(enddate) {
var oDate = new Date(); //获取日期对象

var nowTime = oDate.getTime(); //现在的毫秒数
var enddate = new Date(enddate);
var targetTime = enddate.getTime(); // 截止时间的毫秒数
var second = Math.floor((targetTime – nowTime) / 1000); //截止时间距离现在的秒数

var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒；
second = second % 86400; //余数代表剩下的秒数；
var hour = Math.floor(second / 3600); //整数部分代表小时；
second %= 3600; //余数代表剩下的秒数；
var minute = Math.floor(second / 60);
second %= 60;
var spanH = $(\’.se-txt\’)[0];
var spanM = $(\’.se-txt\’)[1];
var spanS = $(\’.se-txt\’)[2];

spanH.innerHTML = tow(hour);
spanM.innerHTML = tow(minute);
spanS.innerHTML = tow(second);
}

function tow(n) {
return n >= 0 && n < 10 ? \'0\' + n : \'\' + n;
}

版权的维哲博客