JS（三）

最新推荐文章于 2022-10-23 22:18:01 发布

itsAurora

最新推荐文章于 2022-10-23 22:18:01 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45716667/article/details/107167492

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

选项卡


    <div id="div1">
        <input class="active" type="button" value="教育">
        <input type="button" value="培训">
        <input type="button" value="招生">
        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <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;
                aBtn[i].onclick = function(){
                    for(var i=0;i<aBtn.length;i++){
                        aBtn[i].className = '';
                        aDiv[i].style.display = 'none';
                    }
                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';
                };
            }
            
        };
    </script>

在这里插入图片描述

this当前事件的元素

innerHTML


    <script>
        window.onload = function(){
            var oTxt = document.getElementById('txt1');
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');

            oBtn.onclick = function(){
                oDiv.innerHTML = oTxt.value;
            };
        };
    </script>

<input id="txt1" type="text">
<input id="btn1" type="button" value="设置文字">
<div id="div1"></div>

在这里插入图片描述

简易年历、

    <style>
       
        #tab {
            width: 450px;
            height: 650px;
            background: pink;
            margin: auto;
            color: white;
            line-height: 50px;
            text-align: center;
            margin-top: 10%;
        }
        #tab li {
            width: 100px;
            height: 100px;
            background: rgb(91, 198, 206);
            margin: 10px;
            list-style: none;
            float: left;
        }

        #tab .act {
            background: rgb(254, 255, 255);
            color: black;
        }

        .text {
            clear: left;
            color:coral;
            background: rgb(253, 166, 166);
            width:100%;
            height:120px;
        }
    
    </style>
    
</head>    
<body>


    <div id="tab" class="calendar">
        <ul>
            <li><p>1</p></li>
            <li><p>2</p></li>
            <li><p>3</p></li>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
            <li><p>7</p></li>
            <li><p>8</p></li>
            <li><p>9</p></li>
            <li><p>10</p></li>
            <li><p>11</p></li>
            <li><p>12</p></li>
        </ul>
        <div class = "text">
            <h2>1月</h2>
        </div>
    </div>


    <script>
        window.onload=function(){
            var arr=[
                '1111',
                '2222',
                '3333'
            ];
            var oDiv=document.getElementById('tab');
            var aLi=oDiv.getElementsByTagName('li');
            var oTxt=oDiv.getElementsByTagName('div')[0];

            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onmousemove=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>

在这里插入图片描述

查看变量类型

typeof 需要查看的变量

<script>
        var a = 12;
        alert(typeof a);
    </script>

在这里插入图片描述

数据类型转换

parseInt()parse+要转换的内容。

NaN 非数字
Nan != NaN
isNaN()判断变量是否为非数字
== 先转换类型，然后比较
=== 不转换类型，直接比较

闭包

子函数可以使用父函数的局部变量。

匈牙利命名法

类型前缀
首字母大写

真假判断

真：true，非零数字，非空字符串，非空对象
假：false，数字0，空字符串，空对象，undefined

Json

<script>
        var json = {a:1,b:2,c:3,d:'abc'};
        alert(json.a);
    </script>

在这里插入图片描述

遍历json

	<script>
        var json = {a:1,b:2,c:3,d:'abc'};
        for(var i in json){
            alert('第' + i + '个为：' + json[i])
        };
    </script>

在这里插入图片描述

for(var i in arr[])作为也数组循环的第二种方式。

itsAurora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（三）

选项卡 <div id="div1"> <input class="active" type="button" value="教育"> <input type="button" value="培训"> <input type="button" value="招生"> <div style="display: block;">111</div> &l
复制链接

扫一扫