Java Script--函数传参--提取行间事件--循环--选项卡-- js简易日历

本文链接：https://blog.csdn.net/weixin_47700237/article/details/107150717

函数传参

改变背景颜色
什么时候传参—函数里有定不下来的东西

<style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
   <script>
 function setColor(color){
            var oDiv=document.getElementById('div1');
            oDiv.style.backgroundColor=color;

        }
        </script>
         <input type="button" value="变绿" onclick="setColor('green');">
    <input type="button" value="变黄" onclick="setColor('yellow');">
    <input type="button" value="变黑" onclick="setColor('black');">
    <div id="div1"></div>

在这里插入图片描述
改变div样式
操作属性的第二种方式
使用：当修改的属性不确定的时候
字符串和变量
变量可以任意改变
字符串不可修改
字面量：看到的东西，自然知道是什么例如：12、‘abc’
变量：var a=？

function setText(){
            var oTxt=document.getElementById('txt1');
            //第一中操作属性的方法
            //oTxt.value='vgsdvss';
            //第二种操作属性方法
            oTxt['value']='vgsdvss';
            //两种方法的效果一样
            
            var a='value'
             oTxt[a]='vgsdvss';
             //效果一样可以实现
        }
        <input id="txt1" type="text">
    <input type="button" value="变化" onclick="setText()">

像第二种：
oTxt[‘value’]=‘vgsdvss’; 中的’vlaue’可变

<style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
    function change(name,value){
            var oDiv=document.getElementById('div1');
            oDiv.style[name]=value; //oDiv.style.name=value; 不可用无法实现功能
        }
    </script>
    <input type="button" value="变宽" onclick="change('width','400px')">
    <input type="button" value="变高" onclick="change('height','400px')">
    <input type="button" value="变绿" onclick="change('background','green')">
    <div id="div1"></div>

效果在这里插入图片描述

style与className
style加样式行间
style取样式行间
元素.style.属性=xxx 是修改行间样式
之后在修改className不会有效果原因：优先级问题参考css

提取行间事件

1.function 名字（）{。。。}
obtn.οnclick=名字
2.obtn.οnclick=function （）{。。。} 匿名函数
两者功能相同第二个当程序过多时起名较难可以使用
提取事件
事件可以用js添加
行为样式结构三者分离

script>
        window.onload=function(){  //如果没有将不能实现
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function(){
            alert('a');
        }
    }
    </script>
     <input id="btn1" type="button" value="按钮">

获取一组元素
数组：

<style>
        div{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <script>
        window.onload=function(){
            var aDiv=document.**getElementsByTagName**('div');
            alert(aDiv.length);
            aDiv[0].style.background='red';
            // aDiv[1].style.background='red';
            // aDiv[2].style.background='red';
            // aDiv[3].style.background='red';
        }
    </script>
<div></div>
    <div></div>
    <div></div>
    <div></div>

在这里插入图片描述

循环

while 循环

<script>
        var i=0;      //1.初始化
        while(i<5){   //2.条件
            alert(i); **//3.语句**
            i=i+1; /i++；   //4.自增
        }
    </script>

for循环

 for(var i= 0;i<5;i++){
            alert(i);
        }

当个数不确定时

for(var i=0;i<aDiv.length;i++){  //aDiv.length  div的个数
            aDiv[i].style.background='red';
            }

 <script>
        window.onload=function(){
            var oBtn1 =document.getElementById('btn1');
            var oBtn2 =document.getElementById('btn2');
            var oBtn3 =document.getElementById('btn3');
            var oDiv=document.getElementById('div1');
            var aCh=oDiv.getElementsByTagName('input');
            oBtn1.onclick=function(){  //全选
                //aCh[0].checked=true;
                for(var i =0;i<aCh.length;i++){
                    aCh[i].checked=true;
                }
            };
            oBtn2.onclick=function(){  //不选
                //aCh[0].checked=true;
                for(var i =0;i<aCh.length;i++){
                    aCh[i].checked=false;
                }
            };
            oBtn3.onclick=function(){  //反选
                //aCh[0].checked=true;
                for(var i =0;i<aCh.length;i++){
                    if(aCh[i].checked==true){
                        aCh[i].checked=false;
                    }
                    else{
                        aCh[i].checked=true;
                    }
                }
            };

        }
    </script>
    <input id="btn1" type="button" value="全选">
    <input id="btn2" type="button" value="不选">
    <input id="btn3" type="button" value="反选">
    <div id="div1">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
    </div>

在这里插入图片描述

选项卡

这是选项卡
在这里插入图片描述
this：当前发生事件元素

 <style>
        #div1 .active{
            background: yellow;
            }
        #div1 div{
            width: 200px;
            height: 200px;
            background: gray;
            border: 1px solid black;
            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;
                aBtn[i].onclick=function(){
                    //alert(this.value)
                    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>
    <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;">111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>

在这里插入图片描述

js简易日历

innerHTML

<style>
        #div1{
            width: 200px;
            height: 150px;
            border: 1px solid black;
        }
    </style>
    <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>
<body>
    <input id="txt1" type="text">
    <input id="btn1" type="button" value="设置文本">
    <div id="div1"></div>
</body>

在这里插入图片描述
点击设置文本后

数组 var arr=[1,2,3,4];

<style>
        li{
            float: left;
            margin-left: 15px;
            border: 1px solid black;
            background-color: aqua;
            list-style: none;
        }
    </style>
    <script>
        window.onload=function(){
            var arr=[
                '1111',
                '22222',
                '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>
<body>
    <div id="tab" class="calendar">
        <ul>
            <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">
            <h2>1月活动</h2>
            <p>快回去</p>
        </div>
    </div>