Question

我想每1秒更新一次getPrice（$ url）函数，无需手动操作页面刷新

<?php 
ini_set('display_errors', '1');

此函数getPrice（$ url）仅在我手动刷新页面时才会刷新。

function getPrice($url)
{
    $decode = file_get_contents($url);
    return json_decode($decode, true);
}

$btcUSD = getPrice('https://btc-e.com/api/2/btc_usd/ticker');
$btcPrice = $btcUSD ["ticker"]["last"];

$btcDisplay = round($btcPrice, 2);
?>

HTML代码从这里开始。

<html>
<title>Coin-Co. | Welcome!</title>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
<style>
h1
{
    font-family: "Calibri", Arial, sans-serif;
    font-size: 80px;
}

这是函数getPrice（$ url）
的div

#container
{
    font-family: "Calibri", Arial, sans-serif;
    font-size: 60px;
    border: 3.8px solid #666666;
    border-radius: 5px;
    height: 75px;
    width: 425px;
}

#containerConvert
{
    font-family: "Calibri", Arial, sans-serif;
    font-size: 38px;
    border: 2.9px solid #666666;
    border-radius: 5px;
    height: 63px;
    width: 497px;
}
#bi , #ci
{
    font-family: "Calibri", Arial, sans-serif;
    font-size: 21px;
    border: 2.9px solid #999999;
    border-radius: 1.75px;
    height: 48.7px;
    width: 148px;
}
</style>
</head>
<body>

<script>
var chart;
function requestData() {
    $.ajax({
        url: 'live_btce.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'containerChart',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live feed BTCe 5second-Chart'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'USD',
                margin: 80
            }
        },
        series: [{
            name: 'BTC->USD',
            data: []
        }]
    });        
});

</script>
<center>
<h1><em>BTC|USD</em></h1>

<div id="container"><?php echo $btcDisplay; ?></div></br>

<script>
    function btcConvert(input)
    {if (isNaN(input.value))
         {
           input.value = 0; 
         }
        var price = "<?php echo $btcDisplay; ?>";
        var output = input.value * price;
        var co = document.getElementById('ci');
        ci.value = output.toFixed(2);
    }
        function usdConvert(input)
        {if (isNaN(input.value))
    {
        input.value = 0;
    }
          var price2 = "<?php echo $btcDisplay; ?>";
          var output2 = input.value / price2;
      var co2 = document.getElementById('bi');
      bi.value = output2.toFixed(8);
        }
</script>
<div id="containerConvert">
<input type="text" name="bi" id="bi" onchange="btcConvert(this);" onkeyup="btcConvert(this);" /> BTC =
<input type="text" name="ci" id="ci"  onchange="usdConvert(this);" onkeyup="usdConvert(this);" /> USD 
</div>
<div id="containerChart" style="width:100%; height:400px;"></div>
</body>
</html>

Answer 1

在你的PHP代码结束时你缺少

echo $btcDisplay;

在javascript中添加点之前将其解析为float

// add the point
point = parseFloat(point);
chart.series[0].addPoint(point, true, shift);

更新从另一个站点提取数据的div标签，我希望该div能够自动刷新而无需重新加载页面

1 个答案: