JS experimental case

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>&nbsp;&nbsp;<button id='pause'>pause</button>&nbsp;&nbsp;
<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">&nbsp;&nbsp;<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

Tags: html

Posted by The Jackel on Wed, 11 May 2022 19:31:29 +0300