主页 / 问题 / 1095224
Accepted
StackOverflow
Asked:2020-03-16 16:48:06 +0000 UTC2020-03-16 16:48:06 +0000 UTC

如何在代码中添加 setTimeout 和进度条？

  • 772

有一个创建链接的代码，一切正常。但我想让它复杂化，在按下按钮和显示链接之间延迟进度条的出现。试过setTimeout但没有用。如何组合链接输出代码、延迟（例如 10 秒）和进度条？

思路应该是这样的：

  1. 按下按钮
  2. 出现一个进度条，在 10 秒内填满
  3. 进度条消失，结果显示为链接。

链接创建代码： 

add.onclick = function () {
    let val = document.getElementById('inp').value; // Получаем значение введённых данных
    let main = document.getElementsByClassName('main'); // Получаем блок родителя
    let div = document.createElement('div'); // Создаём div
    let a = document.createElement('a'); // создаём элемент a
    val = 'https://site.ru/track?' + val; // Добавляем к ссылке введённые данные
    a.innerText = val; // В текст <a> вставляем сформированную ссылку
    a.setAttribute('href', val); // Вставляем в href ссылку для кликабельности
    div.appendChild(a); // Добавляем атрибут a в div
    main[0].appendChild(div); // добавляем div в родительский блок.
}
<div class="main">
    <input id="inp">
    <button id="add">Создать ссылку</button>
</div>

进度条输出：

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>
<button onclick="move()">Создать ссылку</button>

javascript

1 个回答

  1. Best Answer

        document.getElementById('myProgress').style.display = 'none';
    add.onclick = function () {
        function makeLink() {
            let val = document.getElementById('inp').value; // Получаем значение введённых данных
            let main = document.getElementsByClassName('main'); // Получаем блок родителя
            let div = document.createElement('div'); // Создаём div
            let a = document.createElement('a'); // создаём элемент a
            val = 'https://site.ru/track?' + val; // Добавляем к ссылке введённые данные
            a.innerText = val; // В текст <a> вставляем сформированную ссылку
            a.setAttribute('href', val); // Вставляем в href ссылку для кликабельности
            div.appendChild(a); // Добавляем атрибут a в div
            main[0].appendChild(div); // добавляем div в родительский блок.
            document.getElementById('myProgress').style.display = 'none';
        }
        move();
        setTimeout(makeLink, 10000);
    };
    var i = 0;
    function move() {
        document.getElementById('myProgress').style.display = 'block';
        if (i == 0) {
            i = 1;
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, 100);
            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                    i = 0;
                } else {
                    width++;
                    elem.style.width = width + "%";
                }
            }
        }
    }
        #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
    }
    <div class="main">
    <input id="inp">
    <button id="add">Создать ссылку</button>
</div>
<div id="myProgress">
    <div id="myBar"></div>
</div>
<br>

    • 3

相关问题