Question

我有这个HTML：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <meta http-equiv="refresh" content="1" />
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
        $(function(){
    $( "#punti_casa" ).load( "../scoreboard/Output/Home_Score.txt" );
}); 
</script>
<script type="text/javascript"> 
        $(function(){
    $( "#punti_trasferta" ).load( "../scoreboard/Output/Away_Score.txt" );
}); 
</script>

</head>

<body>
<div class="interfaccia_base">
    <div class="interfaccia_top"></div>
    <div class="riga_testi_vuoto"></div>
  <div class="riga_testi_1"></div>
    <div class="riga_testi_home"></div>
    <div class="riga_testi_punti" style="margin-left: 2px;"><div id="punti_casa"></div></div>
  <div class="riga_testi_quarto"></div>
  <div class="riga_testi_punti"><div id="punti_trasferta"></div></div>
    <div class="riga_testi_away"></div>
  <div class="riga_testi_1"></div>
</div>
</body>
</html>

我使用meta HTTP每1秒刷新一次。问题是在我使用的流软件中，HTML每次刷新时都会闪烁。也许有一种方法可以循环该功能以在文本文件中读取，并且如果内部数字发生更改，它将在“ #punti_casa”和“ #punti_trasferta”中重写内容？

Answer 1

<html><head>
        <meta charset="UTF-8">
        <title> Pizza Party</title>

    </head>

    <body>
        <h1> PIZZA PLACE </h1>
        <!--Image goes here-->
        <center><img src="pizza.png" alt="Pizza" width="220px" height="160px"></center>
        <br><br>



        <script>
        window.model = {};
        window.pricecalculate = function()
        {
         model.cheeseprice = 11.99*Number(document.querySelector('#cheese').value);
         model.mushroomprice = 12.99*Number(document.querySelector('#mushroom').value);
         model.sausageprice =13.49*Number(document.querySelector('#sausage').value);
         model.veggieprice =12.49*Number(document.querySelector('#veggie').value);
         var deliveryOptions = Array.prototype.slice.call(document.getElementsByName('delivery-method')); // you need to use Array.prototype.slice.call to cast the NodeLits returned by document.getElementsByName into an Array and then use the Array's find method
         console.log(deliveryOptions);
         model.deliver =deliveryOptions.find(option => option.checked).value === 'delivery'
         var tipOptions = Array.prototype.slice.call(document.getElementsByName('tip'));
         model.tip = tipOptions.find(option => option.checked).value;

         model.deliveryFee =0;
         model.priceofpizza = model.cheeseprice + model.mushroomprice + model.sausageprice + model.veggieprice

         if (deliver="yes"){
            model.deliveryFee =3.99;
            }

         }


        </script>
        <p>Please designate the pizza type and the quantity in the boxes below</p>
        <p>Cheese <input type="text" id="cheese" onchange=""></p>
        <p>Mushroom <input type="text" id="mushroom" onchange=""></p>
        <p>Sausage <input type="text" id="sausage" onchange=""></p>
        <p>Veggie <input type="text" id="veggie" onchange=""></p>
        <br><br>

        <p>Delivery Preference</p>
        <p><input type="radio" name="delivery-method" id="takeout" value="takeout">Takeout</p>
        <p><input type="radio" name="delivery-method" id="delivery" value="delivery">Delivery</p>

        <br><br>
        <p>Tip amount</p>
        <p><input type="radio" name="tip" id="fifteen" value="0.15">15%</p>
        <p><input type="radio" name="tip" id="eighteen" value="0.18">18%</p>
        <p><input type="radio" name="tip" id="twenty" value="0.20">20%</p>
        <p><input type="radio" name="tip" id="notip" value="0">No Tip</p><!--All of the input boxes and directions to the user go below -->



        <!--this is the start of the button info -->
      <button id="totalSales" onclick="
                     pricecalculate();
                     var totaldue = model.priceofpizza + (model.priceofpizza*model.tip) + model.deliveryFee
                     var output = document.querySelector('#output');
                     output.value = totaldue;
                     ">Calculate Total</button> <br>


        <input type="text" id="output">

</body></html>

您可以添加更多情报以进行差异分析，并且仅在发生某些更改时才更新dom。

Answer 2

我认为您可以使用setInterval每秒刷新一次，而没有任何停止的可能性

window.setInterval(function(){
     $("#punti_casa").load("../scoreboard/Output/Home_Score.txt");
}, 1000);

如果您需要使用clearInterval（）停止重新加载，它将很好地工作

不知道如何循环执行功能

2 个答案: