JS常用页面

最新推荐文章于 2024-04-16 12:15:20 发布

?abc!

最新推荐文章于 2024-04-16 12:15:20 发布

阅读量827

点赞数 1

分类专栏： # 小测试文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/yyuggjggg/article/details/119926647

版权

小测试专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.表格全选/全不选/反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选/全不选/反选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: orange;
        }
    </style>

    <script>
        //页面加载完后绑定事件
        window.onload = function (){
            //全选
            document.getElementById("selectAll").onclick = function (){
                var cbs = document.getElementsByName("cb");
                //遍历，实现全选
                for (var i = 0; i < cbs.length; i++) {
                    //为所有的cb状态设置为true
                    cbs[i].checked = true;
                }
            }
            //全不选
            document.getElementById("unSelectAll").onclick = function (){
                var cbs = document.getElementsByName("cb");
                //遍历，实现全不选
                for (var i = 0; i < cbs.length; i++) {
                    //为所有的cb状态设置为true
                    cbs[i].checked = false;
                }
            }
            //反选
            document.getElementById("selectRev").onclick = function (){
                var cbs = document.getElementsByName("cb");
                //遍历，实现反选
                for (var i = 0; i < cbs.length; i++) {
                    //为所有的cb状态设置为true
                    cbs[i].checked = !cbs[i].checked;
                }
            }
            //第一个
            document.getElementById("firstcb").onclick = function (){
                var cbs = document.getElementsByName("cb");
                //第一个
                for (var i = 0; i < cbs.length; i++) {
                    //为所有的cb状态设置为true
                    cbs[i].checked = this.checked;
                }
            }
            //给所有的tr绑定鼠标事件
            var trs = document.getElementsByTagName("tr");
            //遍历
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function (){
                    this.className = "over";
                }
                trs[i].onmouseout = function (){
                    this.className = "out";
                }
            }
        }
    </script>
    

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

