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全选反选遮罩层弹框

猜你喜欢