zoukankan      html  css  js  c++  java

  • JavaScript例子

    模态框（JavaScript）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        .cover {
            /* 灰色的哪个背景 */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left:0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: white;
            height: 400px;
             600px;
            z-index: 1000;
            margin-left: -300px;
            margin-top: -200px;
        }
        .hide {
            display: none;
        }
    </style>
    <script>
        function showModal() {
            // 把.cover和.modal这两个div标签显示出来
            //  具体来说就是去掉这个两个标签的.hide 样式类
            // 1.找标签
//            var coverEles = document.getElementsByClassName("hide");
//            var coverEle = coverEles[0];
//            coverEle.classList.remove("hide");

            var coverEle = document.getElementsByClassName("cover")[0];
            coverEle.classList.remove("hide");

            // 显示白色筐
              var modalEle = document.getElementsByClassName("modal")[0];
            modalEle.classList.remove("hide");
        }
        function cancel() {
            var coverEle = document.getElementsByClassName("cover")[0];
            coverEle.classList.add("hide");

            // 隐藏白色筐
              var modalEle = document.getElementsByClassName("modal")[0];
            modalEle.classList.add("hide");
        }
    </script>
</head>
<body>

<input type="button" id="btn" onclick="showModal();" value="显示模态框">
<div class="cover hide"></div>
<div class="modal hide">
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">

    <input type="button" value="提交">
    <input type="button" value="取消" onclick="cancel();">
</div>
</body>
</html>
    JavaScript版本

    （jQuery）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框jQuery弹出</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 999;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
             400px;
            height: 300px;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 1000;
            background-color: white;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="点我弹出模态框">
<div class="cover hide"></div>
<div class="modal hide"></div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    var btnEle = document.getElementById("btn");
    btnEle.onclick=function () {
//        $(".cover").removeClass("hide");
//        $(".modal").removeClass("hide");
        $(".cover, .modal").removeClass("hide");  // 支持批量操作（必须是统一的操作）
    }
</script>
</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        .hide {
            display: none;
        }

        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
             500px;
            height: 300px;
            margin-top: -200px;
            margin-left: -300px;
            z-index: 1000;
            background-color: white;
        }
    </style>
</head>
<body>

<input type="button" id="b1" value="添加">
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>jassin</td>
        <td>21</td>
        <td><input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>lishi</td>
        <td>21</td>
        <td><input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    </tbody>
</table>
    <!--弹框内容start-->
    <div class="cover  hide c1"></div>

    <div class="modal hide c1">
        <p>姓名<input type="text" id="modal-name"></p>
        <p>年龄<input type="text" id="modal-hobby"></p>

        <input type="button" value="确定" id="modal-submit">
        <input type="button" value="取消" id="modal-cancel">
    </div>
    <!--弹框内容end-->



<script>
    // 显示模态框
    function showModal() {
        // 找到那2个div
        var c1Eles = document.getElementsByClassName("c1");
        for (var i = 0; i < c1Eles.length; i++) {
            c1Eles[i].classList.remove("hide");
        }
    }

    // 隐藏模态框
    function hideModal() {
        // 找到那2个div
        var c1Eles = document.getElementsByClassName("c1");
        for (var i = 0; i < c1Eles.length; i++) {
            c1Eles[i].classList.add("hide");
        }
    }

    // 找到添加按钮加事件
    var b1Ele = document.getElementById("b1");
    b1Ele.onclick = function () {
        showModal();
    };


    // 取消按钮
    var cancelEle = document.getElementById("modal-cancel");
    cancelEle.onclick = function () {
        hideModal();
    };


    // 找modal中的确定按钮，绑定事件
    var submitEle = document.getElementById("modal-submit");
    submitEle.onclick = function () {
        // 确定按钮要做的事
        //1、取到input的内容
        var nameInput = document.getElementById("modal-name");
        var hobbyInput = document.getElementById("modal-hobby");

        var name = nameInput.value;
        var hobby = hobbyInput.value;

        //2、创建tr标签
        var trEle = document.createElement("tr");
        //序号
        var tableEle = document.getElementById("t1");
        var number = tableEle.getElementsByTagName("tr").length;
        //  拼接tr
        trEle.innerHTML = "<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"></td>'

        //3、添加到tboby
        var tbodyEle = tableEle.getElementsByTagName("tbody")[0];
        tbodyEle.appendChild(trEle);

        // 4、隐藏model
        hideModal();
    };


    // 删除按钮绑定事件（一般加class = “delete”）
    var tableEle = document.getElementById("t1");
    tableEle.onclick = function () {  // 点击事件
        var currentEle = event.target;  // 当前点击的标签
        if (currentEle.classList.contains("delete")){  // 判断点击的标签有没有某个样式类
//      执行删除
            var currentTr = currentEle.parentElement.parentElement;
            var tbodyEle = tableEle.getElementsByTagName("tbody")[0];
            tbodyEle.removeChild(currentTr)
        }
    }
