如何使用JQ更好的实现价格倒计（降价）效果？

<!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;
        //金额转成分
        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>

Xeira

4.1k3717

发布于
2018-01-25

建议用css来做滚动效果，js通过设置每一位滚动动画的时间来控制速率