小效果：商品抢购（多个）

最新推荐文章于 2021-08-23 18:03:45 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2021-08-23 18:03:45 发布

阅读量854

点赞数

分类专栏： JavaScript积跬步至千里平时小例子文章标签：抢购-倒计时 javascript

本文链接：https://blog.csdn.net/wstpa/article/details/45581937

版权

JavaScript积跬步至千里同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

平时小例子

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0}
    ul {list-style: none;}
    img {border: none;display: block;outline: none;}
    a {text-decoration: none;outline: none;blr:express(this.onFocus=this.blur());}
    #box {margin: 20px 30px}
    #list li {width: 187px;height: 480px;float: left;margin-right: 20px;background: url(img/none.gif) 0 90px no-repeat;}
    #list li #time {width: 187px;height: 30px;text-align: center;line-height: 30px;font-size: 12px;}
    #list li a {display: block;width: 187px;height: 340px;position: relative;left: 0;top: 0}
    #list li #inf {width: 187px;height: 50px;}
    #inf span {color: red;font-size: 24px;margin-right: 10px}
    #list li #btn {width: 187px;height: 30px;border: none;font-size: 18px;cursor: pointer; }
    #btn1 {width: 80px;height: 30px;border: none;}
    #setTime {width: 185px;height: 28px;}
    </style>
    <script type="text/javascript" src="startMove.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var aList=document.getElementById('list');
        var aLi=aList.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            fn(aLi[i]);
        };
        function fn(obj){
            var aInp=obj.getElementsByTagName('input');
            var p=obj.getElementsByTagName('p')[0];
            var img=obj.getElementsByTagName('a')[0];  
            var oTimer=null;
            var onoff=true;
            aInp[1].onclick=function(){

                clearInterval(oTimer)
                getTime();  //如果不先执行，这和刷新会出现空白时间一样，因为会有1秒的延迟
                if (onoff) {
                    oTimer=setInterval(getTime,1000);
                }else{
                    return;
                };

            }
            function getTime(){

                var val=aInp[0].value;
                var newDate=new Date(val)
                var nowDate=new Date();
                var t=Math.floor((newDate-nowDate)/1000); //秒
                var iDate=Math.floor(t/86400);
                var iH=Math.floor(t%86400/3600);
                var iM=Math.floor(t%86400%3600/60);
                var iS=Math.floor(t%60);


                if (t>=0) {
                    var str=toZero(iDate)+'天'+toZero(iH)+'小时'+toZero(iM)+'分钟'+toZero(iS)+'秒';
                    p.innerHTML='还剩'+str;
                }else{
                    clearInterval(oTimer);
                    p.innerHTML='不好意思，已售罄';
                    aInp[2].disabled=true;

                    shake(img,'left',function(){
                        startMove(img,{top:240,opacity:0},function(){
                            onoff=false;
                            //alert('关了');
                        })
                    })
                };
            }

            function shake(oImg,attr,endFn){
                //console.log(parseInt(getStyle(img,'left')))
                var iCur=parseInt(getStyle(oImg,attr));
                var len=18;
                var arr=[];
                var num=0;
                for (var i = 18; i >0; i-=2) {
                    arr.push(i,-i);
                };
                arr.push(0);
                oImg.shakeTime=setInterval(function(){
                    oImg.style[attr]=iCur+arr[num]+'px';
                    num++;
                    if (num==arr.length) {
                        clearInterval(oImg.shakeTime);

                        oImg.style[attr]=iCur+'px';  //暂停之时等于原来的值。必须有
                        endFn && endFn();

                    };
                },30)

            }
        }

    }

    function toZero(num){
        if ( num < 10 ) {
            return '0'+num;  //str类型
        }else{
            return ''+num; //为了保持一致，str
        };
    }
    </script>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li>
                <input type="text" id="setTime" value="May 8,2015 12:12:12" />
                <input type="button" id="btn1" value="确定">
                <p id="time">还剩8小时：00分钟</p>
                <a href="javascript:;"><img src="img/aa.gif" /></a>
                <p id="inf"><span>￥59.9</span>时尚格子衬衫</p>
                <input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
            </li>
            <li>
                <input type="text" id="setTime" value="May 8,2015 12:12:12" />
                <input type="button" id="btn1" value="确定">
                <p id="time">还剩8小时：00分钟</p>
                <a href="javascript:;"><img src="img/aa.gif" /></a>
                <p id="inf"><span>￥59.9</span>时尚格子衬衫</p>
                <input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
            </li>
            <li>
                <input type="text" id="setTime" value="May 8,2015 12:12:12" />
                <input type="button" id="btn1" value="确定">
                <p id="time">还剩8小时：00分钟</p>
                <a href="javascript:;"><img src="img/aa.gif" /></a>
                <p id="inf"><span>￥59.9</span>时尚格子衬衫</p>
                <input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
            </li>
        </ul>
    </div>
</body>
</html>

function startMove(obj,json,endFn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bBtn=true;
        for(var attr in json){

            var iCur=0;
            if (attr=='opacity') {
                iCur=Math.round(parseFloat(getStyle(obj,attr))*100)
            }else{
                iCur=parseInt(getStyle(obj,attr));
            };
            var iSpeed=(json[attr]-iCur)/6;
            iSpeed=iSpeed>0? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if (iCur != json[attr]) bBtn=false;

            if (attr=='opacity') {
                obj.style.opacity=(iCur+iSpeed)/100;
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
            }else{
                obj.style[attr]=iCur+iSpeed+'px';
            };

        }
            if (bBtn) {
                clearInterval(obj.timer);
                //alert(111)
                endFn && endFn();
            };

    },30)


}
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小效果：商品抢购（多个）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} ul {list-style: none;} img {border: none;
复制链接

扫一扫

专栏目录