JavaScript之实现单选复选菜单以及返回顶部实例
Posted 蜗牛仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之实现单选复选菜单以及返回顶部实例相关的知识，希望对你有一定的参考价值。
1、单选、复选以及反选实例
其实主要是利用for循环提取标签，然后更改checked属性值实现的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="Reverse();"> <!--//ondblclick表示双击--> </div> <table> <thead> <th>序号</th> <th>用户名</th> <th>年龄</th> </thead> <tbody id="tb"> <tr> <td><input class="c1" type="checkbox"/></td> <td>jay</td> <td>23</td> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>Bob</td> <td>23</td> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>peter</td> <td>23</td> </tr> </tbody> <script type="text/javascript"> function CheckAll() { var tb = document.getElementById(\'tb\'); var checks = tb.getElementsByClassName(\'c1\'); for (var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = true; // 循环每一个标签 } } function CancleAll() { var tb = document.getElementById(\'tb\'); var checks = tb.getElementsByClassName(\'c1\'); for (var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = false; // 循环每一个标签 } } function Reverse() { var tb = document.getElementById(\'tb\'); var checks = tb.getElementsByClassName(\'c1\'); for (var i = 0; i < checks.length; i++) { var current_check = checks[i]; if (current_check.checked) { current_check.checked = false; } else { current_check.checked = true; } } } </script> </table> </body> </html>
2、tab菜单实例
利用一种对应关系，实现一个tab菜单，主要思路是绑定每两个选项的关系，即当选中一个，则显示出与之对应的选项框，利用for循环实现显示与否
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background-color: blue;
color: black;
padding: 10px 12px;
}
.clearfix:after {
display: block;
content: \'.\';
height: 0;
visibility: hidden;
clear: both;
}
.tab-menu .title{
background-color: bisque;
}
.tab-menu .content{
border: 1px solid black;
min-height: 150px;
}
.hide{
display: none;
}
.tab-menu .title .active{
background-color: white;
color:red ;
}
/*选中时候的状态*/
</style>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target=\'h1\' class="active" onclick="Show(this);">价格趋势</li>
<li target=\'h3\' onclick="Show(this);">市场分布</li>
<li target=\'h2\' onclick="Show(this);">其他</li>
</ul>
</div>
<div id="jay" class="content">
<div con="h1">contnet1</div>
<div con="h2" class="hide">contnet2</div>
<div con="h3" class="hide">contnet3</div>
</div>
</div>
</div>
<script>
function Show(ths) {
//args表示当前标签
var target=ths.getAttribute(\'target\');
//给自己添加样式active，兄弟标签则去掉
ths.className=\'active\';
var brothers = ths.parentElement.children;
for (var i=0;i<brothers.length;i++){
if(ths == brothers[i]){
}else{brothers[i].removeAttribute(\'class\')}
}
var contents = document.getElementById(\'jay\').children;
for(var j=0;j<contents.length;j++){
var current_content =contents[j];
var con = current_content.getAttribute(\'con\')
if(con == target){
current_content.classList.remove(\'hide\')
}else{current_content.className=\'hide\'}
}
}
</script>
</body>
</html>
执行结果如图所示，点击则会切换
3、往页面列表里面自动添加输入的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<input type="text">
<input type="button" value="添加" onclick="foo(this)">
</div>
<div>
<ul id="commentList">
<li>jay</li>
<li>BOb</li>
</ul>
</div>
<script>
function foo(ths) {
var val = ths.previousElementSibling.value;
console.log(val);
var ret = document.getElementById(\'commentList\');
var str = "<li>" + val + "</li>";
ret.insertAdjacentHTML(\'beforeEnd\', str);//该方法只能添加字符串
ths.previousElementSibling.value = \'\';
// 第二种方法
var tag = document.createElement(\'li\');
tag.innerText = val;
ret.appendChild(tag);
}
</script>
</body>
</html>
执行结果如
图
可以往下面随便添加内容
insertAdjacentHTML第一个参数有多种用法，如图
3、克隆移动标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 id="h1">333</h2>
<div id="container">
<div class="item">1</div>
<div class="item">1</div>
</div>
<script>
var h =document.getElementById(\'h1\');
var c=document.getElementById(\'container\');
var newH = h.cloneNode(true);//没有true参数的话，不会克隆标签里面的东西
c.appendChild(newH)
</script>
</body>
</html>
执行结果如图
4、返回顶部
scrollTop表示的是离顶部的距离，可以调节这个属性的数值，随时返回顶部，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.go_top{
position: fixed;
right:27px;
bottom: 40px;
width:50px;
height: 40px;
background-color: black;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="Func()">
<!--只要触动滚轮，就触动发该函数-->
<div id="i1" style="height: 3000px;background-color: aqua;margin:0 ">
<h1>你好</h1>
</div>
<div id="i2" class="go_top hide">
<a href="javascript:void (0)" onclick="goTop();">返回顶部</a>
<!--href="javascript:void (0)表示什么也不干-->
</div>
<script>
function goTop() {
document.body.scrollTop=0
}
// 返回顶部
function Func() {
console.log(123);
var scrollTop=document.body.scrollTop;
var li=document.getElementById(\'i2\');
if(scrollTop>150){
li.classList.remove(\'hide\')
}else{
li.classList.add(\'hide\')
}
}
//距离大于50px才触发函数，让这个返回顶部的框框显示出来
</script>
</body>
</html>
5计时器执行函数
如图，主要是setInterval方法的使用
以上是关于JavaScript之实现单选复选菜单以及返回顶部实例的主要内容，如果未能解决你的问题，请参考以下文章