智能社JavaScript学习笔记第三课

JS学习第三课

选项卡

制作一个选项卡，有四个按键，按不同按键展示不同的div

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1 .active {background:yellow;}

        #div1 div {width:170px;height:200px;background:#ccc;border:1px solid #999; display:none;}

    </style>

 

    <script>

        window.onload = function() {

            var oDiv = document.getElementById('div1');

            var aBtn = oDiv.getElementsByTagName('input');

            var aDiv = oDiv.getElementsByTagName('div');

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

                aBtn[i].index = i;//为每一个button记录一个index

                aBtn[i].onclick = function() {

                    for(var i = 0;i < aBtn.length;i++){//这个循环是为了先把所有button取消高亮，把所有的div隐藏

                        aBtn[i].className = '';

                        aDiv[i].style.display='none';

                    }

                    this.className = 'active'；//this就是当前发生事件的元素

                    aDiv[this.index].style.display = 'block';

                }

            }

        };

 

    </script>

</head>

<body>

 

<div id="div1">

 

<input class = "active" type = "button" value = "教育" />

<input type = "button" value = "金融" />

<input type = "button" value = "科技" />

<input type = "button" value = "体育" />

 

<div style = "display:block;">1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

 

</div>

 

</body>

</html>

JS简易日历

鼠标移到一个月份上，底下div里显示该月份及该月份相关活动。

这里和选项卡不同的是只用了一个div。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload=function(){

            var arr = ['过年了'，'春游'，'走'，'dd']//数组存好每个月的内容，在div中展示

            var oDiv = document.getElementById('tab');//获取div

            var aLi = oDiv.getElementsByTagName('li');//获取li

            var oTxt = oDiv.getElementsByTagName('div')[0];//oDiv中只有一个div，即index为0的

 

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

                    aLi[i].index = i;//为每一个li加一个index，这样div中显示鼠标移到的月份时只用给index+1

                    aLi[i].onmouseover=function(){

                    for(var i=0;i<aLi.length;i++){//先使之前的事件清空

                        aLi[i].className='';

                    }

                    this.className='active';//当前事件高亮

                }

            }

        oTxt.innerHTML='<h2>' +(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>' //计算机会从左往右拼接，所以中间想接在一起的要加括号

        };

 

    </script>

</head>

<body>

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

    <ul>

        <li class="active"><h2>1</h2><p>JAN</p></li>

        <li><h2>2</h2><p>FEB</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>JUG</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 calss = "text">

        <h2>1月活动</h2>

        <p>春游吧</p>

    </div>

</div>

 

</body>

</html>

注意inner HTML的用法，oDiv.innerHTML就是从oDiv中获取HTML。

oTxt.innerHTML='<h2>' +(this.index+1)+’月活动</h2><p>'+arr[this.index]+'</p>'

这里因为是innerHTML，实际上我们就可以往里放html的代码，这里就是这样做的。

智能社JavaScript学习笔记第三课

猜你喜欢