1 . 拓展卡片(类似手风琴)
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" / >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" / >
< title> Document< / title>
< style>
. container {
width : 900px;
height : 400px;
display : flex;
}
. panel {
flex : 1 ;
border- radius: 10px;
margin : 5px;
background : url ( 'https://img1.baidu.com/it/u=3715687718,3093898249&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' ) ;
background- size: cover;
position : relative;
transition : all 0 . 7s ease- in ;
}
. panel. active {
flex : 8 ;
}
. panel h3 {
color : green;
position : absolute;
left : 5px;
bottom : 20px;
opacity : 0 ;
}
. panel. active h3 {
opacity : 1 ;
transition : opacity . 5s ease- in 0 . 4s;
}
< / style>
< / head>
< body>
< div class = "container" >
< div class = "panel active" >
< h3> 新世界< / h3>
< / div>
< div class = "panel" >
< h3> 新世界< / h3>
< / div>
< div class = "panel" >
< h3> 新世界< / h3>
< / div>
< div class = "panel" >
< h3> 新世界< / h3>
< / div>
< div class = "panel" >
< h3> 新世界< / h3>
< / div>
< / div>
< / body>
< script>
let panels = Array. from ( document. getElementsByClassName ( 'panel' ) )
panels. forEach ( panel => {
panel. addEventListener ( 'click' , function ( ) {
removeClassName ( )
if ( ! this . classList. contains ( 'active' ) ) {
this . classList. add ( 'active' )
}
} )
} )
function removeClassName ( target ) {
panels. forEach ( ( panel ) => {
if ( target!== panel) {
panel. classList. remove ( 'active' )
}
} )
}
< / script>
< / html>
2.步骤条
< ! DOCTYPE html>
< html lang= "zh-CN" >
< head>
< meta charset= "UTF-8" / >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" / >
< title> Document< / title>
< style>
: root {
-- line- border- fill: #3498db;
-- line- border- empty: yellow;
}
* {
margin : 0 ;
padding : 0 ;
box- sizing: border- box;
}
. container {
width : 400px;
height : 200px;
margin : 100px auto;
display : flex;
flex- direction: column;
align- items: center;
justify- content: center;
}
. step_circle {
display : flex;
width : 100 % ;
margin- bottom: 30px;
position : relative;
justify- content: space- between;
}
. step_circle: : before {
content : "" ;
background- color: var ( -- line- border- empty) ;
position : absolute;
top : 50 % ;
left : 0 ;
transform : translateY ( - 50 % ) ;
height : 4px;
width : 100 % ;
z- index: - 1 ;
}
#process {
background- color: var ( -- line- border- fill) ;
position : absolute;
top : 50 % ;
left : 0 ;
transform : translateY ( - 50 % ) ;
height : 4px;
width : 0 % ;
z- index: - 1 ;
transition : all 0 . 4s ease;
}
. step {
background- color: #f6f7fb;
color : #999 ;
border- radius: 50 % ;
height : 30px;
width : 30px;
border : 3px solid var ( -- line- border- empty) ;
display : flex;
align- items: center;
justify- content: center;
}
. step. active {
border : 3px solid var ( -- line- border- fill) ;
}
. btn: disabled {
background- color: var ( -- line- border- empty) ;
cursor : not- allowed;
}
. btn {
background- color: var ( -- line- border- fill) ;
color : green;
border : 0 ;
border- radius: 6px;
cursor : pointer;
font- family: inherit;
padding : 8px 30px;
margin : 5px;
font- size: 14px;
}
. btn: active {
transform : scale ( 0.98 ) ;
}
. btn: focus {
outline : 0 ;
}
< / style>
< / head>
< body>
< div class = "container" >
< div class = "step_circle" >
< ! -- 一开始对于进度条是都想用伪元素去做的,最后发现伪元素的获取和设置属性不方 -- >
< div id= "process" > < / div>
< div class = "step active" > 1 < / div>
< div class = "step" > 2 < / div>
< div class = "step" > 3 < / div>
< div class = "step" > 4 < / div>
< / div>
< div class = "btns" >
< button id= "prev" class = "btn" > 上一个< / button>
< button id= "next" class = "btn" > 下一个< / button>
< / div>
< / div>
< / body>
< script>
const steps = document. querySelectorAll ( ".step" ) ;
const stepsLen = steps. length - 1 ;
const prev_btn = document. getElementById ( "prev" ) ;
const next_btn = document. getElementById ( "next" ) ;
const porcess = document. querySelector ( "#process" ) ;
let activeIndex = 1 ;
prev_btn. addEventListener ( "click" , ( ) => {
activeIndex-- ;
if ( activeIndex < 1 ) {
activeIndex = 1 ;
}
updateDom ( ) ;
updateProcess ( ) ;
} ) ;
next_btn. addEventListener ( "click" , ( ) => {
activeIndex++ ;
if ( activeIndex > steps. length) {
activeIndex = steps. length;
}
updateDom ( ) ;
updateProcess ( ) ;
} ) ;
function updateDom ( ) {
steps. forEach ( ( step, index ) => {
if ( index < activeIndex) {
if ( ! step. classList. contains ( "active" ) ) {
step. classList. add ( "active" ) ;
}
} else {
step. classList. remove ( "active" ) ;
}
} ) ;
}
function updateProcess ( ) {
const actives = document. querySelectorAll ( ".active" ) . length - 1 ;
const Wpx = ( actives / stepsLen) * 100 + "%" ;
console. log ( Wpx, actives, stepsLen) ;
porcess. style. width = Wpx;
if ( activeIndex === 1 ) {
prev_btn. disabled = true ;
} else if ( activeIndex === steps. length) {
next_btn. disabled = true ;
} else {
prev_btn. disabled = false ;
next_btn. disabled = false ;
}
}
function init ( ) {
updateDom ( ) ;
updateProcess ( ) ;
}
init ( ) ;
< / script>
< / html>
3 选择菜单
< ! DOCTYPE html>
< html lang= "zh-CN" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< style>
* {
box- sizing: border- box;
}
body {
font- family: 'Lato' , sans- serif;
background- color: #333 ;
color : #222 ;
overflow- x: hidden;
margin : 0 ;
}
. container {
background- color: #fafafa;
width : 100vw;
min- height: 100vh;
padding : 50px;
transform- origin: top left;
transition : transform 0 . 5s linear;
}
. container. show_nav {
transform : rotate ( - 20deg) ;
}
. btns_container {
color : white;
font- size: 16px;
position : fixed;
left : - 100px;
top : - 100px;
}
. circle {
position : relative;
width : 200px;
height : 200px;
border- radius: 50 % ;
transition : transform 0 . 5s linear;
background- color: #ff7979;
}
. container. show_nav . circle {
transform : rotate ( - 90deg) ;
}
. btns_container button {
position : absolute;
top : 50 % ;
left : 50 % ;
height : 40 % ;
cursor : pointer;
background- color: transparent;
border : 0 ;
outline : none;
}
#close {
transform : rotate ( 90deg) ;
transform- origin: top left;
}
. content img {
max- width: 100 % ;
}
. content {
max- width: 1000px;
margin : 50px auto;
}
. content h1 {
margin : 0 ;
}
. content small {
color : #555 ;
font- style: italic;
}
. content p {
color : #333 ;
line- height: 1.5 ;
}
nav {
position : fixed;
bottom : 50px;
left : 0 ;
}
nav ul {
color : black;
list- style- type: none;
padding- left: 30px;
}
nav ul li {
text- transform: uppercase;
color : white;
margin : 40px 0 ;
transform : translateX ( - 100 % ) ;
transition : transform 0 . 4s ease- in ;
}
nav ul li+ li {
margin- left: 15px;
transform : translateX ( - 150 % ) ;
}
nav ul li+ li+ li {
margin- left: 30px;
transform : translateX ( - 200 % ) ;
}
. container. show_nav + nav li {
transform : translateX ( 0 ) ;
transition- delay: 0 . 3s;
}
< / style>
< / head>
< body>
< div class = "container" >
< ! -- 操作旋转按钮 -- >
< ! -- 这一层用来固定位置 -- >
< div class = "btns_container" >
< div class = "circle" >
< button id= "open" > 开启< / button>
< button id= "close" > 关闭< / button>
< / div>
< / div>
< ! -- 主内容 -- >
< div class = "content" >
< h1> Amazing Article< / h1>
< small> Florin Pop< / small>
< p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime
aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores
recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime
dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem,
molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae
temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur
perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.
< / p>
< h3> My Dog< / h3>
< img
src= "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
alt= "doggy" / >
< p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel
consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam
placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia
cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates
sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam? < / p>
< / div>
< ! -- 小菜单 -- >
< / div>
< nav>
< ul>
< li> Home< / li>
< li> About< / li>
< li> Contact< / li>
< / ul>
< / nav>
< / body>
< script>
const open_btns = document. getElementById ( 'open' )
const close_btns = document. getElementById ( 'close' )
const container = document. querySelector ( '.container' )
open_btns. addEventListener ( 'click' , ( ) => container. classList. add ( 'show_nav' ) )
close_btns. addEventListener ( 'click' , ( ) => container. classList. remove ( 'show_nav' ) )
< / script>
< / html>
4隐藏搜索框
< ! DOCTYPE html>
< html lang= "zh-CN" >
< head>
< meta charset= "UTF-8" / >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" / >
< title> Document< / title>
< style>
* {
box- sizing: border- box;
margin : 0 ;
padding : 0 ;
}
. container {
height : 100vh;
background- color: green;
display : flex;
align- items: center;
justify- content: center;
}
. search_bar {
position : relative;
font- size: 18px;
height : 50px;
}
#search,
#btn {
background- color: white;
height : 100 % ;
width : 50px;
border : 0 ;
}
#search: focus,
#btn: focus {
outline : none;
}
#search {
font- size: 18px;
padding : 15px;
border : 0 ;
transition : width 0 . 3s ease;
}
#btn {
cursor : pointer;
position : absolute;
left : 0 ;
top : 0 ;
transition : transform 0 . 3s ease;
}
. search_bar. active #search{
width : 200px;
}
. search_bar. active #btn{
transform : translateX ( 198px) ;
}
< / style>
< / head>
< body>
< div class = "container" >
< div class = "search_bar" >
< input type= "text" id= "search" placeholder= "search ... " / >
< button id= "btn" > 搜< / button>
< / div>
< / div>
< / body>
< script>
const search_bar = document. querySelector ( '.search_bar' )
const btn = document. getElementById ( 'btn' )
const search = document. getElementById ( 'search' )
btn. addEventListener ( 'click' , ( ) => {
search_bar. classList. toggle ( 'active' )
search. focus ( )
} )
< / script>
< / html>
5输入框波浪效果
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: steelblue;
}
.container {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px;
padding: 20px 40px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
#btn {
cursor: pointer;
width: 100%;
padding: 15px;
border: 0;
background-color: lightblue;
border-radius: 5px;
margin-bottom: 30px;
}
#btn:focus {
outline: none;
}
#btn:active {
transform: scale(0.99);
}
a {
color: lightblue;
text-decoration: none;
}
.control {
position: relative;
margin-bottom: 40px;
}
.control input {
padding: 15px 0;
border: none;
color: white;
background-color: transparent;
border-bottom: 2px solid white;
width: 100%;
font-size: 18px;
}
.control input:focus,
/* valid 输入校验 */
.control input:valid {
outline: none;
border-bottom-color: lightblue;
}
.control label {
position: absolute;
left: 0;
top: 15px;
/* 为了在label 上面也显示 输入 情况 */
/* 下面的样式选择 一个 推荐当前设置的这个 */
/* z-index: -1; */
pointer-events: none;
}
/* 通过span 样式来调整 */
.control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
/* cubic-bezier 贝塞尔曲线 */
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.control input:focus + label span
{
color: lightblue;
transform: translateY(-30px);
}
</style>
</head>
<body>
<div class="container">
<h1>Please Login</h1>
<form class="login_form">
<div class="control">
<input type="text" />
<label>Email</label>
<!-- <label>
<span style="transition-delay: 0ms">E</span>
<span style="transition-delay: 50ms">m</span>
<span style="transition-delay: 100ms">a</span>
<span style="transition-delay: 150ms">i</span>
<span style="transition-delay: 200ms">l</span>
</label> -->
</div>
<div class="control">
<input type="password" />
<label>Password</label>
</div>
<button id="btn">LOGIN</button>
<p>Don't have an account? <a href="#">Register</a></p>
</form>
</div>
</body>
<script>
const labels = document.querySelectorAll('.control label')
labels.forEach((label, idx) => {
label.innerHTML = label.innerText
.split('')
.map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
.join('')
})
</script>
</html>
6 倒计时
< ! DOCTYPE html>
< html lang= "zh-CN" >
< head>
< meta charset= "UTF-8" / >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" / >
< title> Document< / title>
< link
rel= "stylesheet"
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity= "sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin= "anonymous"
/ >
< style> < / style>
< style>
* {
box- sizing: border- box;
margin : 0 ;
padding : 0 ;
}
body {
color : white;
height : 100vh;
display : flex;
align- items: center;
justify- content: center;
background- color: #8e44ad;
}
. container {
width : 800px;
display : flex;
align- items: center;
justify- content: center;
}
. count- cotainer {
display : flex;
flex- direction: column;
justify- content: center;
text- align: center;
margin : 30px 50px;
}
. counter {
font- size: 60px;
margin- top: 10px;
}
< / style>
< / head>
< body>
< div class = "container" >
< div class = "count-cotainer" >
< i class = "fab fa-twitter fa-3x" > < / i>
< div class = "counter" data- target= "12000" > < / div>
< span> Twitter Followers< / span>
< / div>
< div class = "count-cotainer" >
< i class = "fab fa-youtube fa-3x" > < / i>
< div class = "counter" data- target= "5000" > < / div>
< span> YouTube Subscribers< / span>
< / div>
< div class = "count-cotainer" >
< i class = "fab fa-facebook fa-3x" > < / i>
< div class = "counter" data- target= "7500" > < / div>
< span> Facebook Fans< / span>
< / div>
< / div>
< / body>
< script>
const counters = document. querySelectorAll ( ".counter" ) ;
const steps = 200 ;
const updateDom = ( ele ) => {
const targetCount = ele. dataset. target;
const currentTarget = + ele. innerText;
const increment = targetCount / steps;
if ( currentTarget > targetCount) {
ele. innerText = targetCount;
} else {
ele. innerText = ` ${ Math. ceil ( currentTarget + increment) } ` ;
setTimeout ( ( ) => {
updateDom ( ele) ;
} , 2 ) ;
}
} ;
counters. forEach ( ( ele ) => {
updateDom ( ele) ;
} ) ;
< / script>
< / html>
加载动画
< ! DOCTYPE html>
< html lang= "zh-CN" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< style>
* {
box- sizing: border- box;
}
body {
background- color: #2c3e50;
display : flex;
align- items: center;
justify- content: center;
height : 100vh;
overflow : hidden;
margin : 0 ;
}
. kinetic {
position : relative;
height : 80px;
width : 80px;
}
. kinetic: : after,
. kinetic: : before {
content : '' ;
position : absolute;
top : 0 ;
left : 0 ;
width : 0 ;
height : 0 ;
border : 50px solid transparent;
border- bottom- color: #fff;
}
. kinetic: : after{
border- bottom- color: red;
animation : rotateA 2s linear infinite 0 . 5s;
}
. kinetic: : before {
transform : rotate ( 90deg) ;
animation : rotateB 2s linear infinite;
}
@keyframes rotateA {
0 % ,
25 % {
transform : rotate ( 0deg) ;
}
50 % ,
75 % {
transform : rotate ( 180deg) ;
}
100 % {
transform : rotate ( 360deg) ;
}
}
@keyframes rotateB {
0 % ,
25 % {
transform : rotate ( 90deg) ;
}
50 % ,
75 % {
transform : rotate ( 270deg) ;
}
100 % {
transform : rotate ( 450deg) ;
}
}
< / style>
< / head>
< body>
< div class = "kinetic" > < / div>
< / body>
< / html>
随机密码生成
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" / >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" / >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" / >
< title> Document< / title>
< link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity= "sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin= "anonymous" / >
< style>
* {
margin : 0 ;
padding : 0 ;
box- sizing: border- box;
}
body {
background- color: #3b3b98;
height : 100vh;
display : flex;
justify- content: center;
align- items: center;
color : white;
}
#container {
background- color: #23235b;
width : 350px;
box- shadow: 0px 2px 10px rgba ( 255 , 255 , 255 , 0.2 ) ;
padding : 20px;
}
h2 {
margin : 10px 0 20px;
text- align: center;
}
. result- container {
background- color: rgba ( 0 , 0 , 0 , 0.4 ) ;
display : flex;
justify- content: flex- start;
align- items: center;
position : relative;
font- size: 18px;
letter- spacing: 1px;
padding : 12px 10px;
height : 50px;
width : 100 % ;
}
. result- container #result {
word- wrap: break - word;
max- width: calc ( 100 % - 40px) ;
}
. result- container . btn {
position : absolute;
top : 5px;
right : 5px;
width : 40px;
height : 40px;
font- size: 20px;
}
. btn {
border : none;
background- color: #3b3b98;
color : #fff;
font- size: 16px;
padding : 8px 12px;
cursor : pointer;
}
. btn- large {
display : block;
width : 100 % ;
}
. setting {
display : flex;
justify- content: space- between;
align- items: center;
margin : 15px 0 ;
}
< / style>
< / head>
< body>
< div id= "container" >
< h2> Password Generator< / h2>
< div class = "result-container" >
< span id= "result" > < / span>
< button class = "btn" id= "clipboard" >
< i class = "far fa-clipboard" > < / i>
< / button>
< / div>
< div class = "settings" >
< div class = "setting" >
< label> Password Length< / label>
< input type= "number" id= "length" min= "4" max= "20" value= "20" >
< / div>
< div class = "setting" >
< label> Include uppercase letters< / label>
< input type= "checkbox" id= "uppercase" checked>
< / div>
< div class = "setting" >
< label> Include lowercase letters< / label>
< input type= "checkbox" id= "lowercase" checked>
< / div>
< div class = "setting" >
< label> Include numbers< / label>
< input type= "checkbox" id= "numbers" checked>
< / div>
< div class = "setting" >
< label> Include symbols< / label>
< input type= "checkbox" id= "symbols" checked>
< / div>
< / div>
< button class = "btn btn-large" id= "generate" >
Generate Password
< / button>
< / div>
< / div>
< / body>
< script>
const resultEl = document. getElementById ( 'result' )
const lengthEl = document. getElementById ( 'length' )
const uppecaseEL = document. getElementById ( 'uppercase' )
const lowercaseEl = document. getElementById ( 'lowercase' )
const numbersEl = document. getElementById ( 'numbers' )
const symbolsEl = document. getElementById ( 'symbols' )
const generateEl = document. getElementById ( 'generate' )
const clipboardEl = document. getElementById ( 'clipboard' )
generateEl. addEventListener ( 'click' , ( ) => {
const length = lengthEl. value * 1
const hasUpper = uppecaseEL. checked
const hasLower = lowercaseEl. checked
const hasNumber = numbersEl. checked
const hasSymbol = symbolsEl. checked
const randomFunc = {
lower : getRandomLower,
upper : getRandomUpper,
number : getRandomNumber,
symbol : getRandomSymbol
}
resultEl. innerText = generatePassword ( hasLower, hasUpper, hasNumber, hasSymbol, length)
function getRandomLower ( ) {
return String. fromCharCode ( Math. floor ( Math. random ( ) * 26 ) + 97 )
}
function getRandomUpper ( ) {
return String. fromCharCode ( Math. floor ( Math. random ( ) * 26 ) + 65 )
}
function getRandomNumber ( ) {
return String. fromCharCode ( Math. floor ( Math. random ( ) * 10 ) + 48 )
}
function getRandomSymbol ( ) {
const symbols = '!@#$%^&*(){}[]=<>/,.'
return symbols[ Math. floor ( Math. random ( ) * symbols. length) ]
}
function generatePassword ( lower, upper, number, symbol, length ) {
let generatedPassword = ''
const typesCount = lower + upper + number + symbol
const typesArr = [ {
lower
} , {
upper
} , {
number
} , {
symbol
} ] . filter ( item => Object. values ( item) [ 0 ] )
if ( typesCount === 0 ) {
return ''
}
for ( let i = 0 ; i < length; i += typesCount) {
typesArr. forEach ( type => {
const funcName = Object. keys ( type) [ 0 ]
generatedPassword += randomFunc[ funcName] ( )
} )
}
const finalPassword = generatedPassword. slice ( 0 , length)
return finalPassword
}
} )
< / script>
< / html>