码迷,mamicode.com
首页 > 其他好文 > 详细

限时抢购

时间:2014-12-26 06:07:21      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时抢购商品</title>
<style>
    html, body, ul {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 10px;
    }
    h1 {
        font-size: 14px;
    }
    ul {
        font-size: 0;
    }
    li {
        list-style: none;
        background: url(img/down.png) 0 0 no-repeat;
        width: 162px;
        height: 279px;
        display: inline-block;
        border-top: 1px solid #A0A0A4;
        position: relative;
    }
    .box {
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 152px;
        height: 269px;
        padding: 5px;
        margin: 0 2px;
    }
    #showcase li:first-child .box {
        margin-left: 0;
    }
    .box img {
        width: 100px;
        height: 80px;
        margin: 20px;
    }
    .box input[type="text"] {
        width: 106px;
        height: 16px;
        background: #DED6E7;
        color: #522121;
        font-size: 12px;
        border: 1px solid #EFEFEF;
        padding: 2px;
    }
    .box input[type="button"] {
        color: #847373;
        background: #fff;
        border: none;
        width: 36px;
        font-size: 14px;
        font-weight: bold;
    }
    .box .timeoff {
        font-size: 14px;
        color: #A0A0A4;
        text-align: center;
    }
    .box p {
        font-size: 14px;
        margin-bottom: 0;
    }
    .box span {
        color: #BDADBD;
        font-weight: bold;
    }
    .box .price {
        color: #BD214A;
        font-weight: bold;
    }
    table {
        width: 648px;
        background: #DED6E7;
        text-align: center;
        font-size: 14px;
        color: #522121;
        font-weight: bold;
        margin-top: 30px;
        border-collapse: collapse;
    }
    td {
        padding: 10px 0;
        border-top: 4px solid #fff;
        border-bottom: 4px solid #fff;
    }
    td img {
        width: 80px;
        height: 51px;
        border: 1px solid #8C4A4A;
        margin-left: 120px;
    }
    tbody tr td:first-child {
        width: 180px;
        padding: 0 10px;
        color: #000;
        font-weight: normal;
    }
    tbody div {
        width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #total {
        font-weight: bold;
        font-size: 20px;
    }
    #total .all {
        color: #BD214A;
    }        
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
    var oul = document.getElementById(‘showcase‘);
    var odiv = oul.getElementsByTagName(‘div‘);
    var otable = document.getElementsByTagName(‘tbody‘)[0];
    var ototal = document.getElementById(‘total‘).getElementsByTagName(‘span‘)[0];
    
    for ( var i = 0; i < odiv.length; i++)
    {
        fntime(odiv[i]);
    }
    
    function fntime (box)
    {
        var obtn = box.getElementsByTagName(‘input‘)[1];
        
        obtn.onclick = function ()
        {
            var inew = new Date(box.getElementsByTagName(‘input‘)[0].value);
            var op = box.getElementsByTagName(‘p‘)[0];
            var op2 = box.getElementsByTagName(‘p‘)[1].innerHTML;
            var oimg = box.getElementsByTagName(‘img‘)[0];
            var price = box.getElementsByTagName(‘span‘)[2].innerHTML;
            clearInterval(box.timer);
            box.timer = setInterval(function ()
            {
                var inow = new Date();
                var t = Math.floor((inew - inow)/1000);
                if( t >= 0 )
                {
                    op.innerHTML = ‘剩余‘ + Math.floor(t/86400) + ‘天‘ +  Math.floor(t%86400/3600) + ‘时‘ + Math.floor(t%86400%3600/60) + ‘分‘ +  t%60 + ‘秒‘;
                }
                else
                {
                    shake(box,‘left‘,function()
                    {
                        domove(box,‘top‘,10,50,279);
                        opacity(box,10,0,50,function()
                        {
                            box.style.display = ‘none‘;
                            otable.innerHTML += ‘<tr><td>‘+ op2+‘</td><td>‘+price+‘</td><td><img src= "‘+oimg.src+‘"></td></tr>‘;
                            ototal.innerHTML = parseFloat(ototal.innerHTML)+parseFloat(price);
                            
                        })
                    })
                }
            },1000);
            
        };
        
    }
    
    
};
</script>        
</head>
<body>
    <h1>限购时间</h1>
    <ul id="showcase">
        <li>
            <div class="box">
                <input type="text" value="August 28, 2014 21:56:0">
                <input type="button" value="确定">
                <p class="timeoff">剩余00天00时00分00秒</p>
                <img src="img/5-1.jpg" />
                <p>疯狂599,美的爆款隐藏式面板下拉门微波炉</p>
                <p><span>抢购价:</span><span class="price">¥</span><span class="price">599.00</span></p>
            </div>
        </li>
        <li>
            <div class="box">
                <input type="text" value="August 28, 2014 21:56:0">
                <input type="button" value="确定">
                <p class="timeoff">剩余00天00时00分00秒</p>
                <img src="img/5-2.jpg" />
                <p>疯狂3299,美的爆款隐藏式面板下拉门微波炉</p>
                <p><span>抢购价:</span><span class="price">¥</span><span class="price">3299.00</span></p>
            </div>
        </li>
        <li>
            <div class="box">
                <input type="text" value="August 28, 2014 21:56:0">
                <input type="button" value="确定">
                <p class="timeoff">剩余00天00时00分00秒</p>
                <img src="img/5-3.jpg" />
                <p>疯狂1块钱,美的爆款隐藏式面板下拉门微波炉</p>
                <p><span>抢购价:</span><span class="price">¥</span><span class="price">1.00</span></p>
            </div>
        </li>
        <li>
            <div class="box">
                <input type="text" value="August 28, 2014 21:56:0">
                <input type="button" value="确定">
                <p class="timeoff">剩余00天00时00分00秒</p>
                <img src="img/5-4.jpg" />
                <p>疯狂168,美的爆款隐藏式面板下拉门微波炉</p>
                <p><span>抢购价:</span><span class="price">¥</span><span class="price">168.00</span></p>
            </div>
        </li>
    </ul>
    <table>
        <thead>
            <tr>
                <td width="200px">商品名称</td>
                <td width="150px">价钱</td>
                <td width="298px"></td>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <p id="total">
        总价:<span class="all">0</span>元
    </p>
