WordPress小工具炫酷倒计时

释放双眼,带上耳机,听听看~!

 

WordPress小工具炫酷倒计时

 

使用教程

把下面的代码放在站点后台 >>外观 >> 小工具 >> 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>
文章标题:WordPress小工具炫酷倒计时
文章链接:https://www.qwbk.net/2679.html
文章版权:轻微博客 (WWW.QWBK.NET) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新于 2022-10-5 15:01:11 已超过 242 天没有更新,若有图片或者下载链接已失效,请在下方 留言 或联系 折腾猫。

给TA打赏
共{{data.count}}人
人已打赏
Wordpress

Wordpress随机文章跳转

2022-9-7 13:36:09

Wordpress

追格小站点评WordPress网址导航主题

2023-5-24 12:56:06

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员剑去了无痕,E-mail:tosscat@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索

查看访客信息