炫酷的网站小工具-倒计时[代码分享]

[复制链接]
吠*** 发表于 2022-11-2 08:15:03 | 显示全部楼层 |阅读模式
吠*** 2022-11-2 08:15:03 302 2 显示全部楼层

注册账号-全站资源免费下载

您需要 登录 才可以下载或查看,没有账号?注册账号

x

image.png
[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() 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>





上一篇:防封端口后台源码+搭建教程
下一篇:抖音同款木鱼功德增加网站源码
这个家伙很赖,还没有设置签名
ys*** 发表于 2022-11-2 10:33:04 | 显示全部楼层
ys*** 2022-11-2 10:33:04 显示全部楼层
22
这个家伙很赖,还没有设置签名
回复

使用道具 举报

万恶***官方认证 老用户认证 发表于 2022-11-15 11:21:57 | 显示全部楼层
万恶*** 2022-11-15 11:21:57 显示全部楼层
第一次评论啊,好紧张啊,该怎么说啊,打多少字才显的有文采啊,这样说好不好啊,会不会成热贴啊,我写的这么好会不会太招遥,写的这么深奥别人会不会看不懂啊,怎样才能写出我博士后的水平呢,半年写了这么多会不会太快啊,好激动啊。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则 返回列表 发新帖

快速回复 返回顶部 返回列表