javaScript练习

最新推荐文章于 2024-05-04 23:20:16 发布

不是大雄也可以有哆啦a梦

最新推荐文章于 2024-05-04 23:20:16 发布

阅读量187

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/Mr_XiangShuai/article/details/112260873

版权

学习总结专栏收录该内容

55 篇文章 2 订阅

订阅专栏

1、搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input id="text1" type="text" value="请输入用户名" onfocus="Focus()" onblur="Blur()">
    <input type="submit" value="提交">
</form>
<script>
    var ele=document.getElementById("text1")
    function Focus(){
        if(ele.value=="请输入用户名"){
            <!--如果搜索框里有输入内容则不置为空-->
            ele.value=""
        }

    }
    function Blur(){
        if(!ele.value.trim()){
            <!--如果输入的内容去除空格后为空-->
            ele.value="请输入用户名"
        }
    }
</script>
</body>
</html>

2、checkbose全选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<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")
        <!--找到table标签-->
        var inputs=ele.getElementsByTagName("input")
        <!--找到input标签-->
        for(var i=0;i<inputs.length;i++){
            var input=inputs[i]
            if(choice=='all'){
                input.checked=true
            <!--通过改变input标签的checked值标记是否选中-->
            }
            if(choice=='cancel'){
                input.checked=false
            }
            if(choice=='reverse'){
                input.checked=!input.checked
            }
        }
    }
</script>
</body>
</html>

3、两级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province">
    <option>请选择省份：</option>
</select>
<select id="city">
    <option>请选择市：</option>
</select>
<script>
    var DATA = {"广东省":["广州市","深圳市","佛山市"],"广西省":["南宁市","柳州市","桂林市"],"湖南省":["长沙市","岳阳市"]}
    var province = document.getElementById("province")
    var city = document.getElementById("city")

    for(var i in DATA){
        var option_pro=document.createElement("option")
        option_pro.innerHTML=i
        province.appendChild(option_pro)
    }

    province.onchange=function () {
        // onchange事件:当改变输入框内容时触发执行
        var p=this.options[this.selectedIndex].innerHTML
        // selectedIndex可以返回下拉列表中被选中选项的索引号
        // this代指P（标签province select）
        var citys=DATA[p]
        city.options.length=0

        for(var i in citys){
            var option_cit=document.createElement("option")
            option_cit.innerHTML=citys[i]
            city.appendChild(option_cit)
        }
    }

</script>
</body>
</html>

4、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态对话框</title>
    <style>
        .back{
            background: burlywood;
            height: 2000px;
        }

        .shade{
            background: aquamarine;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.5;
        }

        .model{
            position: fixed;
            background: gold;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin-left: -100px;
            margin-top: -100px;
            /*左边框和上边框偏移100px居中*/
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>
<div class="back">
    <input type="button" value="点击" onclick="action('show')">
</div>

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

<div class="model hide">
    <input type="button" value="取消" onclick="action('hide')">
</div>
<script>
    function action(act) {
        var ele_shade=document.getElementsByClassName("shade")[0]
        var ele_model=document.getElementsByClassName("model")[0]
        if(act=="show"){
            ele_shade.classList.remove("hide")
            ele_model.classList.remove("hide")
        }
        else if (act=="hide"){
            ele_shade.classList.add("hide")
            ele_model.classList.add("hide")
        }
    }
</script>
</body>
</html>

5、select左右移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <select id="left" multiple="multiple" size="10">
        <option>book1</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
    </select>
</div>

<div>
    <input type="button" value="------->" onclick="add()"><br>
    <input type="button" value="====>" onclick="addALL()"><br>
    <input type="button" value="-------<" onclick="remove()"><br>
    <input type="button" value="====<" onclick="removeALL()">
</div>

<div>
    <select id="right" multiple="multiple" size="10">
        <option>book6</option>
    </select>
</div>
<script>
    function add() {
        var ele_right=document.getElementById("right")
        var option_book=document.getElementById("left").getElementsByTagName("option")
        for(var i=0;i<option_book.length;i++)
            if(option_book[i].selected==true){
                ele_right.appendChild(option_book[i])
                //左侧选项被加载到右侧容器，左侧容器该选项自动消失
                i--
                //将左侧选项弹出后要减一，否则紧挨着的下一个无法判断
            }
    }
    function addALL() {
        var ele_right=document.getElementById("right")
        var option_book=document.getElementById("left").getElementsByTagName("option")
        for (var i=0;i<option_book.length;i++)
        {
            ele_right.appendChild(option_book[i])
            i--
        }
    }
    function remove() {
        var ele_lef=document.getElementById("left")
        var option_book=document.getElementById("right").getElementsByTagName("option")
        for(var i=0;i<option_book.length;i++)
        {
            if(option_book[i].selected==true)
            {
                ele_lef.appendChild(option_book[i])
                i--
            }
        }
    }
    function removeALL() {
        var ele_lef=document.getElementById("left")
        var option_book=document.getElementById("right").getElementsByTagName("option")
        for(var i=0;i<option_book.length;i++)
        {
            ele_lef.appendChild(option_book[i])
            i--
        }
    }
</script>
</body>
</html>

6、伪AJAX

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <div>
            <p>请输入要加载的地址：<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="刷新" onclick="LoadPage();">
            </p>
        </div>


        <div>
            <h3>加载页面位置：</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>

        <script src="jquery-3.5.1.js"></script>
        <script type="text/javascript">

            window.onload= function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();

            };

            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                document.getElementById("iframePosition").src = targetUrl;
            }

        </script>

    </body>
</html>

7、原生AJAX

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="jquery-3.5.1.js"></script>
    <script type="text/javascript">
        // 定义创建ajax对象函数
        function GetXML(){
            var xhr = null;
            if(XMLHttpRequest)
            if(XMLHttpRequest){
                // 用来检测浏览器支持哪种ajax对象，ajax对象有两种：ActiveXObject和XMLHttpRequest
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }

        function XmlPostRequest(){
            var xhr = GetXML();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式,true代表异步
            xhr.open('POST', "test2.html", true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

        function XmlGetRequest(){
            var xhr = GetXML();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式(test2.html是自己另外创建文件)
            xhr.open('get', "test2.html", true);
            // 发送请求
            xhr.send();
        }

    </script>

</body>
</html>