如何使用JQ更好的實(shí)現(xiàn)價(jià)格倒計(jì)（降價(jià)）效果？

常見(jiàn)的時(shí)間倒計(jì)時(shí)在毫秒位置是快速滾動(dòng)的視覺(jué)效果，我想將這種形式應(yīng)用到價(jià)格倒計(jì)（降價(jià)）效果上，但是由于應(yīng)用場(chǎng)景中還有一個(gè)降價(jià)速率的問(wèn)題，我一直沒(méi)法很好的實(shí)現(xiàn)“毫秒位置是快速滾動(dòng)的視覺(jué)效果”

比如開(kāi)始價(jià)格是￥257.89，降價(jià)速率為0.1元/秒，那么價(jià)格就是每秒鐘降價(jià)0.1元，那么小數(shù)點(diǎn)第二位（9的位置）就要實(shí)現(xiàn)“毫秒位置快速滾動(dòng)的視覺(jué)效果”

但是假如降價(jià)速率為1元/秒，那么小數(shù)點(diǎn)后的數(shù)字（89的位置）都要實(shí)現(xiàn)“毫秒位置快速滾動(dòng)的視覺(jué)效果”

我現(xiàn)在能做到按速率降價(jià)，但是這個(gè)“快速滾動(dòng)的視覺(jué)效果”沒(méi)法很好的實(shí)現(xiàn)

請(qǐng)前輩指點(diǎn)，非常感謝

回答

編輯回答

舊時(shí)光

jquery.jcountdown.js 倒計(jì)時(shí)插件嗎

2017年5月5日 14:13

編輯回答

裸橙

window.requestAnimationFrame是目前在JS這邊能取到的顆粒度最細(xì)的時(shí)間回調(diào)，理論設(shè)計(jì)以每秒60幀的速度回調(diào)，實(shí)際上這個(gè)調(diào)用頻率不是總能被保證~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .countdown{
            position: absolute;
            left:10px;
            top:10px;
            width: 100px;
            height: 50px;
        }
        .price{
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="countdown"><span class="price" data-price="123.59">123.59</span></div>
<script>

    /**
     * downRate 分/每毫秒下降金額
     * */
    function downPrice(downRate){
        var start = null;
        //金額轉(zhuǎn)成分
        var originPrice=parseFloat(document.querySelector(".countdown .price").getAttribute("data-price"))*100;
        window.requestAnimationFrame(function downpriceFun(timestamp){
            var progress;
            var currentPrice;
            if(!start){
                start=timestamp;
            }
            progress = timestamp - start;
            currentPrice=Math.max(originPrice-progress*downRate,0);
            if(currentPrice){
                document.querySelector(".countdown .price").innerText=(currentPrice/100).toFixed(2);
                window.requestAnimationFrame(downpriceFun);
            }else{
                console.log(progress);
                document.querySelector(".countdown .price").innerText="0";
            }
        });
    }
    //0.1元/秒 0.1*100/1000
    //1元/秒 1*100/1000
    downPrice(1*100/1000);
</script>
</body>
</html>

2017年6月10日 12:05

編輯回答