css 如何生成随机字符串的字母数字字符集长度到html< span>?

new9mtju  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(125)

我试图随机生成一个条形码的字体在页面加载.我希望长度为36个字符长,仅包括0-9,a-z和A-Z.我想有一个打印生成的字符串.我目前的代码生成随机字符串,但它打印在页面的顶部.我也想这样做的AUTH和TOKN号码,以及,我现在让这两个字符作为随机生成的10个字符的数字,但正如我所说的,这不是我长期想要做的。

function showRandomNumber() {
  document.getElementById("authnumber").innerHTML =
    Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
  document.getElementById("tokennumber").innerHTML =
    Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
}

function randomString(length, chars) {
  var result = '';

  for (var i = length; i > 0; --i)
    result += chars[Math.round(Math.random() * (chars.length - 1))];

  return result;
}
document.write(randomString(36, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

randomString();
showRandomNumber();
#barcode {
  font-family: "Code 128";
  font-size: 44.5px;
  display: inline-block;
  -moz-transform: scaleY(.73);
  -webkit-transform: scaleY(.73);
  transform: scaleY(.73);
  float: left;
}

#myNumber {
  margin: 2px;
  font-family: "OCR A Extended", "OCR A";
  font-size: 16.75px;
  margin-top: 6.5px;
}
<div class="warning_menu_container" style="margin-top:7px; margin-bottom:-11px;">
  <span id="barcode" style="margin-top:-7px; ">insert random string of text here 01</span>
  <span id="myNumber">AUTH:<font color="1fa779"><span id="authnumber" style="align:right;"></span></font>
  </span><br />
  <span id="myNumber" style="line-height: 1.1;">TOKN:<font color="1fa779"><span id="tokennumber"></span></font>
  </span>
</div>

我已经尝试了我目前写的代码,如图所示。

yqyhoc1h

yqyhoc1h1#

我认为您可以简单地删除document.write(...)的行,并仅在onload事件期间调用randomString()函数。
沿着下列路线的东西:

function showRandomNumber() {
  document.getElementById("authnumber").innerHTML =
    Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
  document.getElementById("tokennumber").innerHTML =
    Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);

  // use randomString() for barcode??
  document.getElementById("barcode").innerHTML =
    randomString(36, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
}

function randomString(length, chars) {
  var result = '';

  for (var i = length; i > 0; --i)
    result += chars[Math.round(Math.random() * (chars.length - 1))];

  return result;
}
// show all numbers
showRandomNumber();
#barcode {
  font-family: "Code 128";
  font-size:24px;
  display: inline-block;
  -moz-transform: scaleY(.73);
  -webkit-transform: scaleY(.73);
  transform: scaleY(.73);
  float: left;
  margin-top: -7px;
}

#myNumber {
  margin: 2px;
  font-family: "OCR A Extended", "OCR A";
  font-size: 16.75px;
  margin-top: 6.5px;
  color: #1fa779;
  text-align: right;
  line-height: 1.1;
}
<div class="warning_menu_container">
  <div id="barcode"></div>

  <div id="myNumber">
    AUTH: <span id="authnumber"></span>
  </div>

  <div id="myNumber">
    TOKN:<span id="tokennumber"></span>
  </div>
</div>

相关问题