JS experimental case
<!-- <html> <head> <script type=" text/ javascript"> function file() { var fso, f1; fso=new ActiveXObject (" Scripting. FileSystemObject") ; f1 = fso. createtextfile("C:\\1. txt ", true) ; f1. write("This is a text document"); f1. Close() ; } </script> </head> <body> <button onclick=' file()' >Create a text file</button> </body> </html> -->
00 word guessing game
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 320px; height: 100px; border: 1px solid #8A8A8A; text-align: center; } </style> </head> <body> <div> <p>0-100 number between, click to start the number guessing game!</p> <input type="button" value="start" id="start" style="width: 80px;" onclick="strat_End()" /> <input type="text" id="input" value="" /> <input type="button" value="confirm" id="confirm" onclick="submit_Input()" /> </div> <script type="text/javascript"> //get element node let confirm = document.getElementById('confirm'); let start = document.getElementById('start'); let input = document.getElementById('input'); let randomNumber; //Click the start or end button to trigger the function function strat_End() { //when the key is started,generate random numbers and store them in randomNumber middle if (start.value == "start") { //generate random numbers randomNumber = Math.floor(Math.random() * 100); //Used to get the generated random number in the console // console.log(randomNumber); //Change the button to the end button after clicking the start button start.value = "Finish"; //When the key is the end button,Will randomNumber value is cleared,Easy game loop } else if (start.value == "Finish") { //clear randomNumber the value of randomNumber = ''; //Check randomNumber Has the value been cleared // console.log(randomNumber); //Convert button to start button,Make the game loopable,button can be clicked again start.value = "start"; } //Return the random number automatically generated by the system for calculation return randomNumber; } //After clicking the confirm button, get the value of the input box and make a judgment function submit_Input() { //If you click Start and then click the OK button,will get the value of the input box if (start.value == "Finish") { //Check if the value of the input box is empty if (input.value != '') { //If the value of the input box is not empty, determine whether the data type of the data input by the user in the input box can be converted to a numeric type if (!isNaN(Number(input.value))) { //It is convenient to save the data entered by the user each time // console.log(input.value); //When the data type can be converted to a number,Save the converted numbers for easy comparison let inputNumber = Number(input.value); //call encapsulated result method,Compare the size of the user input data with the random number generated by the system result(randomNumber, inputNumber) } else { //When the data type entered by the user is incorrect,Notify the user alert("Please enter the correct number!"); //Automatically clear the wrong data entered by the user input.value = ''; } } else { //The user clicked the OK button without entering data,Notify the user window.alert("Please enter the number!"); } } else { //When the user has finished the game or entered the game for the first time, he first entered the data and clicked the confirmation button.,Notify the user alert("You haven't clicked start yet!"); //If the user enters data,Automatically clear the data entered by the user input.value = ''; } } //The encapsulation method compares the data entered by the user with the random number automatically generated by the user function result(randomNumber, inputNumber) { //The input data is larger than the random number if (inputNumber > randomNumber) { //Prompt the user to enter large data window.alert("Enter the numbers!"); //Clear entered data,Easy for users to re-enter input.value = ''; } //Input data is smaller than random number else if (inputNumber < randomNumber) { //Prompt user to enter data too small window.alert("Enter numbers too small!"); //Clear entered data,Easy for users to re-enter input.value = ''; } //Input data equal to random number else { window.alert("You guessed it right!"); //After the user clicks the prompt box to confirm the button, the game automatically ends, and the button is automatically converted into a start button start.value = "start"; } } </script> </body> </html>
00 bouncy ball game
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bouncy ball case</title> <style> *{ margin: 0px; padding: 0px; } #imgid{ width: 128px; height: 128px; position: absolute; top: 0px; left: 0px } #imgid img{ width: 128px; height: 128px; } </style> </head> <body> <div id="imgid"> <img src="img/Basketball.png" alt="#"> </div> <script> imgdemo=document.getElementById('imgid'); screenHeight=document.documentElement.clientHeight;//height of viewable area screenWidth=document.documentElement.clientWidth;//Width of viewable area imgheight=128;//the height of the picture imgWidth=128;//width of the picture Height=screenHeight-imgheight;//difference Width=screenWidth-imgWidth; ys=0;//initial value yv=10;//change value xs=0; xv=10; //set a timer setInterval(function(){ //y axis ys+=yv;//Adds every 10ms if(ys>=Height){ ys=Height; yv=-yv;//set up yv is negative } if(ys<=0){ yv=-yv;//Set to a positive value when reaching the top } //x axis xs+=xv; if(xs>=Width){ xs=Width; xv=-xv; } if(xs<=0){ xv=-xv; } imgdemo.style.top=ys+'px'; imgdemo.style.left=xs+'px'; document.title=ys+"-"+xs; },10); </script> </body> </html>
1. Change pictures
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>light switch</title> </head> <body> <img id="light" src="img/off.gif"> <script> i=0; imgid = document.getElementById("light"); imgid.onclick=function(){ if(i%2==0){ imgid.src="img/on.gif"; //change image }else{ imgid.src="img/off.gif"; //Click to switch back } i++; } </script> </body> </html>
2. Touch the row to change color
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{ font-family: Microsoft Yahei; } .h{ background-color: #ccc; } .h:hover,h2:hover{ background-color: #999; } </style> </head> <body> <script type="text/javascript"> for(i=1;i<8;i++){ if(i%2==0){ document.write("<h2 class='h'>"+i+"</h2><br>"); } else{ document.write('<h2>'+i+'</h2><br>'); } } </script> </body> </html>
3. Multiple selection, inverse selection, selection all
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- <style> *{ font-family: Microsoft Yahei; margin: 0px; padding: 0px; } </style> --> </head> <body> <form action="javascript:"> <p>Choose a hobby:</p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p><label><input type="checkbox" name="">climb mountains</label></p> <p> <button id='all'>select all</button> <button id='noall'>unselect all</button> <button id='unall'>Reverse election</button> </p> </form> </body> <script> all=document.getElementById('all'); noall=document.getElementById('noall'); unall=document.getElementById('unall'); objs=document.getElementsByTagName('input'); //select all all.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=true; } } //unselect all noall.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=false; } } //Reverse election unall.onclick=function(){ for(i=0;i<objs.length;i++){ // if(objs[i].checked){ // objs[i].checked=false; // }else{ // objs[i].checked=true; // } //Ternary operator improvements //objs[i].checked=objs[i].checked?false:true; //unary operator objs[i].checked=!objs[i].checked; } } </script> </html>
4. Stopwatch
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>stopwatch</title> <style> .contain{ width: 200px; height: 50px; background: #000; border-radius: 20px; font-weight: bold; color: #0f0; text-align: center; font-size: 30px; line-height: 50px; } </style> </head> <body> <div class="contain"> <span id="Interval">10:38:00</span> </div> <button id='pause'>pause</button> <button id='action'>start</button> <script> //get date object function getDate(){ dobj=new Date(); hour = dobj.getHours(); //Time minute=dobj.getMinutes(); //Minute second = dobj.getSeconds();//Second str=hour+":"+minute+":"+second; dsq=document.getElementById("Interval");//Obtain id Interval dsq.innerHTML=str; } //Execute once before the button is clicked getDate(); start(); //start function function start(){ sobj=setInterval(getDate,1000); //Set a timer to execute once a second getDate() } //stop function function stop(){ clearInterval(sobj); //clear timer } //close button c = document.getElementById("pause"); c.onclick=function(){ stop(); } //start button action = document.getElementById("action"); action.onclick=function(){ start(); } </script> </body> </html>
5. Form events and mouse events
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>Form events and mouse and keyboard events</title> <style> .txt{ border-style: 2px solid; } </style> </head> <body> <form action="http://www.baidu.com" method="get" id='fid'> <p>username</p> <input class="txt" type="text" name="name" placeholder="please enter user name" id="input" value="java"> <input class="txt" type="text" name="name" value="javascript" id="input2"> <input class="txt" type="text" id='input3'> <input class="txt" type="text" id='input4'> <!-- Drop-down menu --> <select id='s1'> <option placeholder="Select City">Select City</option> <option value="Beijing">Beijing</option> <option value="Taiyuan">Taiyuan</option> <option value="Nanjing">Nanjing</option> <option value="Nanning">Nanning</option> <option value="Tianjin">Tianjin</option> </select><br> <h3>Please confirm your chosen city:<span id="s2"> </span></h3> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> <script type="text/javascript"> inobj=document.getElementById('input'); inobj.onfocus=function(){ this.style.outlineColor="#f00"; } /*inobj.onblur=function(){ val=this.value; if(val.length<6){ alert("Username must have at least 6 characters"); } }*/ //when the value changes inobj.onchange=function(){ alert("don't change my element"); } //when the form element is selected inobj.onselect=function(){ alert('I have been selected'); } //when the form is submitted fidobj=document.getElementById('fid'); fidobj.onsubmit=function(){ r = confirm('Do you want to submit the form?'); if(!r){ return false; } } //when the form resets fidobj.onreset=function(){ r = confirm('Do you want to reset?'); if(!r){ return false; } } //onchange Apply drop-down menu s1obj=document.getElementById('s1'); s2obj=document.getElementById('s2'); s1obj.onchange=function(){ s1val=this.value; s2obj.innerHTML=s1val; } //Get form focus and select all form elements inobj2=document.getElementById('input2'); inobj2.onfocus=function(){ this.select();//select all } //mouse event //mouse in inobj.onmouseenter=function(){ this.value="I love javascript"; } //mouse out inobj.onmouseleave=function(){ this.value="I love java"; } inobj3=document.getElementById('input3'); //mouse move inobj3.onmousemove=function(){ this.style.outlineColor="#f00"; this.value="javascript"; } //keyboard event inobj4=document.getElementById('input4'); //when the keyboard is pressed /*inobj4.onkeydown=function(){ alert('you press it will trigger me '); }*/ //When the keyboard pops up /*inobj4.onkeyup=function(){ //alert('You flip the keyboard and it will trigger me'); val = this.value.toUpperCase();//convert to uppercase this.value=val; }*/ //keyboard press and release a key inobj4.onkeypress=function(){ alert('Hold me down and I'll keep popping up'); } </script> </body> </html>
6. Back to top case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>back to top case</title> <style> .fooer{ position: fixed; bottom: 0px; right:0px; margin-bottom: 15px; margin-right: 15px; } img{ width: 120px; height: 130px; cursor: pointer; } </style> </head> <body> <div class="fooer"> <!-- <a href="#abc"> --> <img src="img/arrive.png" alt="back to the top" id="ar" /> </a> </div> <!-- using the anchor method --> <!-- <a name="abc"></a> --> <!-- sublime Generate quickly h1{$$$$$$$$$}*100 press again tab key--> <h1>0000000000000001</h1> <h1>0000000000000002</h1> <h1>0000000000000003</h1> <h1>0000000000000004</h1> <h1>0000000000000005</h1> <h1>0000000000000006</h1> <h1>0000000000000007</h1> <h1>0000000000000008</h1> <h1>0000000000000009</h1> <h1>0000000000000010</h1> <h1>0000000000000011</h1> <h1>0000000000000012</h1> <h1>0000000000000013</h1> <h1>0000000000000014</h1> <h1>0000000000000015</h1> <h1>0000000000000016</h1> <h1>0000000000000017</h1> <h1>0000000000000018</h1> <h1>0000000000000019</h1> <h1>0000000000000020</h1> <h1>0000000000000021</h1> <h1>0000000000000022</h1> <h1>0000000000000023</h1> <h1>0000000000000024</h1> <h1>0000000000000025</h1> <h1>0000000000000026</h1> <h1>0000000000000027</h1> <h1>0000000000000028</h1> <h1>0000000000000029</h1> <h1>0000000000000030</h1> <h1>0000000000000031</h1> <h1>0000000000000032</h1> <h1>0000000000000033</h1> <h1>0000000000000034</h1> <h1>0000000000000035</h1> <h1>0000000000000036</h1> <h1>0000000000000037</h1> <h1>0000000000000038</h1> <h1>0000000000000039</h1> <h1>0000000000000040</h1> <h1>0000000000000041</h1> <h1>0000000000000042</h1> <h1>0000000000000043</h1> <h1>0000000000000044</h1> <h1>0000000000000045</h1> <h1>0000000000000046</h1> <h1>0000000000000047</h1> <h1>0000000000000048</h1> <h1>0000000000000049</h1> <h1>0000000000000050</h1> <h1>0000000000000051</h1> <h1>0000000000000052</h1> <h1>0000000000000053</h1> <h1>0000000000000054</h1> <h1>0000000000000055</h1> <h1>0000000000000056</h1> <h1>0000000000000057</h1> <h1>0000000000000058</h1> <h1>0000000000000059</h1> <h1>0000000000000060</h1> <h1>0000000000000061</h1> <h1>0000000000000062</h1> <h1>0000000000000063</h1> <h1>0000000000000064</h1> <h1>0000000000000065</h1> <h1>0000000000000066</h1> <h1>0000000000000067</h1> <h1>0000000000000068</h1> <h1>0000000000000069</h1> <h1>0000000000000070</h1> <h1>0000000000000071</h1> <h1>0000000000000072</h1> <h1>0000000000000073</h1> <h1>0000000000000074</h1> <h1>0000000000000075</h1> <h1>0000000000000076</h1> <h1>0000000000000077</h1> <h1>0000000000000078</h1> <h1>0000000000000079</h1> <h1>0000000000000080</h1> <h1>0000000000000081</h1> <h1>0000000000000082</h1> <h1>0000000000000083</h1> <h1>0000000000000084</h1> <h1>0000000000000085</h1> <h1>0000000000000086</h1> <h1>0000000000000087</h1> <h1>0000000000000088</h1> <h1>0000000000000089</h1> <h1>0000000000000090</h1> <h1>0000000000000091</h1> <h1>0000000000000092</h1> <h1>0000000000000093</h1> <h1>0000000000000094</h1> <h1>0000000000000095</h1> <h1>0000000000000096</h1> <h1>0000000000000097</h1> <h1>0000000000000098</h1> <h1>0000000000000099</h1> <h1>0000000000000100</h1> </body> <script> //use js method window.onscroll=function(){ st=document.documentElement.scrollTop;//get the scroll height document.title=st; arobj=document.getElementById('ar'); arobj.onclick=function(){ document.documentElement.scrollTop=0;//Set to 0, back to top } } </script> </html>
7. Regular Expressions
1) Match phone numbers
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Regular match phone number</title> </head> <body> <h1>Regular match phone number</h1> </body> <script> phone='13876457345'; if(phone.match(/^138+(\d{8})+$/g)){ alert('Phone match is successful'); }else{ alert('match failed'); } </script> </html>
2) Match mailbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Regular email format</title> </head> <body> <h1>Regular matching email</h1> </body> <script type="text/javascript"> email='1363f@qq.com' if(email.match(/^\w+@\w+\.\w+$/i)){ alert('Email format is correct'); }else{ alert('Email format is incorrect'); } </script> </html>
3) Replacement
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>replace</title> </head> <body> <h1>replace</h1> <script> //Have'2019/7/15'Change to 2019-7-15 date='2019/7/15'; time=date.replace(/(\d+)\/+(\d+)\/+(\d)/g,"$1-$2-$3"); alert(time); </script> </body> </html>
8. Closures
Definition of closure: There is a function that returns inside a function, the inner function uses the variable of the outer function, and returns through returnf, the inner function is thrown to the outside, resulting in the variable not being released and recycled. (equivalent to global variables).
Simple application of closure switching pictures
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box>span{ display: inline-block; width: 100px; background: #faa; height: 50px; color:#fff; font-size:24px; text-align: center; line-height: 50px; } #box>span:hover{ background: orange; } img{ display: none; } </style> </head> <body> <div id="box"> <span>figure 1</span> <span>figure 2</span> <span>image 3</span> </div> <img src="path" alt="figure 1" > <img src="path" alt="figure 2" > <img src="path" alt="image 3" > <script type="text/javascript"> window.onload=function(){ //Obtain box son var boxs=document.getElementById('box').children; for(var i=0;i<boxs.length;i++){ boxs[i].onclick=function(){ var k=i; return function(){ var imgobj=document.getElementsByTagName('img'); //hide all pictures for(var j=0;j<imgobj.length;j++){ imgobj[j].style.display='none'; } //Display the currently clicked image imgobj[k].style.display='block'; }; }(); } } </script> </body> </html>
9. Control the picture to move around
Get the coordinates of the mouse movement through event.clientX and event.clientY
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>moving pictures</title> <style> img{ position: absolute; top:0px; left: 0px; } </style> </head> <body> <img id="light" src="img/69.png"> <script> imgobj=document.getElementById('light'); //Mouse movement changes the title //document.onmousemove=function(){ // document.title='How are you'; //} //Move the mouse to display pixels //document.onmousemove=function(event){ // x=event.clientX; // y=event.clientY; // document.title=x+"-"+y; //} //moving pictures document.onmousemove=function(event){ x=event.clientX; y=event.clientY; imgobj.style.top=x+"px"; imgobj.style.left=y+"px"; } </script> </body> </html>
10.ajax
ajax handles the communication between front-end and back-end data. It is a technology that does not need to load the entire page to refresh part of the web page. At the same time, it is also a way to achieve asynchronous like timers and frameworks. When the client requests ajax, ajax processing data may fail, so there is a failure state, ajax is more clear in the jquery framework.
Steps to write ajax in js
1. Declare an xhr object
2. Open the transmitter open
3. Declare request headers
4. Launch (transmitter launch)
5. Processing status (waiting for ajax processing)
Simulate request for Baidu's ajax, specific code implementation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> </div> <script type="text/javascript"> var box = document.getElementById('box'); // 1.statement var xhr=new XMLHttpRequest(); // 2.launcher(Parameter 1: The way to send data, Parameter 2: Interface address, Parameter 3: false(Synchronize),true(asynchronous)) xhr.open('get','http://wwww.baidu.com',true); // 3.Set the request header type //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 4.send data xhr.send(); // 5.state box.innerHTML='Loading...' xhr.onreadystatechange=function(){ setInterval(function(){ if(xhr.status==200&&xhr.readyState==4){ //(readyState)Five readiness states 0:not sent 1:Sent 2:received 3:Processing 4:processed //(status)Three result states 200:success 0:Failed 404:server not found box.innerHTML='loaded' } },1000); } </script> </body> </html>
By requesting Baidu's interface, simulate the request time. If the browser (Google) has an error like: No 'Access-Control-Allow-Origin', it means that the browser needs to be downgraded
Click the right mouse button of the browser and properties: add --disable-web-security --user-data-dir=c:\
c represents the drive letter where the browser is located