サマリー：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js練手</title> <script type="text/javascript"> // docum
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js練手</title>
<script type="text/javascript">
// document.write("text...: DOMString");
// var y = 5 ;
// do {
// document.write(y+"<br>");
// y++;
// document.write(y+"<br>");
// } while (y<=5)
// // continue 執(zhí)行下條CASE ，不會跳出分支， break跳出分支語句
// var x=3;
// switch (x) {
// case 1:
// document.write("one<br> ")
// break;
// case 2:
// document.write("tow<br>")
// break;
// case 3:
// document.write("three<br>")
// break;
// case 4:
// document.write("four<br>")
// break;
// case 5:
// document.write("five<br>")
// break;
// case 6:
// document.write("six<br>")
// break;
// case 7:
// document.write("seven<br>")
// break;
// default:
// // statements_def
// break;
// }
// var string1 = "I2like javascript2 !";
// var string2 = string1.indexOf("j"); 查找字符串一定要用引號括起來。返回字符串的位子數(shù)字 起始0 如果沒找到就是-1
// lastindexOf()從字符串后面找到并返回數(shù)值。 返回17
// var r = string1.lastIndexOf(a)
// 字符串替換方法，只能替換1次哦。 replace(要被替換的，替換成什么)
// var x = string1.replace("2","555");
// var a = string1.charAt(0); 返回對應位數(shù)的字符串的值，起始0
// document.write (a);
// substring(起始位置, 結(jié)束位置);截取1~2的字符
// var q = string1.substring(1, 3);
// document.write(q);
//var b = "woshi li quanquan";
// var c = b.length; 內(nèi)建屬性
// document.write (c);
// var l = "quanquan";
// var c = string1.concat(b,l); //字符串鏈接方法。一個或多個
// document.write (l.substr(1,4)); //起始0 截取1~4的字符串 subtr(起始位置，截取長度)與substring(起始位置，結(jié)束位置)是有區(qū)別的。
//字符串轉(zhuǎn)換成數(shù)字
// var str = "456";
// var name = "22.2liquanquan26.2";
// var q = str-0;
// document.write (q+'<br>');
// document.write (typeof(str)+'<br>');
// document.write (typeof(q)+'<br>');
// document.write(Number(str)+'<br>');// 將如果有英文或者中文，Number會返回NaN,
// var v = parseInt(name); //必須以數(shù)字開頭的字符串，才會返回數(shù)字整數(shù)。并只返回一個數(shù)字字符串。 開頭是中文的會返回NaN
// document.write (v+'<br>');
// var f = parseFloat(name) //Float浮點型 駝峰寫法。
// document.write (f);
//數(shù)字轉(zhuǎn)換成字符串
// var num = 85710050;
// var n = num + "";
// document.write (typeof(num)+'<br>');
// document.write (n+'<br>');
// document.write (typeof(n)+'<br>');
// var n = String (num);
// document.write (n+'<br>');
// document.write (typeof(n)+'<br>');
// var n = num.toString();
// document.write (n+'<br>');
// document.write (typeof(n)+'<br>');
//數(shù)組的3種定義方式
// var arr = new Array('liquanquan','lilei','lixitong')
// document.write(arr[0]);
// var arr = new Array();
// arr[0]='text';
// document.write(arr[0]);
// var arr = new Array(2);
// arr[0] = 'php';
// arr[1] = 'javascript'
// var a = Array(1,2,3,4,5);
// var b = Array('PHP','Web','javascript');
// var c = a.concat(b); //concat是對象的方法，是結(jié)合（合并）另外的對象。
// var d =c.join('.'); //join 將數(shù)組轉(zhuǎn)換成字符串 默認是,號分割，可以指定符號。
// document.write(c+'<br>');
// document.write(d+'<br>');
// console.log(c.reverse()); //reverse 是逆向排序
// console.log(c.sort()); //sort 是順向排序
// splice(起始位置，刪除的數(shù)量，添加的元素)
// splice(start: int, deleteCount: int, items...: any)
//返回想要的元素，組成數(shù)組，slice (起始位置，結(jié)束位置) 若省略結(jié)束位置，默認獲取到最后的元素。 返回的是數(shù)組
// var a = Array(1,2,3,4,5);
// var b = Array('PHP','Web','javascript');
// console.log(a.splice(1,1,6)); //在指定位置添加或者刪除一個數(shù)組元素或者刪除制定位置的元素再在這個位置添加一個元素
// console.log(a);
// var x = a.reverse();
// console.log(x);
// //返回想要的元素，slice (起始位置，結(jié)束位置) 若省略結(jié)束位置，默認獲取到最后的元素。
// console.log(b.slice(1,2)); //獲取到web
// //
// var pu,po
// //push 壓入元素到數(shù)組，并返回數(shù)字總數(shù)length
// console.log(a.push(11,'haha')); //在數(shù)組最后添加元素 添加多個元素
// console.log(a);
// //pop() 刪除彈出數(shù)組的最后一個元素 并且返回彈出的元素
// console.log(a.pop());
// console.log(a);
function tab1(y){
var d1 = document.getElementById("js1")
var d2 = document.getElementById("js2")
var d3 = document.getElementById("js3")
var d4 = document.getElementById("js4")
d1.style.zIndex="100";
d2.style.zIndex="99";
d3.style.zIndex="99";
d4.style.zIndex="99";
y.style.background="red"
}
function tab2(){
var d1 = document.getElementById("js1")
var d2 = document.getElementById("js2")
var d3 = document.getElementById("js3")
var d4 = document.getElementById("js4")
d1.style.zIndex="99";
d2.style.zIndex="100";
d3.style.zIndex="99";
d4.style.zIndex="99";
this.style.background="red"
}
function tab3(){
var d1 = document.getElementById("js1")
var d2 = document.getElementById("js2")
var d3 = document.getElementById("js3")
var d4 = document.getElementById("js4")
d1.style.zIndex="99";
d2.style.zIndex="99";
d3.style.zIndex="100";
d4.style.zIndex="99";
}
function tab4(){
var d1 = document.getElementById("js1")
var d2 = document.getElementById("js2")
var d3 = document.getElementById("js3")
var d4 = document.getElementById("js4")
d1.style.zIndex="99";
d2.style.zIndex="99";
d3.style.zIndex="99";
d4.style.zIndex="100";
}
var time = new Date();
document.write(time+'<br>');
var Y = time.getFullYear();
var M = time.getMonth();
document.write('現(xiàn)在是'+Y+'年');
m = new Array(11);
m[0]='1月'
m[1]='2月'
m[2]='3月'
m[3]='4月'
m[4]='5月'
m[5]='6月'
m[6]='7月'
m[7]='8月'
m[8]='9月'
m[9]='10月'
m[10]='11月'
m[11]='12月'
document.write(''+m[M]+'');
var D = time.getDate();
document.write(D+'日');
var h = time.getHours();
document.write(h+'點')
var f = time.getMinutes();
document.write(D+'分鐘')
var s = time.getSeconds();
document.write(s+'秒')
</script>
<style type="text/css" media="screen">
*{margin: 0px;padding: 0px;}
li {float: left;list-style: none;}
a {text-decoration: none;color: #000;}
.l {float: left;}
div.tab {
width: 400px;
margin:30px auto;
}
.tab_ul li {
width: 98px;
height: 30px;
line-height: 30px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
text-align: center;
}
.tab_ul {position: relative;}
.tab_li_sub {
width: 396px;
height: 500px;
background: red;
position: absolute;
top:30px;
left:0px;
}
.tab_li_sub {display: ;}
.clear {clear: both;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_ul">
<ul>
<li><a href="" onmouseover="tab1(this)">熱點</a></li>
<li><a href="" onmouseover="tab2()">軍事</a></li>
<li><a href="" onmouseover="tab3()">新聞</a></li>
<li style="border-right:1px solid #ccc;"><a href="" onmouseover="tab4()">娛樂</a></li>
</ul>
<div class="tab_li_sub" style="z-index: 99;" id="js1">
<img src="../images/tv.jpg" alt="" width="300px">1
</div>
<div class="tab_li_sub" id="js2">
<img src="../images/tv1.jpg" alt="" width="300px">2
</div>
<div class="tab_li_sub" id="js3">
<img src="../images/tv2.jpg" alt="" width="300px">3
</div>
<div class="tab_li_sub" id="js4">
<img src="../images/tv3.jpg" alt="" width="300px">4
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>總結(jié)
通過案列，我學習了通過getElementById、getElementsByClassName、getelementsByTagName,選擇標簽，然后通過innerHTML插入文本等、通過鏈接style改變CSS樣式。 還可以通過box.onclick來調(diào)用執(zhí)行函數(shù)。等等知識。
添削の先生：滅絕師太添削時間：2019-03-18 09:37:47
先生のまとめ：作業(yè)寫的有點亂,不過有認真練習哦,很棒!