商品到计时-时间demo效果示例(整理)

简介: 商品到计时-时间demo效果示例(整理)
<!DOCTYPE html>
<html>
    <head>
        <title>jquery数字倒计时代码</title>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <style type="text/css">
            .time-item strong {
                background: #C71C60;
                color: #fff;
                line-height: 49px;
                font-size: 36px;
                font-family: Arial;
                padding: 0 10px;
                margin-right: 10px;
                border-radius: 5px;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            }
            #day_show {
                float: left;
                line-height: 49px;
                color: #c71c60;
                font-size: 32px;
                margin: 0 10px;
                font-family: Arial, Helvetica, sans-serif;
            }
            .item-title .unit {
                background: none;
                line-height: 49px;
                font-size: 24px;
                padding: 0 10px;
                float: left;
            }
        </style>
        <script type="text/javascript">
            var intDiff = parseInt(98000); //倒计时总秒数量
            function timer(intDiff) {
                window.setInterval(function() {
                    var day = 0,
                        hour = 0,
                        minute = 0,
                        second = 0; //时间默认值
                    if (intDiff > 0) {
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
                    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    $('#day_show').html(day + "天");
                    $('#hour_show').html('<s id="h"></s>' + hour + '时');
                    $('#minute_show').html('<s></s>' + minute + '分');
                    $('#second_show').html('<s></s>' + second + '秒');
                    intDiff--;
                }, 1000);
            }
            $(function() {
                timer(intDiff);
            });
        </script>
    </head>
    <body>
        <div align="center" style="width:416px; margin:0 auto">
            <div class="time-item">
                <span id="day_show">0天</span>
                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>
            </div>
        </div>
        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
        </div>
    </body>
</html>

相关文章
|
5月前
【qt】一次性讲清楚日期和时间2
【qt】一次性讲清楚日期和时间
31 0
|
5月前
【qt】一次性讲清楚日期和时间1
【qt】一次性讲清楚日期和时间
54 0
|
11月前
在案例demo 里超过100条数据代码怎么写
在案例demo 里超过100条数据代码怎么写
40 1
提交订单中...==“...“动态demo效果示例(整理)
提交订单中...==“...“动态demo效果示例(整理)
|
JavaScript
js根据一个时间计算N年后的时间-计算时间demo示例
js根据一个时间计算N年后的时间-计算时间demo示例
|
JavaScript
JS在网页上显示当前日期和时间demo效果示例(整理)
JS在网页上显示当前日期和时间demo效果示例(整理)
|
JavaScript
uniapp 按时间排序当前以后七天时间
uniapp 按时间排序当前以后七天时间
188 1
uniapp写一个随时间变化的预约日期列表
const today = new Date(); const dateArray = []; const dayOfWeekArray = []; const yearMonthDayArray = [];
82 0
|
应用服务中间件
【JavaWeb】案例一:记录用户的上次访问时间
本期主要介绍案例一:记录用户的上次访问时间
160 0
【JavaWeb】案例一:记录用户的上次访问时间