Question

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

var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year =  currentDate.getFullYear()
var hour =  currentDate.getHours();
var minute= currentDate.getMinutes(); 
var second= currentDate.getSeconds(); 

var today = day + "/" + month + "/" + year 
var time =  hour + ":" + minute + ":" + second 
console.log(today+' '+time);
var date1 = new Date('12/7/2017 01:51:14');
var date2 = new Date(today+' '+time);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var hours = Math.abs(date2 - date1) / 36e5;
alert(parseFloat(hours.toFixed(2)));

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);
}

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

<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>

Answer 1

您的代码工作正常，但您需要进行一项更改：

交换以下行。他们总是给你价值1：

var theAmount = document.getElementById("amount").value; $('#generator').on('click', function() {

如下所示。他们将为您提供在该字段中选择/输入的值：

$('#generator').on('click', function() { var theAmount = document.getElementById("amount").value;

以下是为您更新的工作代码：

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;

  var d1 = document.getElementById('generatedPassword');
  d1.insertAdjacentHTML('beforeend', passwordContent.data + "<br />");

  //  document.getElementById("generatedPassword").appendChild(passwordContent);

  document.getElementById("generatedStatistics").appendChild(statisticsContent);
}


$('#generator').on('click', function() {
  var theAmount = document.getElementById("amount").value;
  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>

Answer 2

我做了一个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();
    }
});

Answer 3

我认为您正在尝试获取您在HTML中设置的值（值=＆＃34; 1＆＃34;）。尝试在生成器单击功能中设置安装变量。

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

3 个答案: