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

前端 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[i].onclick=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].onclick=function (){ oimg.src='images/'+index+'.png'; index++; } }

案例
排他功能
一串input
var oinput=document.getElementsByTagName("input");for(var i=0;i

oinput[i].onclick=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.onclick=function(){

//判断是否应用了类样式 if(odiv.className!="cls"){ odiv.className="cls"; //当有多个类名时需要注意 留着不需要修改的 }else{ odiv.className="dd"; }};

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

<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 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].onclick=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"; } }