3.28 学前端 JavaScript之拾遗和实例

最新推荐文章于 2025-03-28 22:27:43 发布

原创最新推荐文章于 2025-03-28 22:27:43 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

py_web_front end 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了多种前端开发实用技巧，包括使用伪协议实现点击事件、输入框焦点事件处理、模态对话框设计、表格选择操作、下拉菜单联动及选项转移等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现onclick的另外一方式,伪协议，有的不支持

<a href="javascript:void(show())">hello</a>
<script>
    function show(){
        alert(123);
    }
</script>
//---------------------this代表当前的触发标签对象-------------------------//
<div>
    <div>
        <a href="javascript:void(show(this))">hello</a>
        <p>heawr<p>
    </div>
</div>
<script>
    function show(self){
        alert(self);
    }
</script>

2.搜索框

<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">

<script>
    function Focus(){
        var input=document.getElementById("ID1");
        if (input.value=="请输入用户名"){
            input.value="";
        }
    };
    function Blurs(){
        var ele=document.getElementById("ID1");
        var val=ele.value;
        if(!val.trim()){
            ele.value="请输入用户名";
        }
    }
</script>

3.模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }
        .hide{
            display: none;
        }
        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="back">
        <input id="ID1" type="button" value="click" onclick="action('show')">
    </div>
    <div class="shade hide"></div>
    <div class="models hide">
        <input id="ID2" type="button" value="cancel" onclick="action('hide')">
    </div>

    <script>
        function action(act){
            var ele=document.getElementsByClassName("shade")[0];
            var ele2=document.getElementsByClassName("models")[0];
            if(act=="show"){
                ele.classList.remove("hide");
                ele2.classList.remove("hide");
            }else {
                ele.classList.add("hide");
                ele2.classList.add("hide");
            }
        }
    </script>
</body>
</html>

4 全选反选取消

<button onclick="select('all');">全选</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反选</button>
<table border="1" id="Table">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>444</td>
    </tr>
</table>


<script>
    function select(choice){
        var ele=document.getElementById("Table");
        var inputs=ele.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i=i+1){
            var ele2=inputs[i];
            if (choice=="all"){
                ele2.checked=true;
            }else if(choice=="cancel"){
                ele2.checked=false;
            }
            else {
                if (ele2.checked){
                    ele2.checked=false;
                }else {
                    ele2.checked=true;
                }
            }
        }
    }
</script>

5.两级联动

<select id="province">
    <option>请选择省:</option>
</select>
<select id="city">
    <option>请选择市:</option>
</select>

<script>
    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};
    var p=document.getElementById("province");
    var c=document.getElementById("city");
    for(var i in data){
        var option_pro=document.createElement("option");
        option_pro.innerHTML=i;
        p.appendChild(option_pro);
    }
    p.onchange=function(){
        pro=(this.options[this.selectedIndex]).innerHTML;
        citys=data[pro];
        c.options.length=0;
        for (var i in citys){
            var option_city=document.createElement("option");
            option_city.innerHTML=citys[i];
            c.appendChild(option_city);
        }
    }
</script>

6.select左右移

<div id="box1">
    <select multiple="multiple" size="10" id="left">
        <option>book</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
        <option>book6</option>
    </select>
</div>

<div id="choice">
    <input class="add"     type="button" value="--->" onclick="add()"><br>
    <input class="remove"  type="button" value="<---" onclick="remove();"><br>
    <input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
    <input class="remove-all" type="button" value="<===" onclick="remall()">
</div>

<div>
    <select multiple="multiple" size="10" id="right">
    <option>book9</option>
    </select>
</div>

<script>
    function add(){
        var right=document.getElementById("right");
        var options=document.getElementById("left");
        options=options.getElementsByTagName("option");
        for (var i=0; i<options.length;i++){
            var option=options[i];
            if(option.selected==true){
                right.appendChild(option);
                i--;
            }
        }
    }

    function ADDall(){
        var right=document.getElementById("right");
        var options=document.getElementById("left");
        options=options.getElementsByTagName("option");
        for (var i=0; i<options.length;i++){
            var option=options[i];
            right.appendChild(option);
            i--;
        }
    }
</script>