如何在另一个页面中检索变量的值？

Question

I have a btc.html/js page where I calculate the btc rate of variation every minute then I add it all up.我有一个 btc.html/js 页面，我每分钟计算一次 btc 变化率，然后将其全部加起来。 I display all the data correctly on my btc.html page.我在 btc.html 页面上正确显示了所有数据。

My problem is that I want to display the total --> <td><span id="btcResult4Total"></span></td> in the index.html page but it doesn't work.我的问题是我想在 index.html 页面中显示总数 --> <td><span id="btcResult4Total"></span></td>但它不起作用。 :S :S

The output displays NaN output 显示NaN

I added <script src="btc.js"></script> in index.html page, but it doens't work.我在 index.html 页面中添加了<script src="btc.js"></script> ，但它不起作用。 :S :S

I copied the project via Stackblitz for information -> https://stackblitz.com/edit/web-platform-wtdkvy?file=btc.js我通过 Stackblitz 复制了该项目以获取信息 -> https://stackblitz.com/edit/web-platform-wtdkvy?file=btc.js

Thank you in advance for your help and your time.预先感谢您的帮助和时间。

btc.html比特币.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Crypto</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="container mt-3">
    <h2>BITCOIN : <span id="formateDate"></span></h2>
    <hr>
    <table class="table table-bordered">

      <thead class="table-success">
        <tr class="text-center">
          <th>1 minute</th>
          <th>2 minutes</th>
          <th>3 minutes</th>
          <th>4 minutes</th>
        </tr>
      </thead>

      <tbody>
        <tr class="text-center">
          <td><span id="btcValue1"></span></td>
          <td><span id="btcValue2"></span></td>
          <td><span id="btcValue3"></span></td>
          <td><span id="btcValue4"></span></td>
        </tr>
      </tbody>

      <thead class="table-success">
        <tr class="text-center">
          <th>1min-2min</th>
          <th>2min-3min</th>
          <th>3min-4min</th>
          <th>Total</th>
        </tr>
      </thead>

      <tbody>
        <tr class="text-center">
          <td><span id="btcResult1"></span></td>
          <td><span id="btcResult2"></span></td>
          <td><span id="btcResult3"></span></td>
          <td><span id="btcResult4Total"></span></td>
        </tr>
      </tbody>
    
    </table>

    <hr>

  </div>

  <script src="script.js"></script>
  <script src="btc.js"></script>

</body>
</html>

btc.js比特币.js

console.clear();

let wsBtc = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');

let btcStockPriceElement1 = document.getElementById('btcValue1');
let btcStockPriceElement2 = document.getElementById('btcValue2');
let btcStockPriceElement3 = document.getElementById('btcValue3');
let btcStockPriceElement4 = document.getElementById('btcValue4');

let btcLastPrice = null;
let btcStockObject = null;

wsBtc.onmessage = (event) => {
  btcStockObject = JSON.parse(event.data);
};
let btc1, btc2, btc3, btc4;
let btcVariation_1_2, btcVariation_2_3, btcVariation_3_4;
let btcVariationTotal_4;

let runTimers = setInterval(() => {
  let minutes = new Date().getMinutes();
  if (minutes === 29) {
    let val1 = parseFloat(btcStockObject.p).toFixed(1);
    let price = parseFloat(btcStockObject.p).toFixed(1);

    btcStockPriceElement1.innerText = price;
    btcStockPriceElement1.style.color =
      !btcLastPrice || btcLastPrice === price
        ? 'black'
        : price > btcLastPrice
        ? '#AAFF00'
        : 'red';

    btcLastPrice = price;
    btcStockObject = null;

    btc1 = val1;

    
  }

  if (minutes === 30) {
    let val2 = parseFloat(btcStockObject.p).toFixed(1);
    let price = parseFloat(btcStockObject.p).toFixed(1);

    btcStockPriceElement2.innerText = price;
    btcStockPriceElement2.style.color =
      !btcLastPrice || btcLastPrice === price
        ? 'black'
        : price > btcLastPrice
        ? '#AAFF00'
        : 'red';

    btcLastPrice = price;
    btcStockObject = null;

    btc2 = val2;

    btcVariation_1_2 = ( (parseFloat(btc2) - parseFloat(btc1)) / btc1 * 100);

    document.getElementById("btcResult1").innerHTML = btcVariation_1_2.toFixed(2);
    
  }

  if (minutes === 31) {
    let val3 = parseFloat(btcStockObject.p).toFixed(1);
    let price = parseFloat(btcStockObject.p).toFixed(1);

    btcStockPriceElement3.innerText = price;
    btcStockPriceElement3.style.color = !btcLastPrice || btcLastPrice === price ? 'black' : price > btcLastPrice ? '#AAFF00' : 'red';

    btcLastPrice = price;
    btcStockObject = null;

    btc3 = val3;

    btcVariation_2_3 = ( (parseFloat(btc3) - parseFloat(btc2)) / btc2 * 100);

    document.getElementById("btcResult2").innerHTML = btcVariation_2_3.toFixed(2);
  

  }

  if (minutes === 32) {
    let val4 = parseFloat(btcStockObject.p).toFixed(1);
    let price = parseFloat(btcStockObject.p).toFixed(1);

    btcStockPriceElement4.innerText = price;
    btcStockPriceElement4.style.color =
      !btcLastPrice || btcLastPrice === price
        ? 'black'
        : price > btcLastPrice
        ? '#AAFF00'
        : 'red';

    btcLastPrice = price;
    btcStockObject = null;

    btc4 = val4;

    btcVariation_3_4 = ( (parseFloat(btc4) - parseFloat(btc3)) / btc3 * 100);
    
    document.getElementById("btcResult3").innerHTML = btcVariation_3_4.toFixed(2);

  }

  btcVariationTotal_4 = (parseFloat(btcVariation_1_2) + parseFloat(btcVariation_2_3) + parseFloat(btcVariation_3_4));
  document.getElementById("btcResult4Total").innerHTML = btcVariationTotal_4.toFixed(2);

 

}, 60000);

