JavaScript 示例

xiangsikai

JavaScript 示例

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="i1">泥瓦匠疯狂当上了飞机了看电视</div>
    <script>
        //创建一个函数
        function func() {
            // 根据ID获取指定标签的内容，定于局部变量接收
            var tag = document.getElementById(\'i1\');
            // 获取标签内部的内容
            var content = tag.innerText;
            // 获取内容第一个字符
            var f = content.charAt(0);
            // 获取第二个字符到最后一个字符
            var l = content.substring(1,content.length);
            // 字符串拼接
            var new_content = l + f;
            // 赋值替换变量，显示浏览器中
            tag.innerText = new_content;
        }
        // 定时器执行函数
        setInterval(\'func()\',500)
    </script>
</body>
</html>
动态文字滚动 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 隐藏标签 */
        .hide {
            display: none;
        }

        /* 页面1 */
        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        /* 页面2 */
        .c2 {
            width: 500px;
            height: 400px;
            background: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>

<!-- 去掉body两边默认边距 -->
<input style="margin: 0;"/>

<div>
    <!-- 添加按钮 -->
    <input type="button" value="添加" onclick="ShowModel()"/>
    <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>
        </thead>
        <!-- 设置表内容,定义值 -->
        <tbody id="tb">
        <!-- 指定行标签 -->
        <tr>
            <!-- 指定列标签,第一列为选择框-->
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>190</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.2</td>
            <td>191</td>
        </tr>
        </tbody>
    </table>
</div>

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

<!-- 弹出框开始 -->
<div id="i2" class="c2 hide">
    <p><input type="text"/></p>
    <p><input type="text"/></p>
    <p>
        <!-- 添加标签到页面1 -->
        <input type="button" value="取消" onclick="HideModel();"/>
        <input type="button" value="确认"/>
    </p>
</div>

<script>
    /* 删除关闭标签 */
    function ShowModel() {
        document.getElementById(\'i1\').classList.remove(\'hide\');
        document.getElementById(\'i2\').classList.remove(\'hide\');
    }

    /* 添加关闭标签 */
    function HideModel() {
        document.getElementById(\'i1\').classList.add(\'hide\');
        document.getElementById(\'i2\').classList.add(\'hide\');
    }

    /* 添加全选标签 */
    function ChooseAll() {
        var tbody = document.getElementById(\'tb\');
        // 获取所有的tr
        var tr_list = tbody.children;
        for (var i = 0; i < tr_list.length; i++) {
            // 循环所有的tr,current_tr
            var current_tr = tr_list[i];
            var checkbox = current_tr.children[0].children[0];
            // checked 修改点击框
            checkbox.checked = true;
        }
    }

    /* 添加取消标签 */
    function CancleAll() {
        var tbody = document.getElementById(\'tb\');
        // 获取所有的tr
        var tr_list = tbody.children;
        for (var i = 0; i < tr_list.length; i++) {
            // 循环所有的tr,current_tr
            var current_tr = tr_list[i];
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = false;
        }
    }

    /* 添加反选标签 */
    function ReverseAll() {
        var tbody = document.getElementById(\'tb\');
        // 获取所有的tr
        var tr_list = tbody.children;
        for (var i = 0; i < tr_list.length; i++) {
            // 循环所有的tr,current_tr
            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>

</body>
</html>
Dom全选反选遮罩层弹框 
1、input内显示请输入关键字
2、input鼠标点击后变为空
3、input鼠标离开扔是空则变为请输入关键字
------------------------------------------------------
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
    <input id="i1" onfocus="Focus();" onblur="Blur()" type="text" value="请输入关键字"/>
</div>
<script>
    function Focus() {
        var tag = document.getElementById(\'i1\');
        var val = tag.value;
        if (val == "请输入关键字") {
            tag.value = "";
        }
    }

    function Blur() {
        var tag = document.getElementById(\'i1\');
        var val = tag.value;
        if (val.length == 0) {
            tag.value = "请输入关键字";
        }
    }
</script>
</body>
</html>
------------------------------------------------------
搜索框的示例 
<body>
<input type="button" onclick="AddEle1();" value="+"/>
<input type="button" onclick="AddEle2();" value="+"/>
<div id="i1">
    <p><input type="text"/>
    <p/>
</div>
<script>
    function AddEle1() {
        // 方法一

        // 新建添加标签
        var tag = "<p><input type=\'text\' /><p/>";
        // 指定添加标签
        document.getElementById(\'i1\').insertAdjacentHTML("beforeEnd", tag);
    }

    function AddEle2() {
        // 方法二

        // 新建添加标签
        var tag = document.createElement(\'input\');
        // 新建添加属性
        tag.setAttribute(\'type\', \'text\');
        // 新建添加属性样式
        tag.style.fontSize = \'16px\';
        tag.style.color = \'red\';


        // 新建添加标签
        var p = document.createElement(\'p\');
        // 将标tag签添加到p标签内
        p.appendChild(tag);

        // 指定添加标签
        document.getElementById(\'i1\').appendChild(p);

    }
</script>
</body>
创建标签 
// 任何标签通过DOM都可以提交表单
document.getElementById(\'id\').submit()
-----------------------------------------------------
<body>
<form id="f1" action="http://www.baidu.com">
    <input type="text"/>
    <input type="submit" value="提交"/>
    <a onclick="submitForm();">提交</a>
</form>
<script>
    function submitForm() {
        document.getElementById(\'f1\').submit()
    }
</script>

</body>
</html>
-----------------------------------------------------
Dom提交表单 
<script>
    // 一、持续执定时器
    // 创建持续执行定时器对象
    var obj1 = setInterval(function () {
        console.log(1)
    }, 1000);

    // 二、定时器没执行之前就删除
    // 创建持续执行定时器对象
    var obj2 = setInterval(function () {
        console.log(1)
    }, 1000);
    // 删除定时器对象
    clearInterval(obj);

    // 三、定时器只执行一次
    // 创建持续执行定时器对象
    var obj3 = setInterval(function () {
        console.log(1);
        // 删除定时器对象
        clearInterval(obj);
    }, 1000);

    //  四、定时器只执行一次
    setTimeout(function () {
        console.log(\'1\');
    }, 5000)

</script>
单次多次定时器 
// 删除操作：删除成功后提示删除成功，5秒后提示自动消失
------------------------------------------------------
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="DeleteEle();"/>

<script>
    function DeleteEle() {
        document.getElementById(\'status\').innerText = "删除成功";
        var del = setTimeout(function () {
            document.getElementById(\'status\').innerText = "";
        }, 5000);
        // 终止定时器
        //clearTimeout(del)；
    }
</script>
</body>
------------------------------------------------------
单次定时器的其他操作 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置边框间距*/
        .container {
            padding: 50px;
            border: 1px solid #eeeeee;
        }

        /*固定边距大小*/
        .item {
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    // 点击标签触发事件
    $(\'.item\').click(function () {
        // 执行函数传入点击标签
        AddFavor(this)
    });

    // 点赞函数
    function AddFavor(self) {

        // 创建边距变量
        var fontSize = 15;
        var top = 0;
        var right = 0;
        var opacity = 1;

        // dom对象 创建span标签
        var tag = document.createElement(\'span\');
        // 向span标签内添加+1内容
        $(tag).text(\'+1\');
        // 设置字体颜色为绿色
        $(tag).css(\'color\', \'green\');
        // 添加依据父标签固定位置
        $(tag).css(\'position\', \'absolute\');
        // 添加设置边距大小
        $(tag).css(\'fontSize\', fontSize + "px");
        $(tag).css(\'right\', right + "px");
        $(tag).css(\'top\', top + "px");
        $(tag).css(\'opacity\', opacity);
        // 传入span标签到指定标签下
        $(self).append(tag);

        // 创建定时器持续时间为4秒
        var obj = setInterval(function () {
            // 添加持续值
            fontSize = fontSize + 10;
            top = top - 10;
            right = right - 10;
            // 减少透明度
            opacity = opacity - 0.1;

            // 赋值变量 40毫秒执行一次函数
            $(tag).css(\'fontSize\', fontSize + "px");
            $(tag).css(\'right\', right + "px");
            $(tag).css(\'top\', top + "px");
            $(tag).css(\'opacity\', opacity);

            // 判断透明度到看不见时就终端
            if (opacity < 0) {
                // 删除定时器
                clearInterval(obj);
                // 删除标签
                $(tag).remove();
            }

        }, 40);

    }
</script>

</body>
</html>
点赞示例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*去掉标签*/
        .hide {
            display: none;
        }

        /*菜单样式*/
        .menu {
            height: 38px;
            background-color: #eeeeee;
        }

        /*菜单一样式*/
        .menu .menu-item {
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            /*显示小手*/
            cursor: pointer;
        }

        /*菜单点击色样式*/
        .active {
            background-color: brown;
        }

        /*内容样式*/
        .content {
            min-height: 100px;
            border: 1px solid #eeeeee;
        }

    </style>
</head>
<body>

<!--菜单内容-->
<div style="width: 700px;margin: 0 auto;">

    <div class="menu">
        <div class="menu-item active">菜单一</div>
        <div class="menu-item">菜单二</div>
        <div class="menu-item">菜单三</div>
    </div>
    <div class="content">
        <div b="1">内容一</div>
        <div class="hide">内容二</div>
        <div class="hide">内容三</div>
    </div>

</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $(\'.menu-item\').click(function () {
        // 出发事件上色，并将其他兄弟标签作色去掉
        $(this).addClass(\'active\').siblings().removeClass(\'active\');
        // 获取每个标签的索引数
        var v = $(this).index();
        // 查找菜单与内容对应的标签，显示内容标签，并给其他标签添加hide
        $(\'.content\').children().eq(v).removeClass(\'hide\').siblings().addClass(\'hide\');
    })
</script>

</body>
</html>
TAB切换菜单 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*关闭标签*/
        .hide {
            display: none;
        }

        /*弹窗样式*/
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background: #eeeeee;
            z-index: 10;
        }

        /*遮罩层样式*/
        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>
</head>
<body>

<!--添加框-->
<a onclick="addElement();">添加</a>

<!--列表-->
<table border="1" id="tb">
    <tr>
        <td target="hostname">1.1.1.1</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">2.1.1.1</td>
        <td target="port">90</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">3.1.1.1</td>
        <td target="port">100</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>

<!--弹窗-->
<div class="modal hide">
    <div>
        <input name="hostname" type="text"/>
        <input name="port" type="text"/>
    </div>
    <div>
        <input type="button" value="取消" onclick="cancelModal();"/>
        <input type="button" value="确定" onclick="confirmModel();"/>
    </div>
</div>

<!--遮罩层-->
<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>
    function addElement() {
        // 触发事件后弹出遮罩层与弹窗
        $(".modal,.shadow").removeClass(\'hide\');
    }

    function cancelModal() {
        // 触发事件后删除遮罩层与弹窗
        $(".modal,.shadow").addClass(\'hide\');
        // 清空input数据以免混淆
        $(\'.modal input[type="text"]\').val("");
    }

    function confirmModel() {

        // 方案一
        // 静态添加
        // 新建tr标签
        var tr = document.createElement(\'tr\');
        // 新建td标签
        var td1 = document.createElement(\'td\');
        // 添加td标签数据
        td1.innerHTML = "11.11.11.11";
        // 添加td标签数据
        var td2 = document.createElement(\'td\');
        td2.innerHTML = "8001";
        // td标签放入tr标签内，将dom通过$（）转换为jquery
        $(tr).append(td1);
        $(tr).append(td2);
        // 放入table标签
        $(\'#tb\').append(tr);
        // 确定后取消弹框
        $(\'.modal,.shadow\').addClass(\'hide\');
    }

    $(\'.edit\').click(function () {
        // this当前点击的标签
        // 触发事件后弹出遮罩层与弹窗
        $(\'.modal,.shadow\').removeClass(\'hide\');
        // 获取横向所有内容的标签
        var tds = $(this).parent().prevAll();
        tds.each(function () {
            // 获取td中的target属性值
            var n = $(this).attr(\'target\');
            // 获取td中的内容
            var text = $(this).text();
            // 字符串拼接获取相应属性
            $(\'.modal input[name="\' + n + \'"]\').val(text);
        });
    });
    $(\'.del\').click(function () {
        // 删除行
        $(this).parent().parent().remove()
    });

</script>
</body>
</html>
模态编辑框 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>

<table border="1">
    <thead>
    <tr>
        <th>选项</th>
        <th>IP</th>
        <th>端口</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2.1.1.1</td>
        <td>90</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3.1.1.1</td>
        <td>100</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    function checkAll() {
        // 给每一个标签进行指定操作
        $(\':checkbox\').prop(\'checked\', true);
    }

    function cancleAll() {
        $(\':checkbox\').prop(\'checked\', false);
    }

    function reverseAll() {
        // .each循环选中的每一个元素
        $(\':checkbox\').each(function () {
            /*
            // 方案一
            // this,代指当前循环的每一个元素
            if(this.checked){
                this.checked = false;
            }else{
                this.checked = true;
            }
            */

            /*
           // 方案二
           // .prop如果被选中checked拿到的结果是true、反之false
           if ($(this).prop(\'checked\')){
               // .prop传一个参数为获取值、传两个参数为设置值
               $(this).prop(\'checked\',false);
           }else{
               $(this).prop(\'checked\',true);
           }
           */

            // 方案三
            // 三元运算：var v = 条件？ 真值：假值
            var v = $(this).prop(\'checked\') ? false : true;
            $(this).prop(\'checked\', v);
        })
    }
</script>
</body>
</html>
全选、多选、反选 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header {
            background-color: black;
            color: white;
        }

        .content {
            min-height: 50px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div style="height: 400px;width: 200px; border: 1px solid #eeeeee;">
    <div class="item">
        <div class="header">标题一</div>
        <div id=\'i1\' class="content">内容</div>
    </div>
    <div class="item">
        <div class="header">标题二</div>
        <div class="content hide">内容</div>
    </div>
    <div class="item">
        <div class="header">标题三</div>
        <div class="content hide">内容</div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    // 把所有class=header的标签全部绑定一个onclick事件
    $(\'.header\').click(function () {
        // 当前点击的标签$(this)

        // 方案二
        // 获取某个标签的下一个标签、删除class hide
        $(this).next().removeClass(\'hide\');
        // 查找每个兄弟标签内带有class=".content"的标签
        $(this).parent().siblings().find(\'.content\').addClass(\'hide\');

        // 方案一
        // jQuery 支持链式编程
        // $(this).next().removeClass(\'hide\').parent().siblings().find(\'.content\').addClass(\'hide\');
    })
</script>
</body>
</html>
左侧菜单

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode