jQuery(實例)

来源:https://www.cnblogs.com/zmdComeOn/archive/2019/08/12/11340095.html
-Advertisement-
Play Games

1.開關燈效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <i ...


1.開關燈效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="開關" />
    <div class="c1 hide">假裝現在有效果了</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            /* 第一種方法
            if($('.c1').hasClass('hide')){
                $('.c1').removeClass('hide')
            }else {
                $('.c1').addClass('hide')
            }   */
            //jquery實現方法
            $('.c1').toggleClass('hide')
        })
    </script>
</body>
</html>
View Code

2.模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shade{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.6) ;
            z-index: 20;
        }
        .modal{
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 30;
            border: 1px solid #ddd;
            background-color: white;
        }
        .hide{
            display: none;
        }
        .modal form {
            position: fixed;
            left: 50%;
            top: 50%;
            height: 200px;
            width: 229px;
            border: 1px;
            margin-left: -115px;
            margin-top: -100px;
        }
        .modal form p {
            float: right;
            margin-top: 12px;
        }
        .modal form span {
            float: right;
            display: inline-block;
            height: 18px;
            width: 170px;
            background-color: #FFEBEB;
            text-align: center;
            border: 1px solid #ffbdbe;
            color: #e4393c;
            font-size: 14px;
            visibility: hidden;
        }
        .modal form [type="button"] {
            position: absolute;
            bottom: -30px;
            left: 115px;
        }
        .modal form [value="提交"]{
            left: 50px;
        }
    </style>
</head>
<body>
    <div style="width: 300px; margin: 0 auto">
        <input type="button" value="添加主機" onclick="return Add();" />
        <table style="border: 2px solid #F5F5F5; width: 300px;">
            <thead>
                <tr>
                    <th >主機名</th>
                    <th >IP</th>
                    <th >埠</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td target="host">c1.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
               <tr>
                    <td target="host">c2.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
                <tr>
                    <td target="host">c3.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
                <tr>
                    <td target="host">.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="shade hide"></div>
    <div  class="modal hide">
        <form action="" method="get">
            <p>主機名:<input type="text" id="host" name="host"><br><span></span></p>
            <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>
            <p>埠號:<input type="text" id='port' name="port"><br><span></span><br></p>
            <input type="button" value="提交" onclick="return SubmitForm();">
            <input type="button" value="取消" onclick="HideModal();">
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
           $("tr:even").css("background-color","#f5f5f5");
        });
        function Edit(ths) {
            $(".shade,.modal").removeClass("hide");
            prevList = $(ths).prevAll();
            prevList.each(function () {
                var text = $(this).text();
                var target = $(this).attr("target");
                $("#"+target).val(text);
            });
        }
        function HideModal() {
            $(".shade,.modal").addClass("hide");
            $(".modal").find("input[type='text']").val("");
            Addd = false;
        }
        function SubmitForm() {
            var flag = Detection();

            try {
                    if (Addd && flag){
                    $("tbody").append($("tr").last().clone());
                    $(".modal").find("input[type='text']").each(function () {
                        var value = $(this).val();
                        var name = $(this).attr("name");
                        ($("tr").last().children()).each(function () {
                            if ($(this).attr("target") == name){
                                $(this).text(value);
                                return
                            }
                                }
                        )});
                    Addd = false;
                    HideModal();
                    return false;
                }
            }catch (e){}


            if (flag){
                $(".modal").find("input[type='text']").each(function () {
                    var value = $(this).val();
                    var name = $(this).attr("name");
                    $(prevList).each(function () {
                        if ($(this).attr("target") == name){
                            $(this).text(value);
                            return
                        }
                            }
                    )});
                    $(".modal,.shade").addClass("hide");
                    HideModal();
                }
            return flag;
            }


        function Detection() {
            var flag = true;
            $(".modal").find("input[type='text']").each(function () {
                var value = $(this).val();
                if (value.length == 0){
                    $(this).next().next().css("visibility","visible").text("親，不能為空");
                    flag = false;
                    return false;
                }else {
                    $(this).next().next().css("visibility","hidden").text("");
                }

                if ($(this).attr('name') == "host"){
                    var r = /(\.com)$/;
                    if (r.test(value) == false){
                        $(this).next().next().css("visibility","visible").text("主機名必須以.com結尾");
                        flag = false;
                        return false;
                }
                }else if ($(this).attr('name') == "ip"){
                    var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/;
                    if (r2.test(value) == false){
                        $(this).next().next().css("visibility","visible").text("ip 地址格式有誤");
                        flag = false;
                        return false;
                    }
                }else if ($(this).attr('name') == "port"){
                    var r3 = /^([0-9]{1,5})$/;
                    if ((r3.test(value) == false) || (value > 65535)){
                        $(this).next().next().css("visibility","visible").text("埠必須為0-65535");
                        flag = false;
                        return false;
                    }
                }else {
                    $(this).next().next().css("visibility","hidden").text("");
                }
        });
        return flag;
        }

        function Add() {
            Addd = true;
            $(".shade,.modal").removeClass("hide");
        }
    </script>
</body>
</html>
View Code

3.點擊菜單顯示對應的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .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" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            //點擊menu-item，加上active，同時兄弟標簽去掉active
            $(this).addClass('active').siblings().removeClass('active');
            //獲取a的屬性值2
            var target = $(this).attr('a');
            $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');
            // '[b="'+target+'"]'  字元串的拼接，找到content兒子裡面屬性等於2的，刪除掉hide，同時兄弟加上hide
        })


    </script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .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" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            //eq($(this).index())是獲取menu-item的索引
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

索引菜單欄.html
通過索引實現菜單更方便

4.編輯功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .edit-mode{
            background-color: #b3b3b3;
            padding: 8px;
            text-decoration: none;
            color: white;
        }
        .editing{
            background-color: #f0ad4e;
        }
    </style>
</head>
<body>

    <div style="padding: 20px">
        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全選" />
        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反選" />
        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">進入編輯模式</a>

    </div>
    <table border="1">
        <thead>
        <tr>
            <th>選擇</th>
            <th>主機名</th>
            <th>埠</th>
            <th>狀態</th>
        </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">線上</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下線</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">線上</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        /*
         監聽是否已經按下control鍵
         */
        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = true;
            }
        };
        window.onkeyup = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = false;
            }
        };

        /*
         按下Control，聯動表格中正在編輯的select
         */
        function MultiSelect(ths){
            if(window.globalCtrlKeyPress){
                var index = $(ths).parent().index();
                var value = $(ths).val();
                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                    $(this).parent().parent().children().eq(index).children().val(value);
                });
            }
        }
    </script>
    <script type="text/javascript">

$(function(){
    BindSingleCheck('#edit_mode', '#tb1');
});

function BindSingleCheck(mode, tb){

    $(tb).find(':checkbox').bind('click', function(){
        var $tr = $(this).parent().parent();
        if($(mode).hasClass('editing')){
            if($(this).prop('checked')){
                RowIntoEdit($tr);
            }else{
                RowOutEdit($tr);
            }
        }
    });
}

function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
    var sel= document.createElement('select');
    $.each(attrs,function(k,v){
        $(sel).attr(k,v);
    });
    $.each(csses,function(k,v){
        $(sel).css(k,v);
    });
    $.each(option_dict,function(k,v){
        var opt1=document.createElement('option');
        var sel_text = v[item_value];
        var sel_value = v[item_key];

        if(sel_value==current_val){
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
        }else{
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
        }
    });
    return sel;
}

STATUS = [
    {'id': 1, 'value': "線上"},
    {'id': 2, 'value': "下線"}
];

BUSINESS = [
    {'id': 1, 'value': "車上會"},
    {'id': 2, 'value': "二手車"}
];

function RowIntoEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var select_val = $(this).attr('sel-val');
                var global_key = $(this).attr('global-key');
                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
                $(this).html(selelct_tag);
            }else{
                var orgin_value = $(this).text();
                var temp = "<input value='"+ orgin_value+"' />";
                $(this).html(temp);
            }

        }
    });
}

function RowOutEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var new_val = $(this).children(':first').val();
                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
                $(this).attr('sel-val', new_val);
                $(this).text(new_text);
            }else{
                var orgin_value = $(this).children().first().val();
                $(this).text(orgin_value);
            }

        }
    });
}

function CheckAll(mode, tb){
    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){

            }else{
                check_box.prop('checked',true);

                RowIntoEdit(tr);
            }
        });

    }else{

        $(tb).find(':checkbox').prop('checked', true);
    }
}

function CheckReverse(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);
            }else{
                check_box.prop('checked',true);
                RowIntoEdit(tr);
            }
        });


    }else{

        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
            }else{
                check_box.prop('checked',true);
            }
        });
    }
}