index.html index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Crypto</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <h5 class="pt-3 pb-3">Date : <span id="formateDate"></span></h5>

    <table>
      <thead>
          <tr>
              <th colspan="2" class="text-center" >Crypto</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td class="text-center w15"><a href="btc.html">BTC</a></td>
              <td class="text-center w15"><span id="btcResult4Total"></span></td>
          </tr>
      </tbody>
  </table>
  
  </div>

  <script src="script.js"></script>
  <script src="btc.js"></script>

</body>
</html>

script.js脚本.js

let today = new Date();
let day = today.getDate();
let month = today.getMonth() +1;
let year = today.getFullYear();
let hour = today.getHours();
let minute = today.getMinutes();

let formateDate = day+'-'+month+'-'+year + '---' + hour+'h'+minute;

document.getElementById('formateDate').innerHTML = formateDate;

style风格

body {
    margin: 0;
    padding: 0;
}

table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

.w15 {
    width: 15%;
}

Answer 1

index.html and btc.html are opening their own instances of <script src="btc.js"> these instances are independent of each other so when your code runs in btc.html it is not seen by index.html. index.html 和 btc.html 正在打开它们自己的<script src="btc.js">实例，这些实例彼此独立，因此当您的代码在 btc.html 中运行时，index.html 看不到它。 To overcome this, after running the code in btc.html you save the results to sessionStorage then have index.html check your sessionStorage and display the results if they are available.为了克服这个问题，在运行 btc.html 中的代码后，将结果保存到 sessionStorage，然后让 index.html 检查您的 sessionStorage 并显示结果（如果可用）。

in btc.js, I'm assuming btcVariationTotal_4 is the final total you want displayed in index.html???在 btc.js 中，我假设 btcVariationTotal_4 是您希望在 index.html 中显示的最终总数？？？ If so, then in btc.js after you get the total, save it to sessionStorage like this:如果是这样，那么在你得到总数之后，在 btc.js 中，将它保存到 sessionStorage 中，如下所示：

 sessionStorage.setItem("total", btcVariationTotal_4);

Then in index.html, REMOVE <script src="btc.js"> and <script src="script.js"> since they only seem to be needed in btc.html.然后在 index.html 中，删除<script src="btc.js">和<script src="script.js">因为它们似乎只在 btc.html 中需要。 Then add this after your closing </body> tag to retrieve the total from sessionStorage like follows (note, this is not a real time update, you will need to implement a refresh or button to trigger the retrieval from sessionStorage each time:然后在结束</body>标记之后添加它以从 sessionStorage 中检索总数，如下所示（注意，这不是实时更新，您需要实现刷新或按钮以触发每次从 sessionStorage 检索：

 <script> let totalToDisplay = sessionStorage.getItem("total"); if(totalToDisplay == null){ // if there is nothing in sessionStorage, just display 0, or whatever default you want deisplayed document.getElementById('btcResult4Total').innerHTML = 0; }else{ // if theres an amount in there, display it. document.getElementById('btcResult4Total').innerHTML = totalToDisplay; } </script>

如何在另一个页面中检索变量的值？

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-01 02:16:28

如何在另一个页面中检索变量的值？

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-01 02:16:28

解决方案1
0 已采纳 2023-01-01 02:16:28