主页 / user-343956

StackOverflow's questions

Martin Hope
StackOverflow
Asked: 2020-03-16 16:48:06 +0000 UTC
  • 2

有一个创建链接的代码，一切正常。但我想让它复杂化，在按下按钮和显示链接之间延迟进度条的出现。试过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
Martin Hope
StackOverflow
Asked: 2020-03-10 19:30:27 +0000 UTC
  • 0

学js有困难，需要在纯js上做：有输入框，有按钮。你需要这样做：

    • 在输入字段中输入数字和字母（例如 qy123456h）
    • 按下按钮
    • 该脚本采用预先准备好的url（例如 https://site.ru/track？）并在最后插入输入字段中输入的内容
    • 结果https://site.ru/track?qy123456h显示在div块中，如下所示：<div><a href="https://site.ru/track?123456">https://site.ru/track?qy123456h</a></div>

提供建议或更好的示例来说明如何实现这一点。

javascript
Martin Hope
StackOverflow
Asked: 2020-07-11 23:56:06 +0000 UTC
  • 1

刚开始学JS，有问题，有工作代码，但是很繁琐，很大，帮助简化或减少。

<script>
    document.getElementById('check-1').onchange = function() {
        document.getElementById('item-1').disabled = !this.checked;
    };
    document.getElementById('check-2').onchange = function() {
        document.getElementById('item-2').disabled = !this.checked;
    };
    document.getElementById('check-3').onchange = function() {
        document.getElementById('item-3').disabled = !this.checked;
    };
    document.getElementById('check-4').onchange = function() {
        document.getElementById('item-4').disabled = !this.checked;
    };
</script>
javascript