JavaScript 示例

時間 2019-11-06

原文原文鏈接

JavaScript 示例css

<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全選反選遮罩層彈框

一、input內顯示請輸入關鍵字
二、input鼠標點擊後變爲空
三、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>
    // 1、持續執定時器
    // 建立持續執行定時器對象
    var obj1 = setInterval(function () {
        console.log(1)
    }, 1000);

    // 2、定時器沒執行以前就刪除
    // 建立持續執行定時器對象
    var obj2 = setInterval(function () {
        console.log(1)
    }, 1000);
    // 刪除定時器對象
    clearInterval(obj);

    // 3、定時器只執行一次
    // 建立持續執行定時器對象
    var obj3 = setInterval(function () {
        console.log(1);
        // 刪除定時器對象
        clearInterval(obj);
    }, 1000);

    //  4、定時器只執行一次
    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>

左側菜單

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。