javascript小练习题
日期：2014-05-16 浏览次数：20383 次
<html>
??? <head>
??? ??? <style>
??? ??? ??? #leftNavi {
??? ??? ??? ??? width:200px;
??? ??? ??? ??? height:800px;
??? ??? ??? ??? border:solid 1px;
??? ??? ??? ??? background-color:black;
??? ??? ??? }
??? ??? ??? #leftNavi button {
??? ??? ??? ??? width:200px;
??? ??? ??? }
??? ??? ??? #leftNavi .menu {
??? ??? ??? ??? position:relative;
??? ??? ??? ??? background-color:black;
??? ??? ??? ??? color :white;
??? ??? ??? ??? font-size:12px;
??? ??? ??? ??? text-align:center;
??? ??? ??? }
??? ??? ??? #leftNavi .menu img {
??? ??? ??? ??? display:inline-block;
??? ??? ??? ??? margin-top:10px;
??? ??? ??? ??? border-width:0px;
??? ??? ??? }
??? ??? ??? .distance {
??? ??? ??? ??? display:inline-block;
??? ??? ??? }
??? ??? ??? .one_block {
??? ??? ??? ??? width:200px;
??? ??? ??? }
??? ??? ??? .upBtn {
??? ??? ??? ??? position:relative;
??? ??? ??? ??? left:100px;
??? ??? ??? ??? top:50px;
??? ??? ??? }
??? ??? ??? .downBtn {
??? ??? ??? ??? position:relative;
??? ??? ??? ??? left:78px;
??? ??? ??? ??? top:250px;
??? ??? ??? }
??? ??? ??? .items {
??? ??? ??? ??? overflow:hidden;
??? ??? ??? ??? height:300px;
??? ??? ??? }
??? ??? </style>
??? ??? <script>
??? ??? ??? function makeBorder(obj) {
??? ??? ??? ??? obj.style.width = '30px';
??? ??? ??? ??? obj.style.height = '30px';
??? ??? ??? ??? obj.style.border = 'solid 1px white';
??? ??? ??? }
??? ??? ??? function leaveBorder(obj) {
??? ??? ??? ??? obj.style.width = '32px';
??? ??? ??? ??? obj.style.height = '32px';
??? ??? ??? ??? obj.style.border = 'none';
??? ??? ??? }
??? ??? ??? function moveUp(obj) {
??? ??? ??? ??? var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
??? ??? ??? ??? top = top - 30;
??? ??? ??? ??? if(top <= 0) {
??? ??? ??? ??? ??? top = 0;
??? ??? ??? ??? }
??? ??? ??? ??? obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
??? ??? ??? ???
??? ??? ??? }
??? ??? ???
??? ??? ??? function moveDown(obj) {
??? ??? ??? ??? var height = obj.parentNode.getElementsByTagName('div')[0].scrollHeight / 2;
??? ??? ??? ??? var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
??? ??? ??? ??? top = top + 30;
??? ??? ??? ???
??? ??? ??? ??? if(top >= height) {
??? ??? ??? ??? ???
??? ??? ??? ??? } else {
??? ??? ??? ??? ??? obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
??? ??? ??? ??? }
??? ??? ??? }8
??? ??? ???
??? ??? ??? window.onload = doOnload;
??? ??? ??? function doOnload() {
??? ??? ??? ??? var reg = /^menu_\d$/;
??? ??? ??? ??? var btns = document.getElementsByTagName('BUTTON');
??? ??? ??? ??? for(var i = 0 ; i < btns.length ; i++) {
??? ??? ??? ??? ??? var id = btns[i].id;
??? ??? ??? ??? ??? if(reg.test(id)) {
??? ??? ??? ??? ??? ??? btns[i].onclick = doHideShow;
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? ??? var tmpBtn = document.getElementById('menu_1');
??? ??? ??? ??? doHideShow.apply(tmpBtn , []);
??? ??? ??? }
??? ??? ???
??? ??? ??? function doHideShow() {
??? ??? ??? ??? var divReg = /^menu_div_\d$/;
??? ??? ??? ??? var id = this.id;
??? ??? ??? ??? var num = id.split('_')[1];
??? ??? ??? ??? //显示指定的div
??? ??? ??? ??? var divs = document.getElementsByTagName('DIV');
??? ??? ??? ??? for(var i = 0 ; i < divs.length ; i++) {
??? ??? ??? ??? ??? if(divs[i].id != undefined) {
??? ??? ??? ??? ??? ??? if(divReg.test(divs[i].id)) {
??? ??? ??? ??? ??? ??? ??? var tmpId = divs[i].id.split('_')[2];
??? ??? ??? ??? ??? ??? ??? if(num == tmpId) {
??? ??? ??? ??? ??? ??? ??? ??? divs[i].style.display = 'block';
??
