最近在學習JS效果，分享些實戰經驗。
來圖鎮樓！
html部分（大綜合）：
<body>
<!--1.傳遞一個參數-->
<div id="div-color1"></div>
<input type="button" value="背景變黃" onclick="changColor(this)" />
<input type="button" value="背景變紅" onclick="changColor(this)"/>
<input type="button" value="背景變黑" onclick="changColor(this)"/>
<input type="button" value="恢復原樣" onclick="changColor(this)"/>
<div id="div-color2"></div>
<input type="button" value="背景變窄" onclick="Change(this)"/>
<input type="button" value="背景變黃" onclick="Change(this)"/>
<input type="button" value="背景變高" onclick="Change(this)"/>
<input type="button" value="恢復原樣" onclick="Change(this)"/>
<br /><br />
<input type="text" value="你拍一 我拍一" id="name"/>
<input type="button" value="改變文字" onclick="changname()"/>
<input type="button" value="添加title屬性(鼠標經過)" id="name1" onmouseover="addtitle()"/>
<br /><br />
<!--1.while循環-->
<input type="button" value="循環出現提示框5次" onclick="xunhuan()"/>
<br /><br />
<!--2.for循環-->
<input type="button" value="批量修改樣式" onclick="yangshi()"/>
<div id="div-max">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<br /><br />
<!--1.求和-->
<p>1.字符串相加</p>
<input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="求和" onclick="qiuhe()" />
<br /><br />
<!--2.-->
<p>2.字符串相加</p>
<input type="text" id="txt3" />+<input type="text" id="txt4" /><input type="button" value="求和" onclick="qiuhe1()" />
<br /><br />
<!--3.-->
<p>3.判斷是否NaN</p>
<input type="text" id="num" /><input type="button" value="檢測" onclick="jc()" />
<br /><br />
<!--4.-->
<p>4.相加3</p>
<input type="text" id="txt5" placeholder="支持整數運算"/>+<input type="text" id="txt6" placeholder="支持整數運算"/><input type="button" value="求和" onclick="qiuhe2()" />
<br /><br />
<!--5.問候分析-->
<p>5.問候</p>
<input type="text" id="xingming" placeholder="姓名"/>
<select id="xuanze">
<option>性別</option>
<option value="男" >男</option>
<option value="女" >女</option>
</select>
<input type="button" value="問候" onclick="wenhou()" />
<br /><br />
<!--6.三目運算符-->
<p>6.單雙數</p>
<input type="text" placeholder="數字" id="ds" /><input type="button" value="判斷單雙" onclick="danshuang()" />
<!--7.JS日曆-->
<p>7.日曆</p>
<ul id="u1">
<li onmousemove="rili(1)" onmouseout="xiaoxi(1)"><h2 id="H1">1<p>JAN</p></h2></li>
<li onmousemove="rili(2)" onmouseout="xiaoxi(2)"><h2 id="H2">2<p>FER</p></h2></li>
<li onmousemove="rili(3)" onmouseout="xiaoxi(3)"><h2 id="H3">3<p>MAR</p></h2></li>
<li onmousemove="rili(4)" onmouseout="xiaoxi(4)"><h2 id="H4">4<p>APR</p></h2></li>
<li onmousemove="rili(5)" onmouseout="xiaoxi(5)"><h2 id="H5">5<p>MAY</p></h2></li>
<li onmousemove="rili(6)" onmouseout="xiaoxi(6)"><h2 id="H6">6<p>JUN</p></h2></li>
<li onmousemove="rili(7)" onmouseout="xiaoxi(7)"><h2 id="H7">7<p>JUL</p></h2></li>
<li onmousemove="rili(8)" onmouseout="xiaoxi(8)"><h2 id="H8">8<p>AUG</p></h2></li>
<li onmousemove="rili(9)" onmouseout="xiaoxi(9)"><h2 id="H9">9<p>SEP</p></h2></li>
<li onmousemove="rili(10)" onmouseout="xiaoxi(10)"><h2 id="H10">10<p>OCT</p></h2></li>
<li onmousemove="rili(11)" onmouseout="xiaoxi(11)"><h2 id="H11">11<p>NOV</p></h2></li>
<li onmousemove="rili(12)" onmouseout="xiaoxi(12)"><h2 id="H12">12<p>DEC</p></h2></li>
<div id="foot12">
<div id="yue1" style="display: none;"><h3>1月活動</h3><p>這是一月活動內容</p></div>
<div id="yue2" style="display: none;"><h3>2月活動</h3><p>這是二月活動內容</p></div>
<div id="yue3" style="display: none;"><h3>3月活動</h3><p>這是三月活動內容</p></div>
<div id="yue4" style="display: none;"><h3>4月活動</h3><p>這是四月活動內容</p></div>
<div id="yue5" style="display: none;"><h3>5月活動</h3><p>這是五月活動內容</p></div>
<div id="yue6" style="display: none;"><h3>6月活動</h3><p>這是六月活動內容</p></div>
<div id="yue7" style="display: none;"><h3>7月活動</h3><p>這是七月活動內容</p></div>
<div id="yue8" style="display: none;"><h3>8月活動</h3><p>這是八月活動內容</p></div>
<div id="yue9" style="display: none;"><h3>9月活動</h3><p>這是九月活動內容</p></div>
<div id="yue10" style="display: none;"><h3>10月活動</h3><p>這是十月活動內容</p></div>
<div id="yue11" style="display: none;"><h3>11月活動</h3><p>這是十一月活動內容</p></div>
<div id="yue12" style="display: none;"><h3>12月活動</h3><p>這是十二月活動內容</p></div>
</div>
</ul>
<br /><br /><br />
<!--8.數組輸出練習-->
<p>8.數組輸出練習</p>
<div id="div-sz">
<p>已知數組內容：1.這是第一句，2.這是第二句，3.這個第三句，4.這是第四句</p>
<input type="button" value="提取1" onclick="tiqu(1)" />
<input type="button" value="提取2" onclick="tiqu(2)" />
<input type="button" value="提取3" onclick="tiqu(3)" />
<input type="button" value="提取4" onclick="tiqu(4)" />
<input type="button" value="全部彈出提取" onclick="tiqu(5)" />
</div>
<div id="div-xs">
顯示：
</div>
<br /><br />
<!--9.鼠標經過變換-->
<p>9.鼠標經過變換</p>
<ul id="u2">
<li class="u2" onmouseover="show_lm(1)" >欄目一</li>
<li class="u2" onmouseover="show_lm(2)" >欄目二</li>
<li class="u2" onmouseover="show_lm(3)" >欄目三</li>
<li class="u2" onmouseover="show_lm(4)" >欄目四</li>
</ul>
<div id="div_lm">
<div id="tag1" class="tag" style="display: none">欄目一的內容 欄目一的內容 欄目一的內容 欄目一的內容</div>
<div id="tag2" class="tag" style="display: none">欄目二的內容 欄目二的內容 欄目二的內容 欄目二的內容</div>
<div id="tag3" class="tag" style="display: none">欄目三的內容 欄目三的內容 欄目三的內容 欄目三的內容</div>
<div id="tag4" class="tag" style="display: none">欄目四的內容 欄目四的內容 欄目四的內容 欄目四的內容</div>
</div>
<br /><br />
<!--10.鼠標點擊經過變換-->
<p>9.鼠標點擊變換</p>
<ul id="u2">
<li class="u3" onclick="show_lm1(1)" >欄目一</li>
<li class="u3" onclick="show_lm1(2)" >欄目二</li>
<li class="u3" onclick="show_lm1(3)" >欄目三</li>
<li class="u3" onclick="show_lm1(4)" >欄目四</li>
</ul>
<div id="div_lm">
<div id="tagg1" class="tag" style="display: none">欄目一的內容 欄目一的內容 欄目一的內容 欄目一的內容</div>
<div id="tagg2" class="tag" style="display: none">欄目二的內容 欄目二的內容 欄目二的內容 欄目二的內容</div>
<div id="tagg3" class="tag" style="display: none">欄目三的內容 欄目三的內容 欄目三的內容 欄目三的內容</div>
<div id="tagg4" class="tag" style="display: none">欄目四的內容 欄目四的內容 欄目四的內容 欄目四的內容</div>
</div>
<!--11.innerHTML的基本使用-->
<p>11.innerHTML的基本使用</p>
<input type="text" id="div_text" placeholder="在這裏輸入文字"/><input type="button" onclick="tijiaohou()" value="提交"/>
<div id="d2">
提交後在這裏顯示：
</div>
<br /><br />
<!--12.innerHTML,字符串，判斷的基本使用-->
<p>12.innerHTML,字符串，判斷的基本使用</p>
<input type="text" id="div_text1" placeholder="在這裏輸入文字"/>+<input type="text" id="div_text2" placeholder="在這裏輸入文字"/><input type="button" onclick="tijiaohou1()" value="提交"/>
<div id="d3">
提交後在這裏顯示：
</div>
<br /><br />
</body>2.CSS樣式（css1.css）：
#div-color1{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div-color2{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div{
width: 230px;
height: 60px;
}
#div1{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div2{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div3{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div4{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div5{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#u1{
width: 246px;
height: 375px;
background-color:#EAE9E9;
border: 1px gray solid;
}
ul li {
text-align: center;
float: left;
width: 59px;
height:54px;
color: white;
font-size: 12px;
margin-top: 10px;
margin-left: 15px;
background-color: black;
}
#foot12{
float: left;
width: 206px;
height: 67px;
margin: 0 auto;
margin-top: 15px;
margin-left: 15px;
border: 1px white solid;
background-color: #F1F1F1;
}
.u2{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5BC0DE;
}
.u3{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5CB85C;
}
#div_lm{
margin-top: 40px;
width: 300px;
height:100px;
background-color:#D9EDF7 ;
}
.tag{
width: 100px;
}3.CSS樣式（base.css）:
html,body,head,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img{
margin: 0;
padding: 0;
}
form,input,select,textarea{margin: 0;padding: 0;}
img{vertical-align: middle;}
li{list-style: none;}
a{text-decoration: none;}
.clear{clear: both;font-size: 0px;}
.left{float: left;}
.right{float: right;}JS代碼：
“`
//1.
function changColor(color1){
var c = document.getElementById(“div-color1”);
if(color1.value==”背景變黃”){
c.style.backgroundColor=”yellow”;
}
if(color1.value==”背景變紅”){
c.style.backgroundColor=”red”;
}
if(color1.value==”背景變黑”){
c.style.backgroundColor=”black”;
}
if(color1.value==”恢復原樣”){
c.style.backgroundColor=”blue”;
}
}
//2.
function Change(obj1){
var d = document.getElementById(“div-color2”);
if(obj1.value==”背景變窄”){
d.style.width=”80px”;
}if(obj1.value==”背景變黃”){
d.style.backgroundColor=”yellow”;
}if(obj1.value==”背景變高”){
d.style.height=”200px”;
}if(obj1.value==”恢復原樣”){
d.style.height=”150px”
d.style.width=”150px”;
d.style.backgroundColor=”blue”;
}
}
//3.
function changname(){
var o = document.getElementById(“name”);
if(o.value==”玩蛋去吧！”){
o.value=”你拍一 我拍一”;
}else{
o.value=”玩蛋去吧！”
}
}
function addtitle(){
var o = document.getElementById(“name1”);
o.setAttribute(“title”,”項目信息”);
// o.title=”標題在此！”;
}
//1.while循環
function xunhuan(){
var i=1;
while(i<=5){
alert(“提示框第”+i+”次！”);
i++;
}
}
//2.for循環
function yangshi(){
for(var i=1;i<=4;i++){
}
}
//1.求和
function qiuhe(){
var n1 = document.getElementById(“txt1”).value;
var n2 = document.getElementById(“txt2”).value;
var n3 = n1+”“+n2;
alert(n3);
}
//2.數字相加
function qiuhe1(){
var n3 = parseInt(document.getElementById(“txt3”).value);
var n4 = parseInt(document.getElementById(“txt4”).value);
var n5 = n3+n4;
alert(n5);
}
//3.判斷
function jc(){
var n = document.getElementById(“num”).value;
if(!isNaN(n)){
alert(“是數字類型,true!”);
}else{
alert(“不是數字類型,false!”);
}
}
//4.求和
//2.數字相加
function qiuhe2(){//獲取到的默認都是字符串類型的
var n5 = parseInt(document.getElementById(“txt5”).value);
var n6 = parseInt(document.getElementById(“txt6”).value);
if(isNaN(n5)||isNaN(n6)){
alert(“請輸入數字類型的，謝謝！”);
}else{
var n7 = n5+n6;
alert(n7);
}
}
function wenhou(){
var name = document.getElementById(“xingming”).value;
var sex = document.getElementById(“xuanze”).value;
if(sex==”女”){
alert(name+”女士，您好！”);
}else if(sex==”男”){
alert(name+”先生，您好！”);
}
}
function danshuang(){
var d = document.getElementById(“ds”).value;
if(d%2!=0){
alert(“此爲單數！”);
}else if(d==0){
alert(“此數爲0！”);
}else
alert(“此爲雙數！”);
}
var now=1;
/日曆/
function rili(now){
var obj = document.getElementsByTagName(“li”);
var taglength = obj.length;
for(var i=1;i<=taglength;i++){
if(i==now){
var o = document.getElementById(“yue”+now);
var H = document.getElementById(“H”+now);
H.style.color=”#E84A7E”;
o.style.display=”block”;
}else{
var o = document.getElementById(“yue”+i);
var H = document.getElementById(“H”+i);
H.style.color=”white”;
o.style.display=”none”;
}
}
}
/數組提取/
var n=1;
function tiqu(n){
var ar = new Array(“這是第一句”,”這是第二句”,”這是第三句”,”這是第四句”);
var xs = document.getElementById(“div-xs”);
for(var i=1;i<=ar.length;i++){
if(i==n){
xs.innerHTML = ar[i-1];
}
}
if(n==5){
xs.innerHTML = ar[0]+”,”+ar[1]+”,”+ar[2]+”,”+ar[3]
}
}
/9.qiehua/
function show_lm(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tag”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tag”+i);
obj.style.display=”none”;
}
}
}
function show_lm1(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tagg”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tagg”+i);
obj.style.display=”none”;
}
}
}
function tijiaohou(){
var t1 = document.getElementById(“div_text”).value;
var d2 = document.getElementById(“d2”);
d2.innerHTML = ‘提交後在這裏顯示：’+t1;
}
function tijiaohou1(){
var t2 = document.getElementById(“div_text1”).value;
var t3 = document.getElementById(“div_text2”).value;
var d3 = document.getElementById(“d3”);
d3.innerHTML = ‘提交後在這裏顯示：’+t2+t3;
}“`