PasswordGenerator最近参考了网上的一些密码生成器，仿了一个类似的密码生成器。密码主要由“大写”、“小写”、“数字”、“符号”组成。具体样式如图：开发流程。本文主要记录js开发过程。css样式会在文末github文件中给出。主要用于记录学习js开发过程的滑动效果1.设置样式属性2.监听input[ranger]滑动，改变拖尾颜色3.设置密码生成器输入的数字(js:setAttribute()方法添加指定的属性并为其分配指定的值)//Rangesliderattribute.//填充：拖动滑块时看到的拖尾颜色。//背景：默认范围滑块背景constsliderProps={fill:'#0B1EDF',background:'rgba(255,255,255,0.214)'};//选择范围滑块容器，constslider=document.querySelector(".range__slider");//显示范围滑块值的文本。constsliderValue=document.querySelector(".length__title");//使用事件侦听器应用填充和更改文本的值。slider.querySelector("input").addEventListener("input",event=>{//setAttribute()方法添加指定的属性并赋给指定的值sliderValue.setAttribute("data-length",event.target.value);applyFill(event.target);});//选择范围输入并传递给applyFill函数applyFill(slider.querySelector("input"));//此函数负责创建拖尾颜色并设置填充。functionapplyFill(slider){constpercentage=(100*(slider.value-slider.min))/(slider.max-slider.min);constbg=`linear-gradient(90deg,${sliderProps.fill}${percentage}%,${sliderProps.background}${percentage+0.1}%)`;slider.style.background=bg;sliderValue.setAttribute("data-length",slider.value);}生成随机密码字母函数名对象fromCharCode()接受一个指定的Unicode值并返回一个字符串。注意：该方法是String的静态方法，字符串中的每个字符由一个单独的Unicode数字编码指定。使用语法：//将用于创建随机密码字母的所有函数名称的对象constrandomFunc={lower:getRondomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};//生成函数//所有函数都负责返回一个随机值，我们将使用它来创建密码。functiongetRondomLower(){//fromCharCode()接受指定的Unicode值并返回一个字符串。//注意：该方法是String的静态方法，字符串中的每个字符由一个单独的Unicode数字编码指定。使用语法：String.fromCharCode()。returnString.fromCharCode(Math.floor(Math.random()*26)+97);}functiongetRandomUpper(){returnString.fromCharCode(Math.floor(Math.random()*26)+65);}函数getRandomNumber(){returnString.fromCharCode(Math.floor(Math.random()*10)+48);}functiongetRandomSymbol(){constsymbols='~!@#$%^&*()_+{}":?><;.,';returnsymbols[Math.floor(Math.random()*symbols.length)];}选择需要的DOM元素//选择所有需要的DOM元素constresultEl=document.getElementById("result");constlengthEl=document.getElementById("slider");//表示根据用户创建不同类型密码的选项的复选框constuppercaseEl=document.getElementById("uppercase");constlowercaseEl=document.getElementById("lowercase");constnumberEl=document.getElementById("number");constsymbolEl=document.getElementById("symbol");//按钮生成密码constgenerateBtn=document.getElementById("generate");//复制文本的按钮constcopyBtn=document.getElementById("copy-btn");//视图框架容器constresultContainer=document.querySelector(".result");//点击生成按钮后显示的文本信息constcopyInfo=document.querySelector(".result__info.right");//点击复制按钮后出现的文本信息constcopyedInfo=document.querySelector(".result__info".left");监听页面鼠标移动并设置复制按钮位置，复制密码js复制方法：textarea.select();document.execCommand("copy");//更新css属性COPY按钮//获取结果视图框容器的边界letresultContainerBound={left:resultContainer.getBoundingClientRect().left,top:resultContainer.getBoundingClientRect().top,};//这将更新副本的位置根据鼠标位置设置按钮--y",`${e.y-resultContainerBound.top}px`);});//将密码复制到剪贴板copyBtn.addEventListener("click",()=>{consttextarea=document.createElement("textarea");constpassword=resultEl.innerText;如果（！密码||密码==“点击生成”）{返回;}textarea.value=密码；document.body.appendChild(textarea);textarea.select();document.execCommand("复制");textarea.remove();copyInfo.style.transform="translateY(200%)";copyInfo.style.opacity="0";copiedInfo.style.transform="translateY(0%)";copiedInfo.style.opacity="0.75";});生成密码使用遍历循环生成对应的字符串，使用截取的长度生成密码//这个函数负责生成密码，然后返回functiongeneratePassword(length,lower,upper,number,symbol){让generatedPassword="";consttypesCount=lower+upper+number+symbol;consttypesArr=[{lower},{upper},{number},{symbol}].filter(item=>Object.values(item)[0]);如果（类型计数===0）{返回“”；}for(leti=0;i{constfuncName=Object.keys(type)[0];generatedPassword+=randomFunc[funcName]();});}returngeneratedPassword.slice(0,length);}对Object对象的常用操作，看网上对Object的常用操作总结，希望可以作为参考：https://www.haorooms.com/post/js_objectoperate这个密码生成器的主要js要点：1.随机生成对应的大写，小写，数字文字，符号2.合成相应数量的密码源代码：//这是一个简单的密码生成器应用，可以生成随机密码，也许你可以用它们来保护你的账户//我尽力使代码尽可能简单,不要介意变量名。//每次刷新时清除控制台console.clear();//Rangeslider属性。//填充：拖动滑块时看到的拖尾颜色。//背景：默认范围滑块背景constsliderProps={fill:'#0B1EDF',background:'rgba(255,255,255,0.214)'};//选择范围滑块容器，constslider=document.querySelector(".range__slider");//显示范围滑块值的文本。constsliderValue=document.querySelector(".length__title");//使用事件侦听器应用填充和更改文本的值。slider.querySelector("input").addEventListener("input",event=>{//setAttribute()方法添加指定的属性并赋给指定的值sliderValue.setAttribute("data-length",event.target.value);applyFill(event.target);});//选择范围输入并传递给applyFill函数applyFill(slider.querySelector("input"));//此函数负责创建拖尾颜色并设置填充。functionapplyFill(slider){constpercentage=(100*(slider.value-slider.min))/(slider.max-slider.min);constbg=`linear-gradient(90deg,${sliderProps.fill}${percentage}%,${sliderProps.background}${percentage+0.1}%)`;slider.style.background=bg;sliderValue.setAttribute("data-length",slider.value);}//将使用对象constrandomFunc={lower:getRondomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};//生成函数//所有函数都负责返回一个随机值，我们将使用它来创建密码。functiongetRondomLower(){//fromCharCode()接受指定的Unicode值并返回一个字符串。//注意：该方法是String的静态方法，字符串中的每个字符由一个单独的Unicode数字编码指定。使用语法：String.fromCharCode()。returnString.fromCharCode(Math.floor(Math.random()*26)+97);}functiongetRandomUpper(){returnString.fromCharCode(Math.floor(Math.random()*26)+65);}函数getRandomNumber(){returnString.fromCharCode(Math.floor(Math.random()*10)+48);}functiongetRandomSymbol(){constsymbols='~!@#$%^&*()_+{}":?><;.,';returnsymbols[Math.floor(Math.random()*symbols.length)];}//选择所有需要的DOM元素constresultEl=document.getElementById("result");constlengthEl=document.getElementById("slider");//表示根据用户创建不同类型密码的选项的复选框constuppercaseEl=document.getElementById("uppercase");constlowercaseEl=document.getElementById("lowercase");constnumberEl=document.getElementById("number");constsymbolEl=document.getElementById("symbol");//按钮生成密码constgenerateBtn=document.getElementById("generate");//按钮复制文本constcopyBtn=document.getElementById("copy-btn");//视图框架容器constresultContainer=document.querySelector(".result");//点击生成按钮后显示的文本信息constcopyInfo=document.querySelector(".result__info.right");//点击复制按钮后显示的文本constcopyedInfo=document.querySelector(".result__info.left");//更新COPY按钮的CSS属性//获取结果视图框容器的边界letresultContainerBound={left:resultContainer.getBoundingClientRect().left,top:resultContainer.getBoundingClientRect().top,};//这将根据鼠标位置更新复制按钮位置resultContainer.addEventListener("mousemove",e=>{copyBtn.style.setProperty("--x",`${e.x-resultContainerBound.left}px`);copyBtn.style.setProperty("--y",`${e.y-resultContainerBound.top}px`);});//复制剪贴板中的密码copyBtn.addEventListener("click",()=>{consttextarea=document.createElement("textarea");constpassword=resultEl.innerText;if(!password||password=="CLICKGENERATE"){返回;}textarea.value=password;document.body.appendChild(textarea);textarea.select();document.execCommand("copy");textarea.remove();copyInfo.style.transform="translateY(200%)";copyInfo.style.opacity="0";copiedInfo.style.transform="translateY(0%)";copiedInfo.style.opacity="0.75";});//单击生成时，将生成密码IDgenerateBtn.addEventListener("click",()=>{constlength=+lengthEl.value;consthasLower=lowercaseEl.checked;consthasUpper=uppercaseEl.checked;consthasNumber=numberEl.checked;consthasSymbol=symbolEl.checked;resultEl.innerText=generatePassword(length,hasLower,hasUpper,hasNumber,hasSymbol);copyInfo.style.transform="translateY(0%)";copyInfo.style.opacity="0.75";copyInfo.style.transform="translateY(200%)";copiedInfo.style.opacity="0";});generateBtn.addEventListener("click",()=>{constlength=+lengthEl.value;consthasLower=lowercaseEl.checked;consthasUpper=uppercaseEl.checked;consthasNumber=numberEl.checked;consthasSymbol=symbolEl.checked;resultEl.innerText=generatePassword(长度,hasLower,hasUpper,hasNumber,hasSymbol);copyInfo.style.transform="translateY(0%)";copyInfo.style.opacity="0.75";copiedInfo.style.transform="translateY(200%)";copiedInfo.style.opacity="0";});//这个函数负责生成密码然后返回它functiongeneratePassword(length,lower,upper,number,symbol){letgeneratedPassword="";consttypesCount=lower+upper+number+symbol;consttypesArr=[{lower},{upper},{number},{symbol}]。过滤器（项目=>对象。值（项目）[0]）；如果（类型计数===0）{返回“”；}for(leti=0;i{constfuncName=Object.keys(type)[0];generatedPassword+=randomFunc[funcName]();});}returngeneratedPassword.slice(0,length);}如果想看其他css和js代码，可以查看我的github地址：https://github.com/panpanxiong3/Front-end-effect-link
