前端实例练习

时间：2018-06-30 19:56:06 阅读：197 评论：0 收藏：0 [点我收藏+]

1 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
   <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>
</body>
</html>

2 模态对话框

<!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>

效果：点击按钮弹出框，只能对框内内容进行操作

技术分享图片

3 全选反选取消

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

效果

技术分享图片

4 两级联动

<!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>

效果

5 select左右移

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{
           float: left;
       }
   </style>
</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>

效果

技术分享图片

识别图中二维码,领取python全套视频资料

前端实例练习

标签：ams webp aci UI png code bee bak box

原文地址：https://www.cnblogs.com/IT-Scavenger/p/9248327.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行