Click event case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>Start roll call</button>
\t\t
\t\t
<script>
//The requirements are as follows: Click the button to display back and forth to start or stop roll call.
//Idea: Get the button label, and then assign a click event to it.
//Then judge the value inside the button label. Make the judgment based on the value. Then modify it/
\t\t\t
var btn = document.getElementsByTagName("button")[0];
\t\t\t
\t\t\t
btn.onclick = function(){
//Get the text value of the button.
var text = btn.innerText;
if(text=="Start naming"){
btn.innerText = "Stop calling names"
}else{
btn.innerText = "Start naming";
}
}
\t\t\t
\t\t\t
</script>
</body>
\t
</html>
Double-click event case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 230px;
height: 230px;
text-align: center;
border: 1px solid black;
display: none;
}
</style>
\t\t
</head>
<body>
<button>Double-click to open the login page</button>
\t\t
<div>
<h3>Login pop-up window! ! </h3>
Account<input type="text" placeholder="Please enter your account number" /><br>
Password<input type="password" placeholder="Please enter your password" /><br><br><br>
<button>Login</button> <button>Return</button>
</div>
\t\t
\t\t
\t\t
<script>
\t\t\t
//Thinking: Why do pop-ups in browsers look so good?
//But the three pop-up windows we studied are uglier than the other
//Actually, browser pop-ups are not real pop-ups.
//Idea: It is a div page drawn in advance. Then hide it. When the user triggers it, it will pop up to achieve the effect of a pop-up window.
\t\t\t
\t\t\t
//Requirement: double-click to open the login page
document.getElementsByTagName("button")[0].ondblclick = function(){
\t\t\t\t
document.getElementsByTagName("div")[0].style.display = "block";
\t\t\t\t
}
\t\t\t
document.getElementsByTagName("button")[2].onclick = function(){
document.getElementsByTagName("div")[0].style.display = "none";
}
</script>
\t\t
</body>
</html>
Mouse in and out events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a{
width: 200px;
height: 200px;
}
.b{
width: 400px;
height: 400px;
}
\t\t\t
\t\t\t
</style>
</head>
<body>
\t\t
<img class="a" src="img/1.PNG">
\t\t
<script>
//Requirements: Move the mouse into the picture, enlarge the picture, move the mouse out of the picture, restore the picture
var img = document.getElementsByTagName("img")[0];
\t\t\t
img.onmouseover = function(){
// img.style.width = "400px";
// img.style.height = "400px";
img.className = "b";
}
\t\t\t
img.onmouseout = function(){
// img.style.width = "200px";
// img.style.height = "200px";
img.className = "a";
}
\t\t\t
</script>
\t\t
</body>
</html>
Demo keyboard input events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Lowercase letters: <input type="text" id="a" /><br>
Capital letters: <input type="text" id="b" />
\t\t
<script>
//Enter lowercase letters in the first text box. The text box below outputs the corresponding uppercase letters by default.
\t\t\t
//Idea: Add a keyboard input event to the first text box (an event is triggered every time the keyboard is tapped).
//Get the value of the first text box. Then assign it to the second text box
\t\t\t
var i1 = document.getElementById("a");
var i2 = document.getElementById("b");
i1.onkeyup = function(){
i2.value = i1.value.toUpperCase();
}
\t\t\t
</script>
\t\t
</body>
</html>
Demonstrates focus acquisition and focus loss events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Account: <input type="text" id="a" /> <span id="c"></span><br>
\t\t
<script>
var username = document.getElementById("a");
var password = document.getElementById("a");
var tip1 = document.getElementById("c");
var tip2 = document.getElementById("d");
\t\t\t
//Requirement: After entering the account number, prompt the account input rules.
//The idea is to add a focus event to the text box and generate a prompt for the first span tag.
username.onfocus = function(){
tip1.innerText = "The length of the account must be between 6-10";
tip1.style.color = "red";
}
\t\t\t
//Requirement 2: After the input is completed, it is necessary to determine whether the account meets the format.
//Idea: judge after losing focus.
username.onblur = function(){
var username123 = username.value;
if (username123.length >=6 & amp; & amp; username123.length<=10) {
tip1.innerText = "√";
tip1.style.color = "green";
} else{
tip1.innerText = "X";
tip1.style.color = "red";
}
}
\t\t\t
\t\t\t
</script>
\t\t
</body>
</html>
Review form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
Form: form
Application scenarios: User login, user registration, adding product information
\t\t\t
Anyone who needs to package and send multiple data can use forms.
\t\t\t
Three major attributes of form:
\t\t\t
A.action indicates who the form is submitted to. Generally put a URL address, where # means not to submit
B.method indicates the form submission method: there are only 2 choices, 1.get 2.post. The default is get.
\t\t\t
\t\t\t
The differences are as follows:
Get is fast. Because it can only carry very little data. It is not safe and all form data will be displayed in the URL address. It’s client-side behavior (only relies on the browser)
\t\t\t\t
Post is slow: because it can carry theoretically infinite data. Safety. All form data will not be displayed in the url address. It is a server-side behavior (depends on the server)
\t\t\t
C.enctype: Indicates what type of form the form is.
Default value 1: application/x-www-form-urlencoded represents a normal form. Therefore: most forms do not need to be added.
Optional value 2: multipart/form-data represents the file upload form. You can only use this if you need to upload files.
Optional value 3: text/plain indicates large text type, which is often used for nationalized transmission of emails.
\t\t\t
\t\t\t
How to package the form and send it to the action path:
Via submit button: The following three methods are available. The third type is generally used.
1 <button>Submit (Login)</button>
2 <button type="submit">Log in to submit</button>
3 <input type="submit" value="Login Submit" />
\t\t\t
\t\t\t
How to get the data inside the form in the background.
Just add the name attribute to the label element inside the form. (Must be added, otherwise the value cannot be obtained)
The background only needs to get the value based on the name.
\t\t\t
\t\t\t
\t\t\t
Cross talk: error-prone things about button tags.
\t\t\t
The complete writing method of button tag:
<button type="xxx">Button</button>
There are three values for type:
1.submit default value represents the submit button
2.button is optional and represents a normal button
3.reset is optional to represent the reset button
\t\t\t
The default value of the type attribute in the button tag is submit. If the tag is placed on the form form, the form will be submitted.
But if it's not there, it's just an ordinary button.
\t\t\t
\t\t\t
\t\t\t
\t\t\t
\t\t\t
-->
\t\t
<form action="#" method="post" enctype="text/plain" >
Account: <input type="text" id="a" name="username" /><br>
Password: <input type="password" id="b" name="password" /><br>
<input type="submit" value="Login to submit" />
</form>
\t\t
</body>
</html>
Demo form submission event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="f" action="#" method="post">
Account: <input type="text" id="a" /> <span id="c"></span><br>
Password: <input type="password" id="b" /> <span id="d"></span><br>
<input type="submit" value="Login" />
</form>
<script>
var username = document.getElementById("a");
var password = document.getElementById("b");
var tip1 = document.getElementById("c");
var tip2 = document.getElementById("d");
var f = document.getElementById("f");
\t\t\t
\t\t\t
//Requirement: After entering the account number, prompt the account input rules.
//The idea is to add a focus event to the text box and generate a prompt for the first span tag.
username.onfocus = function(){
tip1.innerText = "The length of the account must be between 6-10";
tip1.style.color = "red";
}
\t\t\t
//Requirement 2: After the input is completed, it is necessary to determine whether the account meets the format.
//Idea: judge after losing focus.
username.onblur = function(){
var username123 = username.value;
if (username123.length >=6 & amp; & amp; username123.length<=10) {
tip1.innerText = "√";
tip1.style.color = "green";
} else{
tip1.innerText = "X";
tip1.style.color = "red";
}
}
\t\t\t
password.onfocus = function(){
tip2.innerText = "The length of the password must be between 6-10";
tip2.style.color = "red";
}
\t\t\t
//Requirement 2: After the input is completed, it is necessary to determine whether the account meets the format.
//Idea: judge after losing focus.
password.onblur = function(){
var password123 = password.value;
if (password123.length >=6 & amp; & amp; password123.length<=10) {
tip2.innerText = "√";
tip2.style.color = "green";
} else{
tip2.innerText = "X";
tip2.style.color = "red";
}
}
\t\t\t
\t\t\t
\t\t\t
//onsubmit is different from other events. The default value that needs to be returned is return true to indicate submission and return false to indicate not to submit.
f.onsubmit = function(){
\t\t\t\t
if(tip1.innerText=="√" & amp; & amp; tip2.innerText=="√" ){
return true;
}else{
alert("Please write as required");
return false;
}
}
\t\t\t
\t\t\t
</script>
\t\t
</body>
</html>
Drop-down menu event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="a">
<option>Bank of China</option>
<option>China Construction Bank</option>
<option>Bank of Communications</option>
</select>
\t\t
<select id="b">
<option>China Bank Card Number 111</option>
<option>China Construction Bank Card Number 222</option>
<option>Bank of Communications card number 333</option>
</select>
\t\t
<script>
// onchange event: Generally it only affects the drop-down box. Click the drop-down box and change the value.
//Applicable scenarios: Bank card interaction. Address bar linkage
\t\t\t
var a = document.getElementById("a");
var b = document.getElementById("b");
\t\t\t
\t\t\t
//Need to realize the linkage effect of two drop-down boxes.
//Idea: Add an onchange event to the first drop-down box
//Idea: Get the element (subscript) of the first drop-down box
//Idea: Just assign the subscript of the previous step's idea to the second drop-down box
a.onchange= function(){
//How to get the subscript of the drop-down box
// console.log(a.selectedIndex);
b.selectedIndex = a.selectedIndex;
}
\t\t\t
b.onchange= function(){
//How to get the subscript of the drop-down box
// console.log(a.selectedIndex);
a.selectedIndex = b.selectedIndex;
}
</script>
\t\t
\t\t
</body>
</html>
Modify element attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.PNG" />
<button>Replace image</button>
\t\t
<script>
//html elements have many attributes.
//For example id class name src href
\t\t\t
document.getElementsByTagName("button")[0].onclick = function(){
//Change the aaa attribute of the xxx element to bbb
//xxx.setAttribute("aaa","bbb");
\t\t\t\t
//var a = xxx.getAttribute("aaa"); represents the value of the aaa attribute of xxx
\t\t\t\t
// document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
\t\t\t\t
\t\t\t\t
if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){
document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
}else{
document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
}
\t\t\t\t
\t\t\t\t
}
\t\t\t
\t\t\t
</script>
</body>
</html>
Simplified version of carousel image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: 100px;
height: 100px;
}
</style>
\t\t
</head>
<body>
<img src="img/1.PNG" />
\t\t
\t\t
\t\t
<script>
//As long as there is a need: If you have to do something every other event, you need to think of using a timer.
\t\t\t
var img = document.getElementsByTagName("img")[0];
//Replace pictures, but the file names of pictures may not be regular.
//So you can save all the file names and path names of the pictures into the array. The array is regular.
var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];
\t\t\t
var index = 1;
setInterval(function(){
\t\t\t\t
img.setAttribute("src",src_1[index]);
index + + ;
if(index==4){
index = 0;
}
},1000);
\t\t\t
</script>
\t\t
</body>
</html>