摘要：<!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 执行下条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(起始位置，结束位置)是有区别的。
//字符串转换成数字
// 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";
}
var time = new Date();
document.write(time+'<br>');
var Y = time.getFullYear();
var M = time.getMonth();
document.write('现在是'+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>总结
通过案列，我学习了通过getElementById、getElementsByClassName、getelementsByTagName,选择标签，然后通过innerHTML插入文本等、通过链接style改变CSS样式。 还可以通过box.onclick来调用执行函数。等等知识。
批改老师：灭绝师太批改时间：2019-03-18 09:37:47
老师总结：作业写的有点乱,不过有认真练习哦,很棒!
