JavaScript基础学习练习篇

最新推荐文章于 2024-04-11 04:57:50 发布

假面悍匪王小明

最新推荐文章于 2024-04-11 04:57:50 发布

阅读量145

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_40663313/article/details/88921354

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 1000px;
            width: 1000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: blue;
            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: red;

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

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="取消" 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>

2、连选

<!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>
    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>
</body>
</html>

3、搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
</head>
<body>
<input id="1" type="text" value="请输入要搜索的内容：" onblur="Blurs" onfocus="Focus()">
<script>
    function Focus() {
        var input=document.getElementById("1")
        if (input.value=="请输入要搜索的内容："){
            input.value=""
        }
    };
    function Blurs() {
        var ele=document.getElementById("1");
        var val=ele.value;
        if(!val.trim()){
            ele.value="请输入用户名";
        }
    }
    Focus();
    Blurs();
</script>

</body>
</html>

4、左移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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").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").getElementsByTagName("option");
         for (var i=0; i<options.length;i++){
             var option=options[i];
             right.appendChild(option);
             i--;

         }

     }

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

5、全选单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>今天晚上吃什么水果</p>
<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>西瓜</td>
 </tr>
 <tr>
     <td><input type="checkbox"></td>
     <td>芒果</td>
 </tr>
 <tr>
     <td><input type="checkbox"></td>
     <td>菠萝</td>
 </tr>
 <tr>
     <td><input type="checkbox"></td>
     <td>苹果</td>
 </tr>
</table>


<script>
    function select(choice){
        var ele=document.getElementById("Table");

        var inputs=ele.getElementsByTagName("input");
        if(choice=="all"){
            alert("今天晚上吃所有水果！")
        }
        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>
</body>
</html>

6、切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="jquery-3.1.1.js"></script>
    <script>

    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
              <li xxx="c2" onclick="tab(this);">菜单二</li>
              <li xxx="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>

          </div>

      </div>
<script>
    function tab(self) {
//        $(self).addClass("current");
//        $(self).siblings().removeClass("current");
        $(self).addClass("current").siblings().removeClass("current");

//        alert($(self).attr("xxx"))
        var s=$(self).attr("xxx");
        $("#"+s).removeClass("hide").siblings().addClass("hide");

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

8、克隆

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


<div id="outer">
    <div class="item">
         <input type="button" value="+" onclick="fun1(this)">
        <input type="text">
    </div>
    <div class="item">
         <input type="button" value="-" onclick="fun1(this)">
        <input type="text">
    </div>


</div>



<script src="js.js"></script>
<script>
     function fun1(self) {
         var Clone=$(self).parent().clone();
         //Clone.children(":button").val("-").attr("onclick","func2(this)");

         $("#outer").append(Clone)
     }
     
     function func2(self) {
         alert(123)
         $(self).parent().remove()
     }
    
    
</script>
</body>
</html>

js部分代码太长无法上传参考我的github

https://github.com/Toxiang/jsp/blob/master/js.js