2.实现注册功能并进行表单校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css实现注册</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("../img/register_bg.png") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        #regis{
            color: yellow;
            font-size: 20px;
        }
        #regisP{
            color: #A6A6A6;
            font-size: 20px;

        }
        .rf_center{
            /*border: 1px solid red;*/
            float: left;
            /*width: 450px;*/
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#birthday,#name,#checkCode,#tel{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkCode{
            width: 110px;
        }
        #img_checkCode{
            height: 32px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: yellow;
            border: 1px solid yellow;
        }
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        .rg_right > p:first-child{
            font-size: 10px;
        }
        .rg_right p a{
            color: pink;
        }
        .error{
            color: red;
            font-size: 15px;

        }

    </style>
    <script>
        /*

            如果都为true,则监听器方法返回true
            如果有一个为false，则监听器方法返回false
        2.定义一些方法分别校验各个表单项
        3.给各个表单绑定onblur事件
         */
        window.onload = function (){
            //1.绑定onsubmit事件
            document.getElementById("form").onsubmit = function (){
                //调用用户校验方法                chekUsername( ) ;
                //调用密码校验方法                chekPassword( ) ;

                return checkUsername() && checkPassword()
                    && checkEmail() && checkName()
                    && checkTel();
            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
            document.getElementById("email").onblur = checkEmail;
            document.getElementById("name").onblur = checkName;
            document.getElementById("tel").onblur = checkTel;

        }
        //校验用户名
        function checkUsername(){
            //获取用户名的值
            var usernmae = document.getElementById("username").value;
            //定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //判断值是否符号正则的规则
            var flag = reg_username.test(usernmae);
            //提示信息
            var s_username = document.getElementById("s_username");
            //判断
            if (flag){
                //正确提示绿色go
                s_username.innerHTML = "<img width='35px' height='25px' src='../img/gou.png'/>";
            }else {
                //提示错误
                s_username.innerHTML = "用户名格式错误";
            }
            return flag;
        }
        //校验密码
        function checkPassword(){
            //获取用户名的值
            var password = document.getElementById("password").value;
            //定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //判断值是否符号正则的规则
            var flag = reg_password.test(password);
            //提示信息
            var s_password = document.getElementById("s_password");
            //判断
            if (flag){
                //正确提示绿色go
                s_password.innerHTML = "<img width='35px' height='25px' src='../img/gou.png'/>";
            }else {
                //提示错误
                s_password.innerHTML = "密码格式错误";
            }
            return flag;
        }
        //校验密码
        function checkEmail(){
            //获取用户名的值
            var email = document.getElementById("email").value;
            //定义正则表达式
            var reg_email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
            //判断值是否符号正则的规则
            var flag = reg_email.test(email);
            //提示信息
            var s_email = document.getElementById("s_email");
            //判断
            if (flag){
                //正确提示绿色go
                s_email.innerHTML = "<img width='35px' height='25px' src='../img/gou.png'/>";
            }else {
                //提示错误
                s_email.innerHTML = "邮箱格式错误";
            }
            return flag;
        }
        //验证姓名
        function checkName(){
            //获取用户名的值
            var name = document.getElementById("name").value;
            //定义正则表达式
            var reg_name= /^[\u4e00-\u9fa5]{2,4}$/;
            //判断值是否符号正则的规则
            var flag = reg_name.test(name);
            //提示信息
            var s_name = document.getElementById("s_name");
            //判断
            if (flag){
                //正确提示绿色go
                s_name.innerHTML = "<img width='35px' height='25px' src='../img/gou.png'/>";
            }else {
                //提示错误
                s_name.innerHTML = "姓名格式错误";
            }
            return flag;
        }
        //验证手机号
        function checkTel(){
            //获取用户名的值
            var tel = document.getElementById("tel").value;
            //定义正则表达式
            var reg_tel= /^1[0-9]{10}$/;
            //判断值是否符号正则的规则
            var flag = reg_tel.test(tel);
            //提示信息
            var s_tel = document.getElementById("s_tel");
            //判断
            if (flag){
                //正确提示绿色go
                s_tel.innerHTML = "<img width='35px' height='25px' src='../img/gou.png'/>";
            }else {
                //提示错误
                s_tel.innerHTML = "姓名格式错误";
            }
            return flag;
        }
    </script>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p id="regis">新用户注册</p>
            <p id="regisP">USER REGISTER</p>
        </div>
        <div class="rf_center">
            <div class="rg_form">
                <!--    定义表单-->
                <form action="#" method="post" id="form">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" name="username" id="username" placeholder="请输入用户名">
                                <span id="s_username" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input placeholder="请输入密码" type="password" name="password" id="password">
                                <span id="s_password" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right">
                                <input placeholder="请输入邮箱账号" type="email" name="email" id="email">
                                <span id="s_email" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right">
                                <input placeholder="请输入姓名" type="text" name="name" id="name">
                                <span id="s_name" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td  class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right">
                                <input placeholder="请输入手机号" type="text" name="password" id="tel">
                                <span id="s_tel" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td  class="td_left"><label>性别</label></td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male" checked>男
                                <input type="radio" name="gender" value="female">女
                            </td>
                        </tr>
                        <tr>
                            <td  class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right">
                                <input type="date" name="birthday" id="birthday">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="checkCode">验证码</label></td>
                            <td class="td_right">
                                <input placeholder="请输入验证码" type="text" name="checkCode" id="checkCode">
                                <img id="img_checkCode" src="../img/verify_code.jpg">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input id="btn_sub" type="submit" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>

3.动态表格(实现表格的增加删除功能)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>


    </table>

<script>
    //添加
    //绑定单击事件
    // document.getElementById("btn_add").onclick = function (){
    //     //获取文本框内容
    //     var id = document.getElementById("id").value;
    //     var name = document.getElementById("name").value;
    //     var gender = document.getElementById("gender").value;
    //     //创建td，设置td的文本为文本框内容
    //     //id的td
    //     var td_id = document.createElement("td");
    //     var text_id = document.createTextNode(id);
    //     td_id.appendChild(text_id)
    //
    //     var td_name = document.createElement("td");
    //     var text_name = document.createTextNode(name);
    //     td_name.appendChild(text_name)
    //
    //     var td_gender = document.createElement("td");
    //     var text_gender = document.createTextNode(gender);
    //     td_gender.appendChild(text_gender)
    //
    //     var td_a = document.createElement("td");
    //     var ele_a = document.createElement("a");
    //     ele_a.setAttribute("href","javascript:void(0);");
    //     ele_a.setAttribute("onclick","delTr(this);")
    //     var text_a = document.createTextNode("删除");
    //     ele_a.appendChild(text_a);
    //     td_a.appendChild(ele_a);
    //
    //     //创建tr
    //     var tr = document.createElement("tr");
    //     //将td添加到tr中
    //     tr.appendChild(td_id);
    //     tr.appendChild(td_name);
    //     tr.appendChild(td_gender);
    //     tr.appendChild(td_a);
    //     //获取table，将tr添加到table中
    //     var table = document.getElementsByTagName("table")[0];
    //     table.appendChild(tr);
    // }
    document.getElementById("btn_add").onclick = function () {
        //获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];
        //追加
        table.innerHTML += "<tr>\n" +
            "            <td>"+id+"</td>\n" +
            "            <td>"+name+"</td>\n" +
            "            <td>"+gender+"</td>\n" +
            "            <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>"

    }
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }

</script>

</body>
</html>

4.轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img" src="../img/banner_1.jpg" width="100%">

    <script>
        //修改图片src属性
        var num = 1;
        function fun(){
            num++;
            if (num > 3){
                num  = 1;
            }
            var img = document.getElementById("img");
            img.src = "../img/banner_"+num+".jpg";
        }
        //定义定时器
        setInterval(fun,3000);
    </script>
</body>
</html>

5.自动跳转首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转首页</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页！
    </p>
    <script>
        //显示页面效果
        //秒数倒计时读秒
        var second = 5;
        var time = document.getElementById("time");
        function  showTime(){
            second--;
            if (second <= 0){
                location.href = "https://www.baidu.com"
            }
            time.innerHTML = second + "";
        }

        //设置定时器
        setInterval(showTime,1000)

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

?abc!

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS常用页面

1.表格全选/全不选/反选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格全选/全不选/反选</title> <style> table{ border: 1px solid; width: 500px; margin
复制链接

扫一扫