JavaScript的学习整理（一）

最新推荐文章于 2019-08-13 10:06:32 发布

辛篱

最新推荐文章于 2019-08-13 10:06:32 发布

阅读量301

点赞数

分类专栏： JavaScript 文章标签： javascript 日历 checkbox 选项卡换皮肤功能

本文链接：https://blog.csdn.net/honey_1234567890/article/details/50609202

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript的学习整理（一）

1.换皮肤功能
2.显示/隐藏（点击切换）
3.显示/隐藏(onmouseover/onmouseout)
4.选项卡
5.全选/不选/反选(checkbox)
6.简易日历

1、换肤功能——实质是改变链接的css文件

step 1.先通过id获取需要修改的部分（link）； step 2.通过 href 改变需要链接的css文件；

下面我写了一个小的代码，只是用于改变页面背景颜色来供大家参考学习。

   <input type="button" value="skin1" οnclick="skin_1()"/>  
    <input type="button" value="skin2" οnclick="skin_2()"/>
    <script>
        function skin_1()
        {
            var oL=document.getElementById('11');
            oL.href="1.css";
        }
        function skin_2()
        {
            var oL=document.getElementById('11');
            oL.href="2.css";
        }
    </script>

其中，1.css文件：

body{
	background:#2A5698;
}

2.css 文件：

body{
	background:pink;
}

2、显示隐藏效果（点击切换）

其中，none:隐藏 block：显示

    <input type="button" value="显示/隐藏" οnclick="showHide()"/>
    <div id="div1">点击显示，点击隐藏</div>

    <style>
    #div1{width:200px; height:100px; background:lightblue; display:none;}
    </style>

    <script>
    
    function showHide()
    {
        var oDiv=document.getElementById('div1');
        if(oDiv.style.display=='block')
        {
            oDiv.style.display='none';
        }
        else
        {
            oDiv.style.display='block';
        }
    }
    </script>

3、显示/隐藏（当鼠标悬浮在区域时显示文字，离开则隐藏效果）

<input type="text" value="显示/隐藏" οnmοuseοver="document.getElementById('div2').style.dispaly='block';" οnmοuseοut="document.getElementById('div2').style.display='none';">
<div id="div2">这里是需要显示的内容：</div>

<style>
   #div2{width:200px; height:100px; background:green; }
</style>

4、选项卡

选项卡：主要是改变当前显示的div，通过改变className。用到的知识有：①循环；②初始化；③this指针；

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>JAVAscript</title>
</head>
<body> 
  <div id="div3">
        <input class="active" type="button" value="教育"/>
        <input type="button" value="培训"/>
        <input type="button" value="招生"/>
        <input type="button" value="出国"/>
        <br/>
        <div style="display:block;">11111</div>
        <div>22222</div>
        <div>33333</div>
        <div>44444</div>
    </div>
    
    <style>
    #div3 .active{background:yellow;}
    #div3 div{width:300px; height:200px;border:1px solid green;background:lightpink;display:none;}
    </style>

    <script>
    /*
    *4、选项卡：主要是改变 当前显示的div，通过改变className。
    */
        window.οnlοad=function()
        {
            var    oDiv=document.getElementById('div3');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');
            
            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].index=i;
                aBtn[i].οnclick=function()
                {
                    for(var i=0;i<aBtn.length;++i)
                    {
                        //初始化
                        aBtn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    //alert(this.value);
                    this.className='active';
                    aDiv[this.index].style.display='block';
                };
            }

        };
    </script>
</body>
</html>

5、全选/不选/反选

选择--checked 其中：checked=true 勾选， checked=false 不选, **注意没有引号。

<input type="button" id="btn11" value="全选"/> 
	<input type="button" id="btn22" value="不选"/> 
	<input type="button" id="btn33" value="反选"/> <br/>
	<div id="div4">
		<input type="checkbox">1<br/>
		<input type="checkbox">2<br/>
		<input type="checkbox">3<br/>
		<input type="checkbox">4<br/>
		<input type="checkbox">5<br/>
		<input type="checkbox">6<br/>
	</div>

	<script>
	/*
	*7、选择--checked
	*checked=true 勾选，  checked=false  不选,  
	*注意没有引号。
	*/
		window.οnlοad=function()
		{
			var But1=document.getElementById('btn11');
			var But2=document.getElementById('btn22');
			var But3=document.getElementById('btn33');
			var oDiv=document.getElementById('div4');
			var oCh=oDiv.getElementsByTagName('input');
			
			//全选
			But1.οnclick=function()
			{
				for(var i=0;i<oCh.length;i++)
				{
					oCh[i].checked=true;
				}
			};
			//不选
			But2.οnclick=function()
			{
				for(var i=0;i<oCh.length;i++)
				{
					oCh[i].checked=false;
				}
			};
			//反选
			But3.οnclick=function()
			{
				for(var i=0;i<oCh.length;i++)
				{
					if(oCh[i].checked==false)
					{oCh[i].checked=true;}
					else
					{oCh[i].checked=false;}
				}
			};
		};
	</script>

6、简易日历

简易日历：（综合应用） 涉及到的知识点有：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>JAVAscript</title>

   <style>
        #div5{height:650px;width:370px;border:1px solid black;font-family:Arial;
        font-size:15px;background:#E6E6E4;}
        #div5 li{list-style-type:none;border:1px solid gray;width:90px;height:90px;float:left;margin-right:5px;
        margin-top:5px;background:black;color:white;}
        .text{margin-left:40px;margin-top:0px;width:285px;height:200px;border:1px solid #F7F7F5;float:left;background:#EEEEEE;}
        #div5 .active{background:white;color:#BC647B;border:1px solid black;}
    </style>
<pre name="code" class="html"></head>
<body> 
    <div id="div5">
        <center>
        <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>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OTC</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
        </ul>
        <br/><br/>
        <div class="text">
            <h2>1月活动</h2>
            <p>一月活动... </p>    
        </div>
        </center>
    </div>

    <script>
    /**
    *6、简易日历：
    涉及：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML
    */
        window.οnlοad=function()
        {
            var arr=['一月活动...','二月活动...','三月活动...','四月活动...','五月活动...','六月活动...','七月活动...','八月活动...','九月活动...','十月活动...','十一月活动...','十二月活动...'];
            var oDiv=document.getElementById('div5');
            var aLi=oDiv.getElementsByTagName('li');
            var aTxt=oDiv.getElementsByTagName('div')[0];

            for(var i=0;i<aLi.length;++i)
            {
                aLi[i].index=i;
                aLi[i].οnmοuseοver=function()
                {
                    for(var i=0;i<aLi.length;++i)
                    {
                        aLi[i].className='';
                    }
                    this.className='active';
                    aTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+arr[this.index]+"</p>";
                };
                
            }
        };
    </script>
</body>
</html>