倒计时插件

倒计时插件

作用

是一个简单的倒计时插件。

 

用法

引用    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/js/jquery.min.js"></script>

<script src="~/js/jquery.downCount.js"></script>

然后引入此插件，最后在js中写入截止日期，即可实现。

样式代码

<style type="text/css">

        body {

            background: #363f48;

            color: white;

            font: normal 12px 'Open Sans', sans-serif;

            margin-top: 20px;

        }

 

        ul.countdown {

            list-style: none;

            margin: 75px 0;

            padding: 0;

            display: block;

            text-align: center;

        }

 

            ul.countdown li {

                display: inline-block;

            }

 

                ul.countdown li span {

                    font-size: 80px;

                    font-weight: 300;

                    line-height: 80px;

                }

 

                ul.countdown li.seperator {

                    font-size: 80px;

                    line-height: 70px;

                    vertical-align: top;

                }

 

                ul.countdown li p {

                    color: #a7abb1;

                    font-size: 14px;

                }

 

            ul.countdown a {

                color: #76949F;

                text-decoration: none;

            }

 

                ul.countdown a:hover {

                    text-decoration: underline;

                }

 

            ul.countdown .source {

                width: 405px;

                margin: 0 auto;

                background: #4f5861;

                color: #a7abb1;

                font-weight: bold;

                display: block;

                white-space: pre;

                border-radius: 3px;

            }

 

            ul.countdown .btn {

                background: #f56c4c;

                margin: 40px auto;

                padding: 12px;

                display: block;

                width: 100px;

                color: white;

                text-align: center;

                text-transform: uppercase;

                font-weight: bold;

                text-decoration: none;

                border-radius: 2px;

            }

 

                ul.countdown .btn:hover {

                    text-decoration: none;

                    opacity: .7;

                }

</style>

Body

<h1 align="center" style="margin-top:150px;">简单易用的倒计时插件——jQuery.downCount.js</h1>

        <ul class="countdown">

            <li>

                <span class="days">00</span>

                <p class="days_ref">days</p>

            </li>

            <li class="seperator">.</li>

            <li>

                <span class="hours">00</span>

                <p class="hours_ref">hours</p>

            </li>

            <li class="seperator">:</li>

            <li>

                <span class="minutes">00</span>

                <p class="minutes_ref">minutes</p>

            </li>

            <li class="seperator">:</li>

            <li>

                <span class="seconds">00</span>

                <p class="seconds_ref">seconds</p>

            </li>

        </ul>

脚本

 <script class="source">

            $('.countdown').downCount({

                date: '12/27/2025 00:00:00',

                offset: +10

            }, function () {

                alert('倒计时结束!');

            });

        </script>