js笔记（6）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>選項卡之換div</title>
<style >
#div1 .active{background: yellow;
}
#div1 div{width: 200px;height: 200px;background: #ccc;border: 1px solid #999;display: none;
}
</style>
<script>window.onload = function(){var oDiv = document.getElementById('div1');var aBtn = oDiv.getElementsByTagName('input');var aDiv = oDiv.getElementsByTagName('div');for(var i = 0;i < aBtn.length;i++){aBtn[i].index = i;aBtn[i].onclick = function (){for(var i = 0;i < aBtn.length;i++){aBtn[i].className = '';aDiv[i].style.display = 'none';}this.className = 'active';aDiv[this.index].style.display = 'block';};}};
</script>
</head>
<body>
<div id="div1"><input class="active" type="button" value="教育" /><input type="button" value="培訓" /><input type="button" value="招生" /><input type="button" value="出國" /><div style="display: block;">1111</div><div>2222</div><div>3333</div><div>4444</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------把輸入的文字點擊按鈕到div中 innerHTML<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
<style type="text/css">#div1{width: 200px;height: 150px;border: 1px solid black;}
</style>
<script type="text/javascript">window.onload = function (){var oTxt = document.getElementById('txt1');var oBtn = document.getElementById('btn1');var oDiv = document.getElementById('div1');oBtn.onclick = function(){oDiv.innerHTML = oTxt.value;}}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="設置文字" />
<div id="div1"></div>
</body>
</html>
---------------------------------------------------------------------------------
<!DOCTYPE html> ?
<html> ?
<head> ?<meta charset="utf-8"> ?<title>簡易日歷之失敗作品</title> ?
<style type="text/css"> ?#tab{ ?width: 280px; ?height: 400px; ?margin: 0 auto; ?background: #999; ?border: 1px solid #999; ?}?#tab li{ ?<span style="white-space:pre"> </span>list-style: none;<span style="white-space:pre"> </span>float: left;<span style="white-space:pre"> </span>margin: 1px;<span style="white-space:pre"> </span>line-height:10px;<span style="white-space:pre"> </span>background: red;<span style="white-space:pre"> </span>width: 70px;<span style="white-space:pre"> </span>height: 80px;}?.active{
<span style="white-space:pre"> </span>background: yellow;
<span style="white-space:pre"> </span>}?
</style> ?
<script type="text/javascript"> ?window.onload = function(){ ?var oDiv = document.getElementById('tab'); ?var aLi = oDiv.getElementsByTagName('li'); ?var oTxt = oDiv.getElementsByTagName('div')[0]; ?for(var i = 0;i < aLi.length;i++){ ?aLi[i].index = i; ?aLi[i].onmouseover = function(){ ?for(var i = 0;i <aLi.length;i++){ ?aLi[i].className = ''; ?} ?this.style.background = 'yellow'; ?oTxt.innerHTML = 'adfadf'; ?} ?} ?} ?
</script>> ?
</head> ?
<body> ?
<div id="tab" class="calendar"> ?<ul> ?<li class="active"><h2>1</h2><p>JAN</p></li> ?<li><h2>2</h2><p>FER</p></li> ?<li><h2>3</h2><p>MAR</p></li> ?<li><h2>4</h2><p>APR</p></li> ?<li><h2>5</h2><p>MAY</p></li> ?<li><h2>6</h2><p>JUN</p></li> ?<li><h2>7</h2><p>JUL</p></li> ?<li><h2>8</h2><p>AUG</p></li> ?<li><h2>9</h2><p>SEP</p></li> ?<li><h2>10</h2><p>OCT</p></li> ?<li><h2>11</h2><p>NOV</p></li> ?<li><h2>12</h2><p>DEC</p></li> ?</ul> ?
</div> ?
</body> ?
</html> ?
總結
- 上一篇： 百度十亿级流量的搜索前端，是怎么做架构升
- 下一篇： DDD专家张逸：复杂与架构演进的关系