文档章节

倒计时

Nixus
 Nixus
发布于 2016/11/07 11:49
字数 356
阅读 79
收藏 0

这个是给天猫店铺用的,求砖,求批,求指点!谢谢! 天猫店铺用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒计时</title>
</head>
<body>
    <!-- 从此行下一行开始复制 -->
    <style>
    body {margin: 0}
    .countdown-parent {background: #ffed04}
    .countdown {display: flex; flex-direction: row; justify-content: center; align-items: center}
    .countdown span {background: #f9113c; margin: 10px; border-radius: 10px; box-shadow: 5px 5px 5px rgb(117, 24, 38) inset; display: inline-flex; height: 64px; width: 45px; color:#fff; justify-content: center; align-items: center; flex-direction: column}
    .countdown strong {font-size: 50px; color: #f9113c}
    .countdown span h1,.countdown span h5 {margin: 0}
    .countdown span h5 {color: #000}
    </style>
    <div class="countdown-parent">
        <div class="countdown">
            <span><h1 id="day"></h1><h5>DAYS</h5></span>
            <strong>:</strong>
            <span><h1 id="hour"></h1><h5>HRS</h5></span>
            <strong>:</strong>
            <span><h1 id="min"></h1><h5>MINS</h5></span>
            <strong>:</strong>
            <span><h1 id="sec"></h1><h5>SECS</h5></span>
        </div>
    </div>
    <script type="text/javascript">
    function countdown() {
        var dayObj = document.getElementById('day');
        var hourObj = document.getElementById('hour');
        var minObj = document.getElementById('min');
        var secObj = document.getElementById('sec');

        var target = new Date('2016-11-07 12:00:00');
        var now = new Date();

        if (target.getTime() - now.getTime() <= 0) {
            dayObj.parentNode.innerHTML = '<h1>正</h1>';
            hourObj.parentNode.innerHTML = '<h1>在</h1>';
            minObj.parentNode.innerHTML = '<h1>抢</h1>';
            secObj.parentNode.innerHTML = '<h1>购</h1>';
            return;
        }

        var sec = target.getSeconds() - now.getSeconds();
        var min = target.getMinutes() - now.getMinutes();
        var hour = target.getHours() - now.getHours();
        var day = target.getDate() - now.getDate();

        min = sec < 0 ? min - 1 : min;
        sec = sec < 0 ? sec + 60 : sec;
        hour = min < 0 ? hour - 1 : hour;
        min = min < 0 ? min + 60 : min;
        day = hour < 0 ? day - 1 : day;
        hour = hour < 0 ? hour + 24 : hour;

        secObj.innerHTML = sec < 10 ? '0' + sec : sec;
        minObj.innerHTML = min < 10 ? '0' + min : min;
        hourObj.innerHTML = hour < 10 ? '0' + hour : hour;
        dayObj.innerHTML = day;

        setTimeout(function() {countdown()}, 1000);
    }
    countdown();
    </script>
    <!-- 复制到此行上一行结束 -->
</body>
</html>

© 著作权归作者所有

Nixus
粉丝 10
博文 20
码字总数 4985
作品 0
广州
程序员
私信 提问
加载中

评论(2)

Nixus
Nixus 博主

引用来自“554330833a”的评论

setTimeout会不会不准?

回复@554330833a : 会不准?为什么?
554330833a
554330833a
setTimeout会不会不准?

暂无文章

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
930
11
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
15
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部