请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端教程分享前端javascript练习题三

[复制链接]
叶子老师 发表于 2019-10-11 17:37:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员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;i<oli.length;i++){  //遍历给每个li添加事件
    oli.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,因为在点击之前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.onclick=function (){
            oimg.src='images/'+index+'.png';
            index++;
        }
    }
案例
排他功能
一串input
var oinput=document.getElementsByTagName("input");for(var i=0;i<oinput.length;i++){
    oinput.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="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.setAttribute("index",i); //点击之前就把索引保存在span标签中
        ospan.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";
        }
}
好程序员web前端教程http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启