2019.8.15几道练习题

要求
1、点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+
如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单
2、页面中的二级菜单最多只能有一个是展开状态

<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li>
<span class="closed" >信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li>
<span class="closed">协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>

 <script>

var spans = document.querySelectorAll('ul.tree span');
for(var i = 0;i < spans.length;i++){
spans[i].onclick = function(){
if(this.className == 'open'){
this.className = 'closed';
this.nextElementSibling.className = 'hide';
}else{
for(var j = 0;j < spans.length;j++){
if(spans[j].className == 'open'){
spans[j].className = 'closed';
spans[j].nextElementSibling.className = 'hide';
}
}
this.className = 'open';
this.nextElementSibling.className = 'show';
}
}
}

</script>

要求：
使用JavaScript完成，选项卡切换的功能：点击不同的套餐名，出现不同的套餐详情

<h2>实现多标签页效果</h2>
<ul id="tab">
<li id="tab1">10元套餐</li>
<li id="tab2">30元套餐</li>
<li id="tab3">50元包月</li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2">
30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3">
50元包月详情：<br />&nbsp;每月无限量随心打
</div>
</div>

<script>

var pris = document.getElementsByTagName('li');
for(var i = 0;i < pris.length; i++){
pris[i].onclick = function(){
for(var j = 1 ;j <= pris.length; j++){
document.getElementById('content'+j).style.zIndex ='';
}
var n = this.id.replace('tab','')
document.getElementById('content'+n).style.zIndex += '1';
}
}

</script>

下拉框的二级联动

<select name="provs" id="">
<option value="0">-请选择-</option> <!--0-->
<option value="1">湖北省</option><!--1-->
<option value="2">湖南省</option><!--2-->
<option value="3">北京市</option><!--3-->
</select>
<select name="cities" id="">
</select>

<script>

var cities = [
[],//0
[//1
{"name":"武汉市","value":101},
{"name":"宜昌市","value":102},
{"name":"孝感市","value":103},
{"name":"黄冈市","value":104},
],
[//2
{"name":"长沙市","value":201},
{"name":"娄底市","value":202},
{"name":"岳阳市","value":203},
{"name":"株洲市","value":204},
],
[//3
{"name":"朝阳区","value":301},
{"name":"海淀区","value":302},
]
]

//找到name为cities的select，保存在selCts中
var selCts = document.getElementsByName('cities')[0];
//为name为provs的元素绑定onchange时间---当选项发生改变时
document.getElementsByName('provs')[0].onchange = function(){
//每次点击先把selCts中的内容设置为空
selCts.innerHTML = '';
//通过selectedIndex获取现象中的下标
var i = this.selectedIndex;
//获取cities数组中i位置的数组
var cts = cities[i];
if(cts.length == 0){
//干嘛？
}else{
//创文档片段
var frag = document.createDocumentFragment();
for(var c = 0;c < cts.length;c++){
//创建一个option元素设置name，value
var opt = new Option(cts[c].name,cts[c].value);
//讲option追加到frag中
frag.appendChild(opt);
}
//便利结束，将frag追加到selCts中
selCts.appendChild(frag);
}
}
</script>

全选和取消全选

<table border="1px" width="500px" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="adminID"/></td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox" name="adminID"/></td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox" name="adminID"/></td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox" name="adminID"/></td>
<td>4</td>
<td>Admin</td>
<td>修改 删除</td>
</tr>
</tbody>
</table>
<script>

var cheAll = document.querySelector('table>thead th:first-child>input');
var che = document.querySelectorAll('table>tbody td:first-child>input');
cheAll.onclick = calc;
function calc(){
for(var i = 0; i < che.length;i++){
che[i].checked = this.checked;
}
}
for(var i = 0; i < che.length;i++){
che[i].onclick = calci;
function calci(){
if(this.checked == false){
cheAll.checked = false;
}
for(var i = 0,count = 0; i < che.length;i++){
if(che[i].checked == true){
count ++;
if(count == che.length){
cheAll.checked = true;
}
}
}
}
}

</script>

实现可移动的div

<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = '#f00';
div.style.top = '0';
div.style.left = '0';
div.style.position = 'absolute';
document.onkeydown = function(e){
switch(e.keyCode){
case 38:
div.style.top = Number(div.style.top.replace('px','')) - 10 + 'px';
break;
case 40:
div.style.top = Number(div.style.top.replace('px','')) + 10 + 'px';
break;
case 37:
div.style.left = Number(div.style.left.replace('px','')) - 10 + 'px';
break;
case 39:
div.style.left = Number(div.style.left.replace('px','')) + 10 + 'px';
break;
}
}
</script>
</body>