js测试有效的作业之dom

最新推荐文章于 2022-11-04 13:00:00 发布

k2460761639

最新推荐文章于 2022-11-04 13:00:00 发布

阅读量156

点赞数

分类专栏： js作业文章标签： javascript dom

本文链接：https://blog.csdn.net/k2460761639/article/details/107608448

版权

js作业专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.选项卡的思路

<body>
    <div>
        <div>
        <button style=" color: black; ">电影票</button>
        <button style="color: red;">飞度</button>
        <button style="color: blue;">致梦想</button>
        <button style="color: orange;">海涛</button>
        </div>
        <div>
           <ul>
               <li>111</li>
           </ul>
           <ul>
               <li>222</li>
           </ul>
           <ul>
               <li>333</li>
           </ul>
           <ul>
               <li>444</li>
           </ul>
        </div>
        </div>
        
    <script>
        /* 
            点击 某个按钮，让某个按钮对应的 ul 显示，其他的ul 都隐藏

            1 -找到所有的按钮 ，并循环
            2 -给按钮添加点击事件 
            3 -点击的时候 获取的对应的按钮  获取按钮对应的下标   
            4 - 所有的都变为黑   点击的按钮颜色变为红色  
            5 - 其他的所有ul 都隐藏 按钮对应ul显示 
        */
        // 1-
        let btns = document.querySelectorAll('button')
        // 2-
        // btns.forEach(function(btn,i){
        //     //btn 数组中每一个按钮 
        //     // i  按钮对应的下标

        // }) 

        let oUls = document.querySelectorAll('ul')

        //1 -
        for(let i=0;i<btns.length;i++){
            let btn = btns[i]// 每一个按钮
            i//按钮对应的下标 

            //2 - 
            btn.onclick = function(){

                console.log('点击了按钮')
                //3-
                console.log(this,btn) //点击谁 this就是谁  
                console.log(i)// 按钮对应的下标 0  1 2
                //按钮对应的ul  
                console.log(oUls[i])

                //4-所有的按钮都变为黑   点击的按钮颜色变为红色 
                for(let j=0;j<btns.length;j++){
                    btns[j].style.color = 'black'
                    //5- 让所有的ul隐藏
                    oUls[j].style.display = 'none'
                }
                // btn.style.color = 'red'
                this.style.color = 'red'

                // 5-按钮对应的ul显示 
                oUls[i].style.display = 'block'
            }
        }
    
    </script>
</body>

2.简易日历

<style>
        * { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }

    </style>

<body>
    <div id="tab" class="calendar">

        <ul id="box">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li ><h2>2</h2><p>FER</p></li>
            <li ><h2>3</h2><p>MAR</p></li>
            <li ><h2>4</h2><p>APR</p></li>
            <li ><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
            <li><h2>7</h2><p>JUL</p></li>
            <li><h2>8</h2><p>AUG</p></li>
            <li><h2>9</h2><p>SEP</p></li>
            <li><h2>10</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
        </ul>
        
        <div class="text" id="txt">
            <h2>1月活动</h2>
            <p>快过年了，大家可以商量着去哪玩吧～</p>
        </div>
    
    </div>
    <script>
     /*    思路：1.先写好body内容和css样式
        2. ，列出所有按钮然后，获取所有的按钮
       3.   里面有许多重复样式，写成for循环
       4.先写按钮个数的外循环数组,
       5.再写点击时消除消除类名的内循环
       6.点击的按钮添加active类名
       7.打印结果*/

// 这是要添加的数组
       let arr=['考研1','考研2','考研3','考研4',
        '考研5','考研6','考研7','考研8','考研9',
        '考研10','考研11','考研12']
        let btns=document.querySelectorAll('#box li')
        let oH2=document.querySelector('.text>h2')
        let oP=document.querySelector('text>p')

        for (let i = 0; i < btns.length; i++) {
            let btn= btns[i];
            btn.onclick=function(){
            for (let j = 0; j < btns.length; j++) {
            btns[j].classList.remove('active')
              
            }
            btn.classList.add('active')
            console.log(i+1)
            oH2.innerText=i+1+'月活动'
            op.innerHTML=arr[i]
        }
        }
    </script>

3.自动登录提醒

<style type="text/css">
			div{
				display: none;
			}
		</style>
	</head>
	<body>
		<label id="autoLogin">
			<input type="checkbox">自动登录
		</label>
		<div>为了您的安全，请不要在公共场所勾选</div>
		<script type="text/javascript">
			var oBtn = document.getElementById("autoLogin");
			var oDiv = document.getElementsByTagName("div")[0];
			//鼠标移入
			oBtn.onmouseover = function(){
				oDiv.style.display = "block";
			}
			//鼠标移出
			oBtn.onmouseout = function(){
				oDiv.style.display = "none";
			}
		</script>
	</body>

k2460761639

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js测试有效的作业之dom

1.选项卡的思路<body> <div> <div> <button style=" color: black; ">电影票</button> <button style="color: red;">飞度</button> <button style="color: blue;">致梦想</button> &lt
复制链接

扫一扫