</script>
</body>
</html>
    View Code

    跑马灯（定时器）

    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
</head>
<body>
<h1 id="i1">---如果全世界都对你恶语相加，我就对你说上一世情话-----   </h1>
<script>
    function run() {
        // 找到id值为i1的标签
        var ele = document.getElementById("i1");
        // 获取标签的文本内容，存到str变量
        var str = ele.innerText;
        // 把字符串第一位拿出来
        var firstStr = str.charAt(0);
        // 拼到最后组成新的字符串
        var newText = str.slice(1) + firstStr;
        // 赋值给标签的文本内容
        ele.innerText = newText;
    }

    var timmer = setInterval(run, 500);
//    clearInterval(timmer);// 清除定时器

</script>
</body>
</html>
    跑马灯·1

     左侧菜单

    <!--toggle() 方法切换元素的可见状态。-->
<!--如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。-->

<!--数组类似于Python中的列表。-->

<!--var a = [123, "ABC"];-->
<!--console.log(a[1]);  // 输出"ABC"-->




<!--var d1 = document.getElementsByClassName("content");-->
<!--undefined-->
<!--d1-->
<!--d1是一个数组-->
<!--[div.content, div.content.hide, div.content.hide]-->

<!--div.content-->

<!--div.content.hide-->

<!--div.content.hide-->
<!--length:3-->
    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 30%;
            height: 1000px;
            background-color: darkslategrey;

        }

        .title {
            color: white;
            text-align: center;
            border-bottom: 1px solid rgb(28, 34, 41);
            font-size: 20px;
        }

        .right {
            width: 70%;
        }

        .content {
            color: white;
        }

        .content > div{
            border-bottom: 1px solid rgb(28, 34, 41);
            padding: 5px;
        }
        .hide { /*隐藏菜单*/
            display: none
        }
    </style>
    <script>
        function show(self) {

            // content的内容所有的隐藏
            var d1 = document.getElementsByClassName("content"); // 得到数组
            // 找到content
            for (var i = 0; i < d1.length; i++) {
                d1[i].classList.add("hide") // 函数体  功能：将content内容隐藏
            }

            //知道点哪个菜单
            var d2 = self.nextElementSibling;  // 找到这个标签下面的content标签

            // 显示该内容
            d2.classList.toggle("hide");
            console.log(d2)
        }

    </script>
</head>
<body>


<div class="left">
    <div class="item">
        <div class="title" onclick="show(this);">菜单一</div>
        <!--this为实参-->
        <div class="content hide">
            <div>肠粉</div>
            <div>牛肉粿</div>
            <div>粉粿</div>
        </div>
    </div>

    <div class="item">
        <div class="title" onclick="show(this);">菜单二</div>
        <div class="content hide">
            <div>水晶粿</div>
            <div>控窑</div>
            <div>窑番薯</div>
        </div>
    </div>

    <div class="item">
        <div class="title" onclick="show(this);">菜单三</div>

        <div class="content hide">
            <div>煎蚝烙</div>
            <div>牛肉丸</div>
            <div>粉粿</div>
        </div>
    </div>

</div>


<div class="right"></div>
</body>
</html>
    左侧菜单 JavaScript
    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 30%;
            height: 1000px;
            background-color: darkslategrey;

        }

        .title {
            color: white;
            text-align: center;
            border-bottom: 1px solid rgb(28, 34, 41);
            font-size: 20px;
        }

        .right {
            width: 70%;
        }

        .content {
            color: white;
        }

        .content > div{
            border-bottom: 1px solid rgb(28, 34, 41);
            padding: 5px;
        }
        .hide { /*隐藏菜单*/
            display: none
        }
    </style>

</head>
<body>


