VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 教你用JavaScript随机生成密码

案例介绍

欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用JavaScript编程实战案例,做一个随机密码生成器。用户点击生成,输入框内就会生成一个由数字、大小写字母、特殊符号随机组合而成的密码。通过实战我们将学会Math.floor方法、substring方法、clipboard.writeText方法。

案例演示

点击生成后,输入框内会随机生成一串密码,点击复制,会弹出复制成功的消息框。

案例设计

JavaScript实战案例-随机生成密码
我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。
其中架构设计包含了HTML,CSS,JavaScript 共三部分代码。

源码学习

进入核心代码学习,我们先来看HTML中的核心代码。

<div class="password-container">
  <h2>随机生成密码</h2>
  <div class="input-container">
    <input type="text" id="input" class="input" placeholder="生成密码" readonly/>
    <i class="far fa-copy fa-2x"></i>
  </div>
  <button class="btn">生成</button>
</div>
<div class="alert-container active">复制密码</div>

然后我们来编写核心的JavaScript代码,通过querySelector获取HTML元素的信息;添加生成按钮的点击事件,点击生成按钮时创建密码;添加复制按钮的点击事件,点击复制按钮时复制密码,若输入框内不空则弹出复制成功的提示框;生成密码,密码内容从字符串中提取,密码长度12,循环生成密码,使用Math的floor和random方法获得随机数字,使用subString截取字符组成密码,将已生成的密码值设置为输入框和弹出框的内容;复制代码使用select和setSelectionRange让用户可以使用鼠标复制,或使用Clipboard接口的 writeText() 方法将密码写入操作系统的剪切板中。

<script>
  //有个小院-兴趣编程
  const btnEl=document.querySelector(".btn");
const inputEl=document.getElementById("input");
const copyIconEl=document.querySelector(".fa-copy");
const alertContainerEl=document.querySelector(".alert-container");
btnEl.addEventListener("click",()=>{
  createPassword();
});
copyIconEl.addEventListener("click",()=>{
  copyPassword();
  if(inputEl.value){
    alertContainerEl.classList.remove("active");
    setTimeout(()=>{
      alertContainerEl.classList.add("active");
        },2000);
        }
        });
        function createPassword() {
        const chars="0123456789abcdefghijklmnopqrstuvwxtz!@#$%^&*()_+?:{}[]ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        const passwordLength=12;
        let password="";
        for(let index=0;index<passwordLength;index++){
        const randomNum=Math.floor(Math.random()*chars.length);
        password+=chars.substring(randomNum,randomNum+1);
        }
        inputEl.value=password;
        alertContainerEl.innerText=password+"已复制";
        }
        function copyPassword() {
        inputEl.select();
        inputEl.setSelectionRange(0,9999);
        navigator.clipboard.writeText(inputEl.value);
        }    </script>

总结思考

学习点
1、math.floor(x)返回小于参数x的最大整数。
2、substring(start,stop):start是检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符。
3、Clipboard接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。

问答
1、math.floor(x)返回的整数吗?
2、substring返回结果中包不包括stop所指的字符?
3、writeText() 方法可以将特定字符写入操作系统的剪切板吗?


出处:https://www.cnblogs.com/xFeater/p/16941607.html


相关教程