前端 javascript 练习题 -简易年历及tab切换

简易年历
eg1：将数组中的值输出

改变样式可以直接改样式，也可以修改类名

var okuang=document.getElementById("kuang");var oli=document.getElementsByTagName("li");var arr=[11,22,33,44,55];var index=0;   //定义一个变量用来保存索引值for(var i=0;i<oli.length;i++){  //遍历给每个li添加事件

    oli[i].οnclick=function(){

        for(var j=0;j<oli.length;j++){  //排他功能

            oli[j].style.backgroundColor="#666";

            oli[j].style.color="#fff";

        }

        okuang.innerHTML=arr[index];  //此时不能用arr[i]，因为在点击之前for已经执行完了，此时i为oli的元素个数值

        this.style.backgroundColor="red";

        this.style.color="#000";

        index++;

    }}

解析：
for循环是在页面加载的时候,执行完毕了

//  for(var k=0;k<5;k++){

//  }

//  console.log(k);

  //事件是在触发的时候,执行的

tab切换案例
点击按钮换图片:

var oli=document.getElementsByTagName("li"); //获取li标签var oimg=document.getElementsByTagName("img")[0];  //获取图片标签var index=0;  //存储索引值，因为在点击按钮前for已经执行完了

    for(var i=0;i<oli.length;i++){  

        oli[i].οnclick=function (){

            oimg.src='images/'+index+'.png';

            index++;

        }

    }

案例
排他功能
一串input

var oinput=document.getElementsByTagName("input");for(var i=0;i<oinput.length;i++){

    oinput[i].οnclick=function(){

        //先让所有的变成原来的样子

        for(var j=0;j<oinput.length;j++){

            oinput[j].value="晴天";

            oinput[j].style.background="#ccc";

        }

        //再设置当前的样式

        this.value="阴天";

        this.style.background="red";

    }}

通过类名修改样式

var oinput=document.getElementById("btn");var odiv=document.getElementById("dv");

oinput.οnclick=function(){

    //判断是否应用了类样式

    if(odiv.className!="cls"){

        odiv.className="cls";  //当有多个类名时需要注意  留着不需要修改的

    }else{

        odiv.className="dd";

    }};

tab切换
主要就是排他功能的应用，下面对应的块，选隐藏，找出点击span时对应的li再让它显示

<div class="box" id="box">

    <div class="hd">

        <span class="current">体育</span>

        <span>娱乐</span>

        <span>新闻</span>

        <span>综合</span>

    </div>

    <div class="bd">

        <ul>

            <li class="current">我是体育模块</li>

            <li>我是娱乐模块</li>

            <li>我是新闻模块</li>

            <li>我是综合模块</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); //点击之前就把索引保存在span标签中

        ospan[i].οnclick=function(){

            //将所有的span样式移除

            for(var j=0;j<ospan.length;j++){

                ospan[j].className="";

                //ospan[j].removeAttribute("class");

            }

           // 设置当前的span类样式

        this.className="current";

 

           //先将所有地li隐藏

           for(var k=0;k<oli.length;k++){

                oli[k].removeAttribute("class");

           }

            //获取当前被点击的索引值

            var index=this.getAttribute("index");

            //当前点击span对应的li显示

            oli[index].className="current";

        }

    }