JavaScript 示例

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>
左侧菜单

 

posted @ 2019-02-22 12:01  kevin.Xiang  阅读(162)  评论(0编辑  收藏  举报