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之实现单选复选菜单以及返回顶部实例的主要内容,如果未能解决你的问题,请参考以下文章

ionic-input单选复选杂交

全选复选反选的实现

EasyUI下拉框实现多选全选复选和模糊查询

UITableView更改多选复选标记的颜色

element树形复选框实现一级菜单单选

下拉菜单和单选按钮不粘