function CheckCancel(mode, tb){
    if($(mode).hasClass('editing')){
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);

            }else{

            }
        });

    }else{
        $(tb).find(':checkbox').prop('checked', false);
    }
}

function EditMode(ths, tb){
    if($(ths).hasClass('editing')){
        $(ths).removeClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowOutEdit(tr);
            }else{

            }
        });

    }else{

        $(ths).addClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowIntoEdit(tr);
            }else{

            }
        });

    }
}


    </script>

</body>
</html>
View Code

5.模態對話框添加刪除功能

<!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-color: #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.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</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" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="確定" onclick="confirmModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

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

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
//            $('.modal input[type="text"]').each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 獲取td的target屬性值
                var n = $(this).attr('target');
                // 獲取td中的內容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });


//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 迴圈獲取tds中內容
            // 獲取 <td>內容</td> 獲取中間的內容
            // 賦值給input標簽中的value

        });
    </script>
</body>
</html>
View Code

6.點贊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <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;

            var tag = document.createElement('span');
            $(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 + 'px');
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(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>
View Code

7.隨滑鼠移動的框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>
View Code

8.表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用戶名" type="text" /></div>
        <div><input name="n2" tex = "密碼" type="password" /></div>
        <div><input name="n3" tex = "郵箱" type="text" /></div>
        <div><input name="
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2019.8.12
    一. javascript三種引入方式 head 頭部引入<script type="text/javascript"></script> 行內引入<p ....="javascript"></p> 例如 <a href="javascript:confim('。。。。。。。');"></a> <p ...
  • JavaScript之時間對象Date
    寫在前面：時間是物理學七大常量之一。生活中記錄時間有兩種方式（或者說有兩種計時系統）：GMT（格林尼治時間）和UTC（協調世界時間）。 一 創建Date對象 JS中的Date對象只能通過new關鍵字創建。 var now = new Date(); 需要註意的是：若將Date()作為常規函數調用（即 ...
  • HTML發展歷程
    HTML是超文本標記語言的縮寫，不同於C或JAVA等編程語言，HTML由標簽組成。通過標簽可以在網頁中插入文字、圖片、鏈接、音頻、視頻等元素，進而描述網頁。和Windows一樣，隨著技術的發展，HTML經歷了多次版本更新。 HTML1.0：1993年6月，HTML作為互聯網工程工作小組（IETF）工 ...
  • 基於 Lerna 管理 packages 的 Monorepo 項目最佳實踐
    對於維護過多個package的同學來說，都會遇到一個選擇題，這些package是放在一個倉庫里維護還是放在多個倉庫里單獨維護，本文通過一個示例講述瞭如何基於Lerna管理多個package，並和其它工具整合，打造高效、完美的工作流，最終形成一個最佳實踐 ...
  • vue.js（4）--字元串跑馬燈
    製作一個字元串的跑馬燈效果 （1）實例代碼 （2）摘要 實現案例的基本思路是利用substring截取字元串再進行拼接，然後使用定時器來達到動態的效果。 箭頭函數可以解決this的指向問題，箭頭函數內部的this相對於外部this的指向。 需要訪問data中數據時，一定要使用this訪問，比如thi ...
  • JavaScript之數學對象Math
    寫在前面：Javascript 中Math和其他對象不同，它具有數學常數和函數的屬性和方法。因為它的屬性是數學常數，所以不能被改變（可以進行賦值操作，但最後值不變）。 Math的方法就是普通函數，調用他們直接用Math.method即可，而無需使用new關鍵字創造它的實例。JS中的其他對象也有類似這 ...
  • JS遞歸及二叉搜索樹的移除節點
    1遞歸含義：在某時某刻某個條件下調用包含自己的函數 2:註意點：⑴遞歸過程中一定要加限制條件，要不然會陷入死迴圈： 死迴圈eg： 正常調用： ⑵遞歸有個過程，不是一步到位的，這一點尤其重要，因為在學習JS數據結構與演算法中的二叉搜索樹的移除代碼會至關重要，不懂遞歸過程的話很容易看不懂移除代碼 過程如下 ...
  • 19.8.12 第一天的學習
    一...........三種引入.................. 1.內部引入 <script type="text/javascript"> </script> 2.行內引入 <a href="javascript:confirm('你確定要報名嗎');" 報名</a> <p onclick= ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類