JavaScript 示例

2023-01-03 09:07:13

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>

左侧菜单

上一篇：Salesforce小知识：累计汇总字段类型


下一篇：实体框架Entity Framework 4.1快速入门