The concrete implementation of JavaScript exclusive thinking
|
In the previous blog, Xiao Xiong updated the methods of related operation elements, but if there are the same group of elements, and we want a certain element to achieve a certain style, what should we do? The idea of circular exclusion comes into play here.
It can be simply understood as:
It should be noted that the order here cannot be reversed. 1. Let's create five buttons first.
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
2. Get elements
<script>
//Get the element var btn = document.getElementsByTagName('button');
console.log(btn);
</script>
3. Loop through the print buttons
for(var i =0; i<btn.length;i++){
console.log(btn[i]
}
4. Add a click event to each button in the first
btn[i].onclick = function(){
for(var j =0;j<btn.length;j++){
btn[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'blue';
}
The final effect is:
Let’s take a look at some examples! 1. Implement simple tab bar switching functionThe code is as follows:
<!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>
<!-- Write a complete tab switching effect page-->
<style>
* {
margin: 0;
padding: 0;
}
.box_1 {
width: 800px;
height: 400px;
background-color:rgb(141, 169, 173);
margin: 100px auto;
}
ul {
position:absolute;
top: 64px;
left:220px;
height: 35px;
line-height: 35px;
text-align: center;
}
li {
width: 80px;
height: 35px;
list-style: none;
float: left;
border: 1px solid #ccc;
margin-left: 2px;
border-top-left-radius: 6px;
border-top-right-radius: 6px ;
}
.li1 {
font-weight: 700;
color: black;
border-bottom: none;
background-color: skyblue;
cursor: pointer;
}
.item{
display:none;
}
</style>
</head>
<body>
<div class = 'box'>
<ul>
<li class='li1'>Tag 1</li>
<li>Label 2</li>
<li class = 'li2' style="width:150px">Label with adaptive width</li>
</ul>
<div class="box_1">
<div class="item" style = "display:block">Content of the first tag</div>
<div class="item">The content of the second tag</div>
<div class="item">Contents of adaptive width labels</div>
</div>
</div>
<script>
var li = document.querySelectorAll('li');
console.log(li);
var item = document.querySelectorAll('.item');
console.log(item);
for(var i =0;i<li.length;i++){
li[i].setAttribute('index',i);
li[i].onclick = function(){
for(var j =0;j<item.length;j++){
li[j].className = '';
console.log(li[i]);
}
this.className = 'li1';
var index = this.getAttribute('index');
console.log(index);
for(var k = 0; k < item.length; k++) {
item[k].style.display='none';
}
item[index].style.display = 'block';
}
}
</script>
</body>
</html>
The effect is:
2. Implement a dynamic clickable survey result display page, requiring that the corresponding progress bar increases when the check box option is clicked.
<!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>
.box{
width: 700px;
margin: 10px auto;
}
.bar {
width:200px;
height: 15px;
padding: 1px;
background-color: rgb(250, 249, 249);
}
.bar_in{
width:7%;
height:100%;
transition: width 0.5s;
}
.bar_in1 {
background-color: orange;
}
.bar_in2{
background-color: yellow;
}
.bar_in3{
background-color: brown;
}
.bar_in4{
background-color: chocolate;
}
.bar_in5{
background-color: green;
}
.bar_in6{
background-color: blue;
}
.bar_in7{
background-color: cornflowerblue;
}
.bar_in8{
background-color: deeppink;
}
.bar_in9{
background-color: rgb(171, 204, 23);
}
.bar_in10{
background-color: red;
}
tr{
width:800px;
height: 40px;
}
td{
font-size: 14px;
width: 200px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
tr #no1{
width: 300px;
}
.header{
font-size: 16px;
font-weight: 700;
}
.t1 {
width: 500px;
}
span{
color:red;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td colspan="4" class= 'header'>Are you moved by the "most beautiful rural female teacher"? <span>(required)</span></td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" >I am very touched, she is very beautiful</td>
<td>
<div class="bar">
<div class="bar_in bar_in1">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">I am very touched. She is very beautiful</td>
<td>
<div class="bar">
<div class="bar_in bar_in2">
</div>
</div>
</td>
<td>335733(96.16%)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">No feeling, there are many such things</td>
<td>
<div class="bar">
<div class="bar_in bar_in3">
</div>
</div>
</td>
<td>4997(1.43%)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">Not moved, maybe it's hype</td>
<td>
<div class="bar">
<div class="bar_in bar_in4">
</div>
</div>
</td>
<td>8398(2.41%)</td>
</tr>
</table>
<table>
<tr>
<td colspan="3" class= 'header'>What would you be willing to do for Li Ling and her school? <span>(required)</span></td>
</tr>
<tr>
<td class="t1"><input type="checkbox" name="" id="" >Donate books to them so that they can have a reading room</td>
<td>
<div class="bar">
<div class="bar_in bar_in5">
</div>
</div>
</td>
<td>163002(45.89%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Donate money to them so they can repair the school</td>
<td>
<div class="bar">
<div class="bar_in bar_in6">
</div>
</div>
</td>
<td>52692(15.09%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Tell your friends about Li Ling's story</td>
<td>
<div class="bar">
<div class="bar_in bar_in7">
</div>
</div>
</td>
<td>118533(33.96%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Do nothing</td>
<td>
<div class="bar">
<div class="bar_in bar_in8">
</div>
</div>
</td>
<td>14881(4.26%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Do nothing</td>
<td>
<div class="bar">
<div class="bar_in bar_in9">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Do nothing</td>
<td>
<div class="bar">
<div class="bar_in bar_in10">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
</table>
</div>
<script>
var input = document.querySelectorAll('input');
var barin = document.querySelectorAll('.bar_in');
var w = [10,98,30,25,50,22,38,30,34,20,20];
console.log(typeof(5+'%'));
console.log(barin);
console.log(input);
for(var i =0;i<input.length;i++){
input[i].setAttribute('index',i)
input[i].onclick = function(){
var index = this.getAttribute('index')
barin[index].style.width= w[index]+'%';
}
}
</script>
</body>
</html>
The effect is:
This is the end of this article about the specific implementation of JavaScript exclusive ideas. For more relevant JavaScript exclusive content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Example code of CSS layout at both ends (using parent's negative margin)
Recommend
MySQL 8.0.11 Installation Tutorial under Windows
This article records the installation tutorial of...
Form submission page refresh does not jump
1. Design source code Copy code The code is as fol...
How to decompress multiple files using the unzip command in Linux
Solution to the problem that there is no unzip co...
How to solve the phantom read problem in MySQL
Table of contents Preface 1. What is phantom read...
Detailed explanation of nginx upstream configuration and function
Configuration Example upstream backend { server b...
MySQL 8.0.19 installation detailed tutorial (windows 64 bit)
Table of contents Initialize MySQL Install MySQL ...
Simple example of adding and removing HTML nodes
<br />Simple example of adding and removing ...
CentOS configures local yum source/Alibaba Cloud yum source/163yuan source and configures the priority of yum source
1. Use Centos image to build local yum source Sin...
MySQL multi-table join query example explanation
In actual projects, there are relationships betwe...
Detailed tutorial on compiling and installing MySQL 5.7.24 on CentOS7
Table of contents Install Dependencies Install bo...
Detailed explanation of the difference between run/cmd/entrypoint in docker
In Dockerfile, run, cmd, and entrypoint can all b...
Summary of vue's webpack -v error solution
Xiaobai learned about Vue, then learned about web...
Implementation of installing and uninstalling CUDA and CUDNN in Ubuntu
Table of contents Preface Install the graphics dr...
Detailed explanation of the code for implementing six sieve styles using HTML grid layout
First, attach the code below the effect diagram &...
Native js to realize a simple snake game
This article shares the specific code of js to im...