Front-end javascript exercises-simple calendar and tab switching

Front-end javascript exercises-simple calendar and tab switching
Simple calendar
eg1: Output the values in the array
Styles can be changed directly, or class names can be changed.
var okuang=document.getElementById("kuang");var oli=document.getElementsByTagName("li");var arr=[11,22,33,44,55];var index=0; //Define a variable to save the index value for (var I = 0;

oli[i].onclick=function(){
    for(var j=0;j<oli.length;j++){  //Exclusive function
        oli[j].style.backgroundColor="#666";
        oli[j].style.color="#fff";
    }
    okuang.innerHTML=arr[index];  //You can't use arr[i], because the for has been executed before clicking, and I is the number of elements in oli.
    this.style.backgroundColor="red";
    this.style.color="#000";
    index++;
}}

Analysis:
The for loop is executed when the page is loaded.
// for(var k=0;k<5;k++){
// }
// console.log(k);
// Events are executed when triggered
tab handover case
Click the button to change the picture:
Var oli = document. getElements ByTagName ("li"); get the Li label var oimg = document. getElements ByTagName ("img") [0]; / get the picture label var index=0; / store the index value because for has been executed before clicking the button

for(var i=0;i<oli.length;i++){  
    oli[i].onclick=function (){
        oimg.src='images/'+index+'.png';
        index++;
    }
}

case
Exclusive function
A string of input
var oinput=document.getElementsByTagName("input");for(var i=0;i

oinput[i].onclick=function(){
    //Let's make everything the same.
    for(var j=0;j<oinput.length;j++){
        oinput[j].value="A sunny day";
        oinput[j].style.background="#ccc";
    }
    //Reset the current style
    this.value="Overcast";
    this.style.background="red";
}}

Modifying Styles by Class Name
var oinput=document.getElementById("btn");var odiv=document.getElementById("dv");
oinput.onclick=function(){

//Determine whether class styles have been applied
if(odiv.className!="cls"){
    odiv.className="cls";  //When you have more than one class name, you need to be careful to keep something that doesn't need to be modified.
}else{
    odiv.className="dd";
}};

tab switching
The main thing is the application of exclusive function, the corresponding block below, select hide, find the corresponding li when clicking on span and let it display.

<div class="hd">
    <span class="current">Sports</span>
    <span>entertainment</span>
    <span>Journalism</span>
    <span>comprehensive</span>
</div>
<div class="bd">
    <ul>
        <li class="current">I'm a sports module.</li>
        <li>I am an entertainment module.</li>
        <li>I'm the news module.</li>
        <li>I am an integrated module.</li>
    </ul>
</div></div><script>

var obox=document.getElementById("box");

var hd=obox.getElementsByTagName("div")[0];
var bd=obox.getElementsByTagName("div")[1];
var oli=bd.getElementsByTagName("li");
var ospan=hd.getElementsByTagName("span");
for(var i=0;i<ospan.length;i++){
    ospan[i].setAttribute("index",i); //Save the index in the span tag before clicking
    ospan[i].onclick=function(){
        //Remove all span styles
        for(var j=0;j<ospan.length;j++){
            ospan[j].className="";
            //ospan[j].removeAttribute("class");
        }
       // Set the current span class style
    this.className="current";

       //Hide all the ground li first
       for(var k=0;k<oli.length;k++){
            oli[k].removeAttribute("class");
       }
        //Gets the index value currently clicked
        var index=this.getAttribute("index");
        //The li display corresponding to the current click on span
        oli[index].className="current";
    }
}

Tags: Javascript

Posted on Fri, 11 Oct 2019 10:39:31 -0700 by feddie1984