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
WeChat applet realizes taking photos and selecting pictures from albums
This article shares the specific code for WeChat ...
CSS uses radial-gradient to implement coupon styles
This article will introduce how to use radial-gra...
SystemC environment configuration method under Linux system
The following is the configuration method under c...
Detailed explanation of multiple implementation methods of Mysql counting by conditions
Recently, I was adding a series of statistical fu...
A detailed introduction to Linux file permissions
The excellence of Linux lies in its multi-user, m...
Lombok implementation JSR-269
Preface Introduction Lombok is a handy tool, just...
Summary of CSS gradient effects (linear-gradient and radial-gradient)
Linear-gradient background-image: linear-gradient...
Design: A willful designer
<br />Years of professional art design educa...
Detailed explanation of configuring keepalived log to another path in centos7
Keepalived installation: cd <keepalived_source...
html+css+js to realize the function of photo preview and upload picture
Preface: When we are making web pages, we often n...
IE8 browser will be fully compatible with Web page standards
<br />According to foreign media reports, in...
Vue SPA first screen optimization solution
Table of contents Preface optimization SSR Import...
How to install MySQL and MariaDB in Docker
Relationship between MySQL and MariaDB MariaDB da...
Summary of Vue 3 custom directive development
What is a directive? Both Angular and Vue have th...
How to use Docker to build a pypi private repository
1. Construction 1. Prepare htpasswd.txt file The ...