更新从另一个网站提取数据的 div 标签，我希望该 div 自动刷新，而无需重新加载页面
发布于2024-11-30 03:34 阅读(537) 评论(0) 点赞(9) 收藏(4)
我想每 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>
解决方案
在您的 php 代码末尾您缺少
echo $btcDisplay;
在 javascript 中添加点之前将其解析为浮点数
// add the point
point = parseFloat(point);
chart.series[0].addPoint(point, true, shift);
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.phpheidong.com/blog/article/556014/11f9cd8aebaddb9c3507/
来源：php黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力