练习

最新推荐文章于 2024-11-11 20:14:01 发布

rong_code

最新推荐文章于 2024-11-11 20:14:01 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhang__rong/article/details/83821828

本文介绍了一系列前端开发实用技巧，包括全选功能实现、密码输入验证、表单清除、表格颜色间隔、页面自动关闭与跳转、日期显示、省市联动下拉菜单等，旨在提升网页交互体验。

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

1.全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f() {
            var b=document.getElementsByName("b");
            for(var i=0;i<b.length;i++){
                b[i].checked=document.getElementById("a").checked;
            }
        }
        function f1() {
            var b=document.getElementsByName("b");
            var flag=false;
            for(var i=0;i<b.length;i++){
                if(b[i].checked){
                    flag=true;
                }else{
                    flag=false;
                    break;
                }
            }
            if(flag){
                document.getElementById("a").checked=true;
            }else {
                document.getElementById("a").checked=false;
            }
        }
    </script>
</head>
<body>
<input type="checkbox" id="a" onclick="f()">全选
<table border="1" cellspacing="0" cellpadding="0" width="500px" style="text-align: center">
    <tr>
        <td>选择</td>
        <td>姓名</td>
        <td>证件类型</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="b" onclick="f1()"></td>
        <td>用户1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="b" onclick="f1()"></td>
        <td>用户2</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>
  
<!DOCTYPE html>
     <html lang="en">
         <head>
         <meta charset="UTF-8">
         <title>Title</title>
         <script>
         function first() {
         var as=document.getElementsByName("one");
         var a1=document.getElementById("two");
         for (var i=0;i<as.length;i++){
             as[i].checked=a1.checked;
         }
     }
     function  cheaked() {
         var count =0;
         var aa=document.getElementById("two");
         var aa1=document.getElementsByName("one");
         for(var i=0;i<aa1.length;i++){
             if(aa1[i].checked){
                 count+=1;
                 if(count == aa1.length){
                     aa.checked=true;
                 }else {
                     aa.checked=false;
                 }
             }
         }
     }

    </script>
</head>
<body>
全选<input type="checkbox" id="two" onclick="first()">
<table border="1px" width="500px" height="100px" onchange="cheaked()">
    <tr>
        <td>选择</td>
        <td>姓名</td>
        <td>证件类型</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" onclick="cheaked()" ></td>
        <td>用户1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" onclick="cheaked()"></td>
        <td>用户2</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>

2.密码输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function A() {
            var as=document.getElementById("aa").value;
            var as1=document.getElementById("aaa").value;
            if(as==as1){
                alert("输入密码正确");
            }else {
                alert("输入两次密码不一样");
            }
        }


    </script>
</head>
<body>
<form onsubmit=" return A()">
请输入密码：<input   type="text" id="aa"><br>
请确认密码：<input   type="text" id="aaa">
<input type="submit">
</form>
</body>
</html>

3.清除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function A() {
    var username=document.getElementById("pwd");
    username.value="";
        }
    </script>
</head>
<body>
<input type="text" name="username"  value="用户名/密码" id="pwd" onfocus="A()">
</body>
</html>

4.颜色间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function oncreate() {
           var table= document.getElementById("one");
            for (var i=0;i<10;i++){
                var as=document.createElement("tr");
                var as1=document.createElement("td");
                as1.innerText="line"+i;
                as.appendChild(as1);
                table.appendChild(as);
                if(i%2==0){
                    as.setAttribute("style","background-color:green");
                }else {
                    as.setAttribute("style","background-color:red");
                }
            }
        }
    </script>
</head>
<body onload="oncreate()">
<table id="one"></table>
</body>
</html>

5.自动关闭

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

 // 方法一：
        var w=window.open("https://www.baidu.com");
 setTimeout("w.close()",2000);

 // 方法二：
        // function A() {
        //     var a=window.open("https://www.baidu.com","_blank");
        //     setTimeout(function (){
        //         a.close();
        //     },1000);
        //
        // }
    </script>
</head>
<body>
<!--<input type="submit" onclick="A()" value="自动关闭">-->
</body>
</html

6.自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function A() {
            setTimeout(function () {
                location.href="https://www.baidu.com";
            },3000);
        }
    </script>
</head>
<body>
<input type="submit" onclick="A()" value="点我3秒钟后跳转">
</body>
</html>

7.年月日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  clock() {
            var time=new Date();
            var scconds=time.getSeconds();
            var hours=time.getHours();
            var month=time.getMonth();
            var day=time.getDay();
            var year=time.getFullYear();
            var minute=time.getMinutes();
            cu=year+"年"+month+"月"+day+"日"+hours+"小时"+minute
            +"分"+scconds+"秒";
            document.getElementById("demo").innerHTML=cu;
        }
        var time1=setInterval(clock,1000);

    </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

8.省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var province =new Array();
        province[0]="辽宁省";
        province[1]="吉林省";
        province[2]="黑龙江省"
        var len=province.length;

        var citys=new Array();
        citys[0]=new Array();
        citys[1]=new Array();
        citys[2]=new Array();
        citys[0][0]="沈阳市";
        citys[0][1]="抚顺市";
        citys[0][2]="本溪市";
        citys[0][3]="辽阳市";
        citys[0][4]="鞍山市";

        citys[1][0]="吉林市";
        citys[1][1]="四平市";
        citys[1][2]="松源市";
        citys[1][3]="长春市";
        function showCity() {
          var province=document.getElementById("pro01");
          var index=province.selectdeIndex-1;

          var city=document.getElementById("city");
          city.options.length=0;
            for(var j=0;j<citys[index].length;j++){
                city.options.add(new Option(citys[index][j],index));
          }
        }
    </script>
</head>
<body>
省份：<select id="pro01" onchange="showCity()">
    <option value="">请选择省份</option>
    <script>
    for(var i=0;i<len;i++){
    document.write("<option value="+i+">"+province[i]+"</option> ");
    }
    </script>
</select>

城市：<select name="city" id="city">
    <option value="0">请选择城市</option>
</select>
</body>
</html>