There are two different methods for loops and while loops

First, the while loop)

Start by simply creating some styles

 <style>
     #box{
     margin:auto;
     display:block;
     text-align: center;
     color:chocolate;
     font-size: 100px;    
     } 
 </style>
   <body>
          <i id="box"></i>
   </body>
Copy the code

Encapsulate a function: Each function execution yields a string of four distinct characters

<script> function fn(){ var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM' var arr = ''; Var n = math.round (math.random ()*51); var n = math.round (math.random ()*51); If (arr.indexof (STR [n]====-1){arr+= STR [n]; } } return arr; } var box = document.getElementById('box') box.innerHTML = fn4(); Box.onclick = function(){box.innerhtml = fn4()} </script>Copy the code

Second (for loop)

Again, encapsulate a function first: each execution of the function yields a string of four different characters

< script > function () {var STR = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM' / / to create an empty string for four captcha var arr = ' '; for(var i = 0; i < 4 ; Var n = var n = math.round (math.random ()*51) // Check whether there are duplicates in the empty string to ensure that the string cannot be repeated if(arr.indexOf(str[n])====-1){ arr += str[n]; }else{ i--; } } return arr; Var box = document.getelementById ('box') box-.innerhtml = fn4(); Box. Onclick = function(){// Update the innerHTML box.Copy the code