您的位置：首页 > Web前端 > JavaScript

JavaScript的学习整理（一）

2016-01-29 20:53 543 查看

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" onclick="skin_1()"/>
<input type="button" value="skin2" onclick="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="显示/隐藏" onclick="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="显示/隐藏" onmouseover="document.getElementById('div2').style.dispaly='block';" onmouseout="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.onload=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].onclick=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.onload=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.onclick=function()
{
for(var i=0;i<oCh.length;i++)
{
oCh[i].checked=true;
}
};
//不选
But2.onclick=function()
{
for(var i=0;i<oCh.length;i++)
{
oCh[i].checked=false;
}
};
//反选
But3.onclick=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>

4000
<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.onload=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].onmouseover=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 日历 checkbox 选项卡换皮肤功能

相关文章推荐

新的分享

章节导航

JavaScript的学习整理（一）

JavaScript的学习整理（一）

目录：

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

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

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

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

4、选项卡

5、全选/不选/反选

6、简易日历

1.换皮肤功能

2.显示/隐藏（点击切换）

3.显示/隐藏(onmouseover/onmouseout)

4.选项卡

5.全选/不选/反选(checkbox)

6.简易日历