JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<tbody>
    <tr>
        <td>最新</td>
        <td><i class="arrow"></i><span class="price home_t_p_new">0</span>
        </td>
        <td><span class="price home_buy_1">0</span>
        </td>
        <td><span class="price home_sell_1">0</span>
        </td>
        <td><span class="price home_t_amount">0</span>
        </td>
    </tr>
</tbody>

CSS

.arrow_up, .arrow_down {
    position: relative;
    width: .3em;
    height: .55em;
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}
.arrow_up:after, .arrow_down:after {
    left: -.36em;
    content:"";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-width: .5em;
    border-style: solid;
}
.arrow_up:after {
    top: -1em;
    border-color: transparent transparent #cc0909 transparent;
}
.arrow_down:after {
    bottom: -1em;
    border-color: #5bab0d transparent transparent transparent;
}
.arrow_down {
    background-color: #5bab0d;
    margin-top: -.9em;
    animation: fadeInDown 1s .2s ease both infinite;
    -webkit-animation: fadeInDown 1s .2s ease both infinite;
    -moz-animation: fadeInDown 1s .2s ease both infinite
}
.arrow_up {
    background-color: #cc0909;
    margin-top: .1em;
    animation: fadeInUp 1s .2s ease both infinite;
    -webkit-animation: fadeInUp 1s .2s ease both infinite;
    -moz-animation: fadeInUp 1s .2s ease both infinite
}
.tx-green {
    color: #099614
}
.tx-red {
    color: #F00
}
/*down*/
 @keyframes fadeInDown {
    0% {
        opacity:0;
        transform:translateY(-8px)
    }
    100% {
        opacity:1;
        transform:translateY(1px)
    }
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity:0;
        -webkit-transform:translateY(-8px)
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(1px)
    }
}
@-moz-keyframes fadeInDown {
    0% {
        opacity:0;
        -moz-transform:translateY(-8px)
    }
    100% {
        opacity:1;
        -moz-transform:translateY(1px)
    }
}
/*up*/
 @keyframes fadeInUp {
    0% {
        opacity:0;
        transform:translateY(8px)
    }
    100% {
        opacity:1;
        transform:translateY(-1px)
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity:0;
        -webkit-transform:translateY(8px)
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(-1px)
   ...

JavaScript

var huobi = {
    addPriceColor: function (id, price, lastPrice) {
        if (price > lastPrice) {
            $('.arrow').removeClass('arrow_down').addClass('arrow_up')

        } else if (price < lastPrice) {
            $('.arrow').removeClass('arrow_up').addClass('arrow_down')

        } else {
            $('.arrow').removeClass('arrow_up').removeClass('arrow_down')
        }
    }
}
/*BTC*/
var data_static_detail_btc = "https://market.huobi.com/market/huobi.php?a=detail_btc";


/*jsonp回调函数名的参数名*/
var data_detail_callback = "huobi_callback";
/*jsonp回调函数名称*/
var data_detail_jsonpcallback_btc = "view_detail_btc";
var _oldPrice;

function home_detail_btc() {
    $.ajax({
        type: 'get',
        dataType: 'json',
        async: false,
        url: 'https://market.huobi.com/market/huobi.php?a=detail_btc',
        dataType: "jsonp",
        jsonp: "jsoncallback",
        jsonpCallback: data_detail_jsonpcallback_btc,
        success: view_detail_btc,
        error: ajax_error_btc
    });
};

//数据处理
function ajax_error_btc() {};
console.log(_oldPrice)

function view_detail_btc(data) {

    var dataObj = data; //转换为json对象
    var lastPrice = dataObj.p_last; //昨日收盘价
    if (_oldPrice != '') {
        huobi.addPriceColor('.home_t_p_new', dataObj.p_new, _oldPrice);
    }
    _oldPrice = dataObj.p_new; //旧价格


    $('.home_t_p_new').html('¥' + dataObj.p_new);

    //涨幅
    $('.home_t_amount').html('฿' + dataObj.amount);
    if (dataObj.sells[0]) {
        //最佳买价
        $('.home_sell_1').html('¥' + dataObj.sells[0]['price']);
    }
    if (dataObj.buys[0]) {
        //最佳卖价
        $('.home_buy_1').html('¥' + dataObj.buys[0]['price']);
    }

}
home_detail_btc();

home_refresh = setInterval(function () {
    home_detail_btc();
}, 2000);