好程序员web前端分享前端javascript练习题三,简易年历
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;ioli[i].onclick=function(){
for(var j=0;joli[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;ioli[i].onclick=function (){
oimg.src='images/'+index+'.png';
index++;
}
}
案例
排他功能
一串input
var oinput=document.getElementsByTagName("input");for(var i=0;ioinput[i].onclick=function(){
//先让所有的变成原来的样子
for(var j=0;joinput[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再让它显示



体育
娱乐
新闻
综合



  • 我是体育模块

  • 我是娱乐模块

  • 我是新闻模块

  • 我是综合模块