abstrak：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js練手</title> <script type="text/javascript"> // document.w
<!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"); 查找字符串一定要用引號括起來。返回字符串的位子數字 起始0 如果沒找到就是-1
// lastindexOf()從字符串后面找到并返回數值。 返回17
// var r = string1.lastIndexOf(a)
// 字符串替換方法，只能替換1次哦。 replace(要被替換的，替換成什么)
// var x = string1.replace("2","555");
// var a = string1.charAt(0); 返回對應位數的字符串的值，起始0
// document.write (a);
// substring(起始位置, 結束位置);截取1~2的字符
// var q = string1.substring(1, 3);
// document.write(q);
//var b = "woshi li quanquan";
// var c = b.length; 內建屬性
// document.write (c);
// var l = "quanquan";
// var c = string1.concat(b,l); //字符串鏈接方法。一個或多個
// document.write (l.substr(1,4)); //起始0 截取1~4的字符串 subtr(起始位置，截取長度)與substring(起始位置，結束位置)是有區(qū)別的。
//字符串轉換成數字
// 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); //必須以數字開頭的字符串，才會返回數字整數。并只返回一個數字字符串。 開頭是中文的會返回NaN
// document.write (v+'<br>');
// var f = parseFloat(name) //Float浮點型 駝峰寫法。
// document.write (f);
//數字轉換成字符串
// 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>');
//數組的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是對象的方法，是結合（合并）另外的對象。
// var d =c.join('.'); //join 將數組轉換成字符串 默認是,號分割，可以指定符號。
// document.write(c+'<br>');
// document.write(d+'<br>');
// console.log(c.reverse()); //reverse 是逆向排序
// console.log(c.sort()); //sort 是順向排序
// splice(起始位置，刪除的數量，添加的元素)
// splice(start: int, deleteCount: int, items...: any)
//返回想要的元素，組成數組，slice (起始位置，結束位置) 若省略結束位置，默認獲取到最后的元素。 返回的是數組
// var a = Array(1,2,3,4,5);
// var b = Array('PHP','Web','javascript');
// console.log(a.splice(1,1,6)); //在指定位置添加或者刪除一個數組元素或者刪除制定位置的元素再在這個位置添加一個元素
// console.log(a);
// var x = a.reverse();
// console.log(x);
// //返回想要的元素，slice (起始位置，結束位置) 若省略結束位置，默認獲取到最后的元素。
// console.log(b.slice(1,2)); //獲取到web
// //
// var pu,po
// //push 壓入元素到數組，并返回數字總數length
// console.log(a.push(11,'haha')); //在數組最后添加元素 添加多個元素
// console.log(a);
// //pop() 刪除彈出數組的最后一個元素 并且返回彈出的元素
// 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";
}
</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: ;}
</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>
</body>
</html>總結：
看了視頻 知道簡單的js小案例。以及js的語法。常用的函數，了解了面向對象編程的意思。
Guru membetulkan：查無此人Masa pembetulan：2019-03-18 09:32:47
Rumusan guru：完成的不錯。 js每行語句后面都增加 ;號。 js這些案例，可以都保存下來，以后項目中碰到，可以直接使用。