</body>
</html>
function getstyle(obj,attr)
{
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}


function domove (obj,attr,step,frequency,target,endfn)
{
    step = parseInt(getstyle(obj,attr))<target?step:-step;
    clearInterval(obj.timer);
    obj.timer = setInterval( function ()
    {
        var speed = parseInt(getstyle(obj,attr)) + step;
        if(step>0&&speed>target||step<0&&speed<target)
        {
            speed = target;
        }
        obj.style[attr] = speed + ‘px‘;
        if( speed == target )
        {
            clearInterval(obj.timer);
            endfn&&endfn();
        }
    },frequency); 
};

function opacity(obj,step,target,frequency,endfn)
{
    var currentOpacity = getstyle(obj,‘opacity‘) * 100;
    step = currentOpacity < target?step:-step;
    clearInterval(obj.opacity)
    obj.opacity = setInterval (function ()
    {
        currentOpacity = getstyle(obj,‘opacity‘) *100;
        var nextOpacity = currentOpacity + step;
        if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
        {
            nextOpacity = target;
        }
    obj.style.opacity = nextOpacity/100;
    obj.style.filter = ‘alpha(opacity:)‘ + nextOpacity +‘)‘;
    if(nextOpacity == target )
    {
        clearInterval(obj.opacity);
        endfn&&endfn();
    }    
    },frequency);
    
    
};

function shake(obj,attr,endfn)
{
    if( obj.shaked ) { return;  }
    obj.shaked = true;
    
    var num = 0;
    var timer = null;
    var arr = [];
    var pos = parseInt(getstyle(obj,attr));
    
    for( var i = 20; i > 0; i-=2 )
    {
        arr.push(i,-i);
    }
    arr.push(0);
    
    clearInterval(obj.shake);
    obj.shake = setInterval(function ()
    {
        obj.style[attr] = pos + arr[num] +‘px‘;
        num++;
        if(num==arr.length)
        {
            clearInterval(obj.shake);
            endfn&&endfn();
            obj.shaked = false;
        }
    },50);
};

 

限时抢购

标签:

原文地址:http://www.cnblogs.com/mayufo/p/4185923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!