javascript - 从密码生成器创建密码列表

Question

当我单击“生成”按钮时，当前的密码生成器一次创建一个密码。是否可以使用相同的功能创建不同密码的列表？将创建的密码数量应从表单底部的“密码数量”选项中决定。

var CHARACTER_TABLE = [
  [true, "Numbers", "0123456789"],
  [true, "Lowercase", "abcdefghijklmnopqrstuvwxyz"],
  [false, "Upercase", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
];

var passwordContent = document.createTextNode("");
var statisticsContent = document.createTextNode("\u00A0");



function init() {
  var items = document.createDocumentFragment();
  CHARACTER_TABLE.forEach(function(key, x) {
    var spanItem = document.createElement("span");
    var inputItem = document.createElement("input");
    inputItem.type = "checkbox";
    inputItem.checked = key[0];
    inputItem.id = "charset-" + x;
    spanItem.appendChild(inputItem);
    var labelItem = document.createElement("label");
    labelItem.htmlFor = inputItem.id;
    labelItem.appendChild(document.createTextNode(" " + key[1] + " "));
    var detailsItem = document.createElement("em");
    detailsItem.appendChild(document.createTextNode("(" + key[2] + ")"));
    labelItem.appendChild(detailsItem);
    spanItem.appendChild(labelItem);
    items.appendChild(spanItem);
    items.appendChild(document.createElement("br"));
  });
  var itemsWrapper = document.getElementById("charset-options");
  itemsWrapper.insertBefore(items, itemsWrapper.firstChild);
}

init();

function generatePassword() {
  var charsetTxt = "";
  CHARACTER_TABLE.forEach(function(key, x) {
    if (document.getElementById("charset-" + x).checked) {
      charsetTxt += key[2];
    }
  });
  var charsetArray = [];
  for (var i = 0; charsetTxt.length > i; i++) {
    var character = charsetTxt.charCodeAt(i);
    var placeholder = null;
    if (0xD800 > character || character >= 0xE000) {
      placeholder = charsetTxt.charAt(i);
    } else if (character >= 0xD800 ? 0xDC00 > character : false) {
      if (charsetTxt.length > i + 1) {
        var next = charsetTxt.charCodeAt(i + 1);
        if (next >= 0xDC00 ? 0xE000 > next : false) {
          placeholder = charsetTxt(i, 2);
          i++;
        }
      }
    } else if (next >= 0xDC00 ? 0xE000 > next : false) {
      i++;
    } else {
      throw "Assertion error";
    }
    if (placeholder != null ? charsetArray.indexOf(placeholder) == -1 : false) {
      charsetArray.push(placeholder);
    }
  }

  var thePassword = "";
  var theStatistics = "";
  if (charsetArray.length == 0) {
    alert("Error: Character set is empty");
  } else {
    var theLength;
    if (document.getElementById("select-length").checked) {
      theLength = parseInt(document.getElementById("length").value, 10);
    } else {
      throw "Assertion error";
    }
    if (0 > theLength) {
      alert("Negative password length");
    } else if (theLength > 10000) {
      slert("Password length too large");
    } else {
      for (var i = 0; theLength > i; i++) {
        thePassword += charsetArray[randomInt(charsetArray.length)];
        theStatistics = "Length = " + theLength + " chars";
      }
    }
  }
  passwordContent.data = thePassword;
  statisticsContent.data = theStatistics;
  document.getElementById("generatedPassword").appendChild(passwordContent);
  document.getElementById("generatedStatistics").appendChild(statisticsContent);
}

var theAmount = document.getElementById("amount").value;
$('#generator').on('click', function() {
for(var i = 0; i < theAmount; i++) {
  generatePassword();
  }
});


function randomInt(n) {
  var x = randomIntMathRandom(n);
  x = (x + randomIntBrowserCrypto(n)) % n;
  return x;
}

function randomIntMathRandom(n) {
  var x = Math.floor(Math.random() * n);
  if (0 > x || x >= n) {
    throw "Arithmetic exception";
  }
  return x;
}

var cryptoObject = null;

function randomIntBrowserCrypto(n) {
  if (cryptoObject == null) {
    return 0;
  }
  var x = new Uint32Array(1);
  do cryptoObject.getRandomValues(x);
  while (x[0] - x[0] % n > 4294967296 - n);
  return x[0] % n;
}

#generator {
  display: inline-block;
  color: #444;
  border: 1px solid #CCC;
  background: #DDD;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  vertical-align: middle;
  max-width: 100px;
  padding: 5px;
  text-align: center;
}

#generator:active {
  color: red;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p id="charset-options">
  </p>
  <div class="section">
    <div>
      <table>
        <tbody>
          <tr>
            <td>
              <input type="hidden" name="type" id="select-length" checked="checked">
              <label for="select-length">Length:&#xA0;</label>
            </td>
            <td>
              <input type="number" min="0" value="10" step="1" id="length" style="width:4em"> characters</td>
          </tr>
          <tr>
            <td>
              <input type="hidden" name="amount" id="select-amount">
              <label for="select-amount">Number of Passwords:&#xA0;</label>
            </td>
            <td>
              <input type="number" min="0" value="1" step="1" id="amount" style="width:4em">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br>
  <div id="generator" style="padding:0.5em 0.5em">Generate</div>:
  <span id="generatedPassword"></span>
  <p id="generatedStatistics"></p>
</form>

这是我用 for 循环解决问题的失败尝试:

    var theAmount = document.getElementById("amount").value;
    $('#generator').on('click', function() {
    for(var i = 0; i < theAmount; i++) {
    generatePassword();
     }
   });

Answer 1

我做了一个 jsfiddle https://jsfiddle.net/b38x9vp4/
因此，我向您的 #generatedPassword 元素添加了一个新的密码文本节点。每次调用 generatePassword()

document.getElementById("generatedPassword").appendChild(document.createTextNode(thePassword));
document.getElementById("generatedPassword").appendChild(document.createElement("br"));
document.getElementById("generatedStatistics").appendChild(statisticsContent);

我认为在您的程序中删除以前生成的密码会很好。并且您需要将 var theAmount = document.getElementById("amount").value; 放入点击监听器中。

$('#generator').on('click', function() {
    var theAmount = document.getElementById("amount").value;
    //remove previous passwords from generatedPassword element
      var myNode = document.getElementById("generatedPassword");
      while (myNode.firstChild) {
          myNode.removeChild(myNode.firstChild);
      }
    //remove previous passwords from generatedPassword element
    for(var i = 0; i < theAmount; i++) {
        generatePassword();
    }
});