The roll call system and array elements find maximum and minimum values ​​for sorting of objects

I. Roll call system

1. Write the basic elements first, here is a brief write up

???
Start

The initial effect with no styles added is as follows:

2. In order to look better, add some CSS styles below

 .box{width: 200px;margin: auto;margin-top: 20px;}.box div{background: red;color: #fff;width: 100%;height: 80px;text-align: center;line-height: 80px;font-size: 18px;}.box button{width: 100%;height: 35px;text-align: center;margin-top: 10px;border: 0px;background: blue;color: #fff;}

The effect after adding is as follows

3. Next, click "Start" to realize the roll call system. The setinterval() timer is mainly used to realize the effect of automatic click, and the "start" and "pause" of the button are realized by marking true and false with flag.

 var realnames = ["Zhang San", "Li Si", "Zhao Liu", "Wang Wu", "Lu Qi", "Wang Erma", "Dogleft"];var realname = document.getElementById("realname");var flag = false;var btn = document.getElementById("btn");function call(){flag = !flag;if(flag){window.myInter = setInterval(function(){var num = Math.floor(Math.random()*realnames.length);realname.innerHTML = realnames[num];},100);btn.innerText = "Pause";}else{clearInterval(window.myInter);//Clear the timerbtn.innerText = "Start";}}

The final effect is as follows

Second, the array elements are the elements of the object sorting to find the maximum and minimum age (two methods)

The arrays that need to find the maximum and minimum values ​​are as follows

var data = [{realname:"Zhang San",age:19},{realname:"Wang 5 1",age:128},{realname:"Wang Wu 2",age:128},{realname:"Li Si",age:20},{realname:"Wang Wu",age:28},{realname:"Zhao Liu",age:19},];

Method 1: Use the sort() method

data.sort(function(a,b){return a.age - b.age;});console.log(data);var min = data[0];var max = data[data.length-1];

The results are as follows

At this point, you can see that there are multiple maximum and minimum values, and you need to output them all

for(var i=0;i

The effect is as follows

Method 2: Use a for loop to sort.Assuming that the age value of the first element is the largest (minimum), traverse each element in the array, and replace the initial value when there is an age value greater than the initial value.

 var arrmax = [];var arrmin = [];var max = data[0];var min = data[0];for(var i=0; idata[i].age) {min = data[i];}}//Same as method 1 to get multiple maximum and minimum valuesfor(var i=0;i

Note: If you have any questions, please leave a comment