我有这个代码,它显示比特币价格和基数以及其他东西,但我想让它在数据到达之前(我将间隔设置为3秒(显示"正在等待数据到达"在它到达之后,它说";数据已到达"(附言:我正在使用Axios库(这是我的HTML和JSHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Test</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1 id="num"></h1>
<h1 id="num1"></h1>
<h1 id="num2"></h1>
<h1 id="num3"></h1>
<h1 id="num4"></h1>
<h1 id="num5"></h1>
<script src="zoom.js"></script>
</body>
</html>
和JS
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const num3 = document.getElementById("num3");
const num4 = document.getElementById("num4");
const num5 = document.getElementById("num5");
const num = document.getElementById("num");
if(num1,num2,num3,num4,num5.innerText.length > 0) {
num.innerText = `Data Arrived!`
} else {
num.innerText = `Waiting for Data to Arrive...`
}
setInterval(() => {
const bitcoin = axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
.then(res => {
num1.innerText = `${"Current Base"}, ${res.data.ticker.base}`
num2.innerText = `${"Current Currency"}, ${res.data.ticker.target}`
num3.innerText = `${"Current Bitcoin Price"}, ${res.data.ticker.price}`
num4.innerText = `${"Current Volume"}, ${res.data.ticker.volume}`
num5.innerText = `${"Current Change"}, ${res.data.ticker.change}`
})
.catch(err => {
num1.innerHTML = `<strong>ERROR: Nothing found!<strong>`
num2.style.opacity = 0;
num3.style.opacity = 0;
num4.style.opacity = 0;
num5.style.opacity = 0;
})
}, 5000);
这就是我尝试的方法,或者我的If and Else语句的语法有问题吗?
if(num1,num2,num3,num4,num5.innerText.length > 0) {
num.innerText = `Data Arrived!`
} else {
num.innerText = `Waiting for Data to Arrive...`
}
您有两个主要问题。
逗号运算符不会按你想的那样做
逗号运算符返回它右边的任何内容。if (a,b)
与if (b)
的含义相同。
如果要对num1.innerText.length > 0
和num2
进行相同的测试,以此类推,则必须测试它们的所有长度,并使用&&
运算符而不是,
运算符。
尽管你可以做一个快捷方式,写一个函数来测试数组中的每一件事,然后测试它们是否都正常
if (![num1, num2, num3, num4, num5].some(
element => element.innerText.length === 0
)) {
if
语句不具有追溯效力
你在程序开始时测试你的状况。
然后您开始运行间隔
稍后间隔会更改值,因此if
语句将通过
…但是您不会再次运行if
语句。
您对元素所做的更改不会回到执行if
测试时。
您需要在更改元素后进行该测试。
然而这毫无意义。您可以同时设置所有值,并且您知道何时设置这些值。
您可以将Waiting for Data to Arrive…
硬编码到HTML中,然后在替换其他元素的innerText
的同时用Data Arrived
替换它。