<div class="left">
    <div class="item">
        <div class="title">菜单一</div>
        <!--this为实参-->
        <div class="content hide">
            <div>肠粉</div>
            <div>牛肉粿</div>
            <div>粉粿</div>
        </div>
    </div>

    <div class="item">
        <div class="title">菜单二</div>
        <div class="content hide">
            <div>水晶粿</div>
            <div>控窑</div>
            <div>窑番薯</div>
        </div>
    </div>

    <div class="item">
        <div class="title" >菜单三</div>

        <div class="content hide">
            <div>煎蚝烙</div>
            <div>牛肉丸</div>
            <div>粉粿</div>
        </div>
    </div>

</div>


<div class="right"></div>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        var $titleEles = $(".title");
        $titleEles.on("click",function () {
             $(this).next().toggleClass("hide").siblings(".content").addClass("hide")
        })
        
    </script>
</body>
</html>
    jQuery

     

    全选反选

    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>作业</title>

</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>dddd
    </tr>
    <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>jassin</td>
        <td>21</td>
    </tr>
        <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>lishi</td>
        <td>21</td>
    </tr>
    </thead>
</table>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
<input type="button" value="取消" onclick="cancleAll()">
</body>
    <script>
    function checkAll() {
        var checkboxEles = document.getElementsByClassName("c1");
        for (var i = 0; i<checkboxEles.length;i++){
            checkboxEles[i].checked = true
        }
    }
    // 反选
    function reverse(){
        var checkboxEles = document.getElementsByClassName("c1");
        for (var i = 0; i<checkboxEles.length; i++){
            checkboxEles[i].checked =! checkboxEles[i].checked;
        }
    }

    //取消
    function cancleAll() {
        var checkboxEles = document.getElementsByClassName("c1");
        for (var i=0;i<checkboxEles.length; i++){
            checkboxEles[i].checked=false;
        }
    }
</script>
</html>
    JavaScript
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px" cellspacing="10" cellpadding="5">
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="input" value="c1"></td>
        <td>jassin</td>
        <td>22</td>
        <td>吃鸡</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="input" value="c2"></td>
        <td>lishi</td>
        <td>21</td>
        <td>睡觉</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="input" value="c3"></td>
        <td>lili</td>
        <td>21</td>
        <td>job</td>
    </tr>
</table>
<button class="selectall">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".selectall").on("click",function () {
        $(":checkbox").prop("checked",true)
    });
    $(".cancel").on("click",function () {
         $(":checkbox").prop("checked",false)
    });
    $(".reverse").on("click",function () {
        $(":checkbox").each(function (){
            if($(this).prop("checked")){
                $(this).prop("checked",false)
            }
            else{
              $(this).prop("checked",true)
            }
        })
    })
</script>
</body>
</html>
    jQuery
    <!DOCTYPE html>
<html lang="zh—CN">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
</head>
<body>
<input id="t1" type="button" value="添加">
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>jassin</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>lishi</td>
        <td>21</td>
    </tr>
    </tbody>
</table>

<input id="b1" type="button" value="全选">
<input id="b2" type="button" value="反选">
<input id="b3" type="button" value="取消">

<script src="jquery-3.2.1.min.js"></script>

<script>
    // 找到按钮绑定事件
    $("#b1").on("click", function () {
        $(":checkbox").prop("checked", true) // 找到所有checkbox，全选中
    });

    $("#b3").on("click", function () {
        $(":checkbox").prop("checked", false)
    });

    // each 循环
    //    $("#b2").on("click",function () {
    //        $(":checkbox").each(function () {
    //            if ($(this).prop("checked")){
    //                $(this).prop("checked",false);
    //            }else {
    //                $(this).prop("checked",true);
    //            }
    //        })
    //    })
    $("#b2").on("click", function () {
        $(":checkbox").each(function () {
            var flag = $(this).prop("checked");  // 找到选中的，然后进行取反
            $(this).prop("checked", !flag);
        })
    })

</script>

</body>
</html>
    View Code
  • 相关阅读:
    这仅仅是一份工作
    和老总之间的对话
    假设满足怎样的条件，就不去编程
    那都是别人的架构
    程序员狂想曲
    学点经济学知识（三）
    一起来看 HTML 5.2 中新的原生元素 <dialog>
    动态配置页面 之 组件系统
    初识JavaScript EventLoop
    webpack+vue-cli+ElementUI+vue-resource 前端开发
  • 原文地址：https://www.cnblogs.com/jassin-du/p/8186403.html
Copyright © 2011-2022 走看看