Блог

Главная - Вопросы по программированию - У меня проблемы с индикатором выполнения Javascript

У меня проблемы с индикатором выполнения Javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь заставить Javascript изменять html-текст, когда индикатор выполнения достигает 100%, и вообще не запускаться (индикатор выполнения), если значение элемента html = 0, но, похоже, где-то есть ошибка, потому что она не работает.

Вот мой код:

 var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    var get = document.getElementById("btn").innerHTML('5');
    
    function frame() {
      if (width >= 100) {
        get();
        i = 0;
        frame();

      } else {
        width  ;
        elem.style.width = width   "%";
        elem.innerHTML = width    "%";
        document.getElementById("btn").innerHTML('1000');

      }
    }
  }
}

function trade() {
  var add = document.getElementById("btc");
  
  if (add == 0) {
    alert("blance is 0")
  } else {
    move();
  }
}  
 <html>
<head></head>
  <body>
    <div class="row">
      <div class="col-7">
        <h3> Total:</h3>
      </div>
      
      <div>
        <h5 id="btc"><strong>0 </strong></h5>
      </div>
    </div>

    <div class="row">
      <h3>Balance:</h3>
    </div>
    
    <div>
      <h5 id="btn">0</span></strong></h5>
    </div>
    <div id="myBar" style="width: 1%; background-color: red; line-height: 30px; color: black;">0%</div>

    <br>
    
    <button type="button" class="btn btn-danger" onclick="move(); trade();" > Click to Start trade</button>

  </body>
</html>

Я знаю, что мой код немного испорчен. Пожалуйста, кто-нибудь может мне помочь?

Ответ №1:

Я несколько изменил ваш код, но я считаю, что это то, что вы хотите. Вы можете изменить значения, чтобы изменить размер выигрыша. random Я также изменил Total поле и назвал его Profit , я не был уверен, какова цель этого поля.

Я постараюсь указать на некоторые ошибки, которые я заметил.

  1. Вы можете определить функцию внутри другой функции, но способ их определения и выполнения отличается. Проверьте здесь для получения дополнительной информации и примеров.
  2. Когда вы читаете значения из HTML, вам нужно преобразовать их в числа, чтобы выполнять с ними какие-либо математические операции. Я использовал функцию parseInt(text) для этого.
  3. innerHTML это свойство, а не функция, поэтому, если вы хотите изменить это свойство, вам нужно присвоить ему значение с помощью = знака, например document.getElementById("btc").innerHTML = 0 . К счастью, вам не нужно преобразовывать число в строку, чтобы сохранить его в этом свойстве.

Вот и все, я надеюсь, что это будет более полезным, чем запутанным.

 function move() {
  var i = 0;

  if (i == 0) {
    
    var loadingBar = document.getElementById("myBar");
    var width = 1;
    
    var initialProfit = document.getElementById("btc").innerHTML = 0;
    var initialBalance = document.getElementById("btn").innerHTML = 1000;
    
    setInterval( function() {
      var profit = parseInt( document.getElementById( 'btc' ).innerHTML );
      var balance = parseInt( document.getElementById( 'btn' ).innerHTML );
      var random = Math.floor(Math.random() * (50 - (-35)))   (-35);
      
      if (width >= 100) {
      
        i = 0;
        return;
        
      } else {
        width  ;
        loadingBar.style.width = width   "%";
        loadingBar.innerHTML = width    "%";
        document.getElementById( 'btn' ).innerHTML = balance   random;
        
        document.getElementById( 'btc' ).innerHTML = profit   random;
      }
    }, 200 );

  }
}  
 <html>
<head></head>
  <body>
    <div class="row">
      <div class="col-7">
        <h3> Profit:</h3>
      </div>
      
      <div>
        <h5 id="btc">0</h5>
      </div>
    </div>

    <div class="row">
      <h3>Balance:</h3>
    </div>
    
    <div>
      <h5 id="btn">0</span></strong></h5>
    </div>
    <div id="myBar" style="width: 1%; background-color: red; line-height: 30px; color: black;">0%</div>

    <br>
    
    <button type="button" class="btn btn-danger" onclick="move();" > Click to Start trade</button>

  </body>
</html>

Комментарии:

1. Большое вам спасибо! Это именно то, что я искал.

2. @PriscaChidimma Я рад, что смог помочь!