JavaScript 练习

模拟对话框让其点击出来点击关闭

<style>
        .hig{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            left:0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;

        }
        .c2{
            width: 500px;
            height:300px;
            background: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        ;
        }
    </style>
</head>
<body style="margin: 0px;">
    <div>
        <input type="button" value="添加" onclick="show();"/>
        <table>
            <thead>
                <tr>
                    <th>主机名 </th>
                    <th>端口</th>
                </tr>
            <tbody>
        <tr>
            <td>1.1.1</td>
            <td>190</td>
        </tr>
        <tr>
            <td>1.1.2</td>
            <td>192</td>
        </tr>
        <tr>
            <td>1.1.3</td>
            <td>193</td>
        </tr>
        </tbody>
            </thead>
        </table>

    </div>
<!--遮罩层开始-->
<div id=i1 class="c1 hig">
<!--遮罩层结束-->

    <!--弹出框开始-->
<div id='i2'class="c2 hig">
<!--弹出框结束-->
<p><input type="text"/></p>
    <p><input type="text"/></p>
<p><input type="button"value="确定"/> <input type="button"value="取消" onclick="hie();"/></p>

</div>
<script type="text/javascript">
    function show() {
        document.getElementById('i1').classList.remove('hig')
        document.getElementById('i2').classList.remove('hig')
    }
    function hie() {
       document.getElementById('i1').classList.add('hig')
        document.getElementById('i2').classList.add('hig')
    }

</script>
   </body>

全选或者反选checked案例

 <div>
        <input type="button" value="添加" onclick="show();"/>
        <input type="button" value="全选" onclick="ChooseAll();"/>
        <input type="button" value="取消" onclick="CancleAll();"/>
        <input type="button" value="反选" onclick="ReverseAll();"/>

        <table>
            <thead>
                <tr>
                    <th>选择</th>>
                    <th>主机名 </th>
                    <th>端口</th>
                </tr>
            <tbody id="tb">
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1</td>
            <td>190</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.2</td>
            <td>192</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.3</td>
            <td>193</td>
        </tr>
        </tbody>
            </thead>
        </table>

    </div>
<!--遮罩层开始-->
<div id=i1 class="c1 hig">
<!--遮罩层结束-->

    <!--弹出框开始-->
<div id='i2'class="c2 hig">
<!--弹出框结束-->
<p><input type="text"/></p>
    <p><input type="text"/></p>
<p><input type="button"value="确定"/> <input type="button"value="取消" onclick="hie();"/></p>

</div>
<script type="text/javascript">
    function show() {
        document.getElementById('i1').classList.remove('hig')
        document.getElementById('i2').classList.remove('hig')
    }
    function hie() {
       document.getElementById('i1').classList.add('hig')
        document.getElementById('i2').classList.add('hig')
    }
    function ChooseAll() {
        var tobdy=document.getElementById('tb');
        var tr_list=tobdy.children;
        for(var i=0;i<tr_list.length;i++){
            var current_tr=tr_list[i];
            var checkbox=current_tr.children[0].children[0]
                checkbox.checked=true;
        }
    }
    function CancleAll() {
        var tobdy=document.getElementById('tb');
        var tr_list=tobdy.children;
        for(var i=0;i<tr_list.length;i++){
            var current_tr=tr_list[i];
            var checkbox=current_tr.children[0].children[0]
                checkbox.checked=false;
        }
    }
    function ReverseAll() {
        var tobdy=document.getElementById('tb');
        var tr_list=tobdy.children;
        for(var i=0;i<tr_list.length;i++){
            var current_tr=tr_list[i];
            var checkbox=current_tr.children[0].children[0]
            if(checkbox.checked){
                checkbox.checked=false
            }else{
                checkbox.checked=true
            }

        }
    }
</script>

View Code

左边菜单实现开启关闭功能

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item .header{
            height: 35px;
            width: 400px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;

        }
        .hig{
            display: none;
        }
    </style>
</head>
<body>
<div style="height:48px;"></div>
    <div style="width: 300px;">
         <div class="item">
            <div  id="i1"  class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
         <div class="item">
            <div id="i2"  class="header "onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hig">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
         <div class="item">
            <div id="i3" class="header"onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hig">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
         <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hig">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function ChangeMenu(nid) {
            var current_header=document.getElementById(nid)  //获取每个ID的值
            var item_list=current_header.parentElement.parentElement.children;//获取第一个item，再获取全部的item
            for(var i=0 ;i<item_list.length;i++){ //遍历出所有的列表
                var current_item=item_list[i]
                current_item.children[1].classList.add('hig'); //获取出列表中第一个值并增加hig 隐藏
            }
                current_header.nextElementSibling.classList.remove('hig') //取消hig，显示其他样式

        }
    </script>
</body>
</html>

posted on 2017-09-21 21:08 喵吉欧尼酱阅读(139) 评论(0) 收藏举报

刷新页面返回顶部

喵吉欧尼酱

公告