要求
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>

转载于:https://www.cnblogs.com/awei313558147/p/11378265.html

2019.8.15几道练习题相关推荐

  1. 建立学生选课表 mysql 语句_学生选课数据库SQL语句45道练习题整理及mysql常用函数（20161019）...

    学生选课数据库SQL语句45道练习题: 一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四 ...

  2. 100道练习题，玩转Numpy模块！(上)

    100道练习题,玩转Numpy模块!(上) Numpy 介绍 Numpy 是 Python 做数据分析所必须要掌握的基础库之一.以下为入门 Numpy 的100题小练习,原为 github 上的开源项 ...

  3. [2019.7.31~2019.8.15]纪中集训游记

    开坑 这是一篇(也许会变成一套)无聊的游记. https://jzoj.net/senior/ Day0(2019.7.31) 启程 如果没记错的话,与同学们相约在机场的时间应该是9:00,然而我10 ...

  4. mysql经典45道题_MySQL查询 45道练习题

    SQL查询45道练习题 1.查询Student表中的所有记录的Sname.Ssex和Class列. select sname,ssex,class from student 2.查询教师所有的单位即不 ...

  5. 牛客10道练习题2--练习记录

    原题:牛客10道练习题2_meiribaofu的博客-CSDN博客 1.快递运输 一辆运送快递的货车,运送的快递均放在大小不等的长方体快递盒中,为了能够装载更多的快递,同时不能让货车超载,需要计算最多 ...

  6. Numpy 100道练习题+常用知识点

    目录 Numpy 100道练习题知识点总结 打印numpy配置 `np.show_config` 数组大小.元素个数.元素比特数 查询numpy函数的文档 `np.info` 获取范围数组 `np.a ...

  7. iba测评题目_关于H3CNA的40道练习题，快来做个测试吧！

    关于H3CNA的40道练习题,快来做个测试吧! 时间:2018-06-11 17:46:35 在考试之前,刷题总是避免不了的.为了能够节约时间顺带给自己考试的信心,最好是一次就能过.所以在考试之前,还 ...

  8. oracle 55道练习题

    oracle 55道练习题(若有问题请留言) EMP表 DEPT表 –1查询20号部门的所有员工信息 select * from EMP t where deptno = '20' –2查询所有工种为 ...

  9. 闭着眼睛也要会打的【数据的输入和输出有几道练习题】---- HDU1089-1096

    对于数据的输入和输出有几道练习题 HDU1089-1096 HDU1089 [google自动翻译,将就着看吧] 一个输入输出的实践(一) 问题描述 你的任务是计算A + B. 太容易了?!当然!我专 ...

最新文章

  1. JavaBean简单及使用
  2. @value 注入静态属性_SpringBoot使用@Value读取属性值
  3. linux 硬链接 软链接 简介
  4. 全球及中国新能源汽车产业应用现状与运营前景规划报告2022版
  5. springboot中接口实例化_疫情爆发在家闲出屁的我，梳理一下SpringBoot知识点
  6. 获取拍照图片，显示大图像
  7. cf769D(枚举位或运算)
  8. python 定时器_python 线程之四：定时器（Timer），非阻塞
  9. java 对象等于_java 之类对象等于对象 | 学步园
  10. java web简单线上游戏_有什么在线的编程游戏？
  11. 请使用webdav_介绍下phpdav的使用功能价值
  12. HDFS API操作的访问方式及JUnit测试类的使用
  13. vscode 转到实现方法失效_动图炫技23个鲜为人知的VS Code快捷键
  14. qpython3怎么运行代码_关于使用qpython和qpython3写程序
  15. 自律努力有目标的人生有多美
  16. 浅谈软件工程中的“原型开发”
  17. UE5 UE4 WorldCreator地形快速制作
  18. Mac系统下docker容器无法使用--net host共享宿主机端口的解决方案
  19. 给2016域用户限制登录时间并创建和删除一个OU
  20. 【目标检测】常用概念AP和mAP

热门文章

  1. 情人节消费报告出炉！这三个城市最爱送花...
  2. c#获取ssl证书有效性_c# – 获取网站SSL证书的公钥
  3. Android studio中提交svn一直卡在performing VCS commit
  4. 搜索图片及相似度探秘 二
  5. USB HID学习：数据包分析
  6. 【java】Java -jar 运行的程序如何 本地代码远程调试服务器程序
  7. 【ElasticSearch】大数据搜索选开源还是商业软件？ElasticSearch 对比 Splunk
  8. 1.1.0-简介-P6-Paxos
  9. 【Clickhouse】mutation 操作
  10. [Flink] Flink运行报错Container released on a *lost* node