日期:2014-05-16  浏览次数:20328 次

js实现限时抢购

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>限时抢购啦!</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #content
        {
            width: 300px;
            margin: 0 auto;
            padding: 10px;
            background: #eee;
            border: 1px solid #999;
        }
        #content p span
        {
            color: red;
            font: bold 20px Arial;
        }
    </style>
</head>
<body>
    <div id="content">
        <h1>
            限时抢购啦!</h1>
        <p>
            还剩<span id="times"></span></p>
    </div>
</body>
    <script type="text/javascript">
        function _fresh() {
            var endtime = new Date("2012/11/05,12:20:12");
            var nowtime = new Date();
            var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
            if (leftsecond < 0) { leftsecond = 0; }
            __d = parseInt(leftsecond / 3600 / 24);
            __h = parseInt((leftsecond / 3600) % 24);
            __m = parseInt((leftsecond / 60) % 60);
            __s = parseInt(leftsecond % 60);
            document.getElementById("times").innerHTML = __d + "天 " + __h + "小时" + __m + "分" + __s + "秒";
            if (leftsecond <= 0) {
                document.getElementById("times").innerHTML = "抢购已结束";
                clearInterval(sh);
            }
        }
        _fresh()
        var sh;
        setInterval(_fresh, 1000);
    </script>
</html>

?运行效果: