调用第三方网站报价接口，Ajax实时刷新，动态显示价格涨跌变化，显示涨跌数值及百分比，
效果如下，可依据自己需求设计相应CSS效果
HTML显示报价代码：
<div><p class="float-left" id="hq_f_gold_n">伦敦金 <span>XAU/USD</span></p><p class="float-right" id="hq_f_gold_p"></p></div><div id="hq_f_gold_ch"><span></span></div></div></a><a href="#"><div class="forex"><div><p class="float-left" id="hq_f_SILVER_n">伦敦银 <span>XAG/USD</span></p><p class="float-right" id="hq_f_SILVER_p"></p></div><div id="hq_f_SILVER_ch"><span></span></div></div></a><a href="#"><div class="forex"><div><p class="float-left" id="hq_f_USDX_n">美元指数 <span>DXY</span></p><p class="float-right" id="hq_f_USDX_p"></p></div><div id="hq_f_USDX_ch"><span></span></div></div></a></div>
javascript获取报价代码：
var wsUri ="wss://:30000/ws"; var bjsocket;bjsocket= new WebSocket(wsUri); bjsocket.onopen = function(evt) { bjsocket.send('{"CONNECTED":"1"}');};bjsocket.onmessage = function(evt) { bjonMessage(evt.data);};function bjonMessage(data) { var d=$.parseJSON(data);switch (d.c) {case 'GOLD':$('#hq_f_gold_n').html('伦敦金 <span>XAU/USD</span>');$('#hq_f_gold_p').html(d.p.toFixed(2));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_gold_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_gold_ch').addClass(upclass).removeClass(dowclass);break;case 'SILVER':$('#hq_f_SILVER_n').html('伦敦银 <span>XAG/USD</span>');$('#hq_f_SILVER_p').html(d.p.toFixed(3));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_SILVER_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_SILVER_ch').addClass(upclass).removeClass(dowclass);break;case 'USDX':$('#hq_f_USDX_n').html('美元指数 <span>DXY</span>');$('#hq_f_USDX_p').html(d.p.toFixed(2));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_USDX_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_USDX_ch').addClass(upclass).removeClass(dowclass);break;case 'USDWTI':$('#hq_f_USDWTI_n').html('美国原油 <span>USOIL</span>');$('#hq_f_USDWTI_p').html(d.p.toFixed(2));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_USDWTI_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_USDWTI_ch').addClass(upclass).removeClass(dowclass);break;case 'EURUSD':$('#hq_f_EURUSD_n').html('欧元美元 <span>EUR/USD</span>');$('#hq_f_EURUSD_p').html(d.p.toFixed(5));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_EURUSD_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_EURUSD_ch').addClass(upclass).removeClass(dowclass);break;case 'HSI':$('#hq_f_HSI').html('恒生指数 <span>HSI</span>');$('#hq_f_HSI_p').html(d.p.toFixed(5));var ssjtorxjjt=d.ch>0?'<img width="20px" src="/js/up.svg"/>':'<img width="20px" src="/js/down.svg"/>';var upclass=d.ch>0?'up':'down';var dowclass=d.ch>0?'down':'up';$('#hq_f_HSI_ch').html('<span></span>'+ssjtorxjjt+d.chp+'%<small>'+d.ch+'<small>');$('#hq_f_HSI_ch').addClass(upclass).removeClass(dowclass);break;}}
需要引入jquery
<script type="text/javascript" src="/ajax/jquery/jquery-3.5.1.min.js"></script>
引用的jrjr网站的报价接口，可能是由于对方网站自身问题，所以外汇及恒指其它品种无法正常获取，看它自己网站也是不显示，所以只有黄金、白银以及美元指数能正常获取到。
本文来自“美元俱乐部”
