HTML+CSS+JavaScript小案例（注册页面表单验证&轮播图&跳转主页&动态表格&select联动）

最新推荐文章于 2023-12-16 11:54:05 发布
最新推荐文章于 2023-12-16 11:54:05 发布
阅读量1.9k 收藏 30
点赞数 8
分类专栏： JavaWeb(基础学习)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37883866/article/details/104242768
版权

案例：（表单验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面+表单验证(用户名密码)</title>
    <style>


        input:focus {
            outline: none;
            box-shadow: 0 0 20px #6df4a0;
        }

        select:focus {
            outline: none;
            box-shadow: 0 0 20px #6df4a0;
        }

        textarea:focus {
            outline: none;
            box-shadow: 0 0 20px #6df4a0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: url("../image/bg.jpg") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
            background-color: #CCCCCC;

        }

        .rg_layout {

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 900px;
            height: 650px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            padding-top: 15px;
            box-shadow: 0 0 20px #0007f3;
            margin-top: -20px;
            /*opacity:0.5; 该透明度影响整体*/
        }

        .rg_left {

            float: left;
            margin: 15px;
        }

        .rg_center {

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            margin-top: -20px;
            /*float: left;*/

        }

        .rg_right {

            float: right;
            margin: 15px;
        }

        .rg_right p {
            color: white;
        }

        .rg_right a {
            color: cyan;
        }

        .p_reg_1 {
            font-size: 20px;
            color: #ffd026;
        }

        .p_reg_2 {
            font-size: 20px;
            color: #a6a6a6;
        }

        .td_left {
            color: white;
            width: 100px;

        }

        .td_right {
            color: white;
            padding-left: 15px;
            vertical-align: middle;

        }

        #username, #password, #email, #realname, #phone, #date, #desc, #verify_code {
            border: 1px solid #a6a6a6;
            border-radius: 5px;
            padding-left: 10px;
            width: 260px;
            height: 35px;
            margin-top: 10px;
        }

        #province, #hobby, #date, #gender {
            margin-top: 10px;
        }

        #img_vertify {
            vertical-align: middle;
            height: 30px;
            width: 110px;
            margin-left: 10px;
        }

        #sb_btn, #re_btn {
            width: 50px;
            height: 30px;
            background-color: #ffd026;
            border: 1px solid #ffd026;
            border-radius: 5px;
        }

    </style>


    <script>
        window.onload = function () {
            document.getElementById("form").onsubmit = function () {
                //验证用户名
                //验证密码
                //...
                //都成功则返回true
                //
                return checkUsername() && checkPassword();

            }
            //失去焦点后判断格式是否正确
            // document.getElementById("username").onblur = checkUsername;
            // document.getElementById("password").onblur = checkPassword;

            //或者内容改变一次就判断一次格式是否正确
            document.getElementById("username").oninput = checkUsername;
            document.getElementById("password").oninput = checkPassword;


        }

        function checkUsername() {
            var username = document.getElementById("username").value;
            var reg_username = /^[a-zA-Z0-9]{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("span_username");
            if (flag) {
                s_username.innerHTML = "<img height='32' width='32' style='margin-left: 5px' src='../image/right.png'>"
            } else {
                s_username.innerHTML = "<img height='32' width='34' src='../image/wrong.png'  style='margin-left: 5px'> <br> <font color='red'style='font-size: xx-small'>用户名格式错误(正确格式为6-12位字母或数字)</font>"
            }
            return flag;
        }

        function checkPassword() {
            var password = document.getElementById("password").value;
            var reg_password = /^[a-zA-Z0-9]{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("span_password");
            if (flag) {
                s_password.innerHTML = "<img height='32' width='32' src='../image/right.png'>"
            } else {
                s_password.innerHTML = "<img height='32' width='34' src='../image/wrong.png'  style='margin-left: 5px'> <br> <font color='red'style='font-size: xx-small'>密码格式错误(正确格式为6-12位字母或数字)</font>"

            }
            return flag;
        }

    </script>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p class="p_reg_1">新用户注册</p>
        <p class="p_reg_2">USER REGISTER</p>
    </div>

    <div class="rg_right">
        <p>已有账号？<a href="#">立即登录</a></p>
    </div>

    <div class="rg_center" align="center">
        <div class="rg_form">
            <form id="form" action="#" method="get">
                <table border="0" cellpadding="1px" cellspacing="0" align="center" width="100%">
                    <tr>
                        <td align="right" class="td_left">
                            <label for="username">用户名：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="username" type="text" name="username" placeholder="请输入用户名">
                            <sapn id="span_username" style="vertical-align: middle"></sapn>
                        </td>

                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="password">密码：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="password" type="password" name="password" placeholder="请输入密码">
                            <sapn id="span_password" style="vertical-align: middle"></sapn>

                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="email">Email：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="email" type="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="realname">姓名：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="realname" type="text" name="realname" placeholder="请输入姓名">
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="phone">手机号：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="phone" type="text" name="phone" placeholder="请输入手机号">
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="gender">性别：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="gender" type="radio" name="gender" value="男" checked="checked"><label
                                for="gender">男</label>
                            <input type="radio" name="gender" value="女" id="girl" style="margin-left: 10px"><label
                                for="girl">女</label>

                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="date">出生日期：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="date" type="date" name="date">
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="province">地址：</label>
                        </td>
                        <td align="left" class="td_right">
                            <select id="province" name="province" style="height: 35px; border-radius: 5px">
                                <option value="">--请选择--</option>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="hobby">爱好：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input id="hobby" type="checkbox" name="h1" value="滑板"> <label for="hobby">滑板</label>
                            <input id="gun" type="checkbox" name="h2" value="枪械" style="margin-left: 10px"><label
                                for="gun">枪械</label>
                            <input id="programming" type="checkbox" name="h3" value="编程"
                                   style="margin-left: 10px"><label for="programming">编程</label>
                        </td>

                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="desc">个性签名：</label>
                        </td>
                        <td align="left" class="td_right">
                            <textarea id="desc" name="desc" placeholder="请输入个性签名" rows="3" cols="10"></textarea>
                        </td>

                    </tr>

                    <tr>
                        <td align="right" class="td_left">
                            <label for="verify_code">验证码：</label>
                        </td>
                        <td align="left" class="td_right">
                            <input type="text" id="verify_code" name="verify_code" placeholder="请输入验证码">
                            <img id="img_vertify" src="../image/verify_code.jpg"/>
                        </td>
                    </tr>

                    <tr align="center">
                        <td colspan="3">
                            <br>
                            <input id="sb_btn" type="submit" value="注册"> &nbsp;
                            <input id="re_btn" type="reset" value="重置"> &nbsp;

                        </td>
                    </tr>


                </table>
            </form>
        </div>

    </div>

</div>


</body>
</html>

效果：
在这里插入图片描述

案例：（轮播图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图小案例</title>
    <style>
        div{
            border: 1px solid blue;
            margin: auto;
            width: 40%;
            height: 300px;
        }

        img{
            width: 100%;
            height: 100%;

        }

    </style>

</head>

<body>
<div>
<img id="img" align="center" src="../image/banner_1.jpg">
</div>
<script>
    var i=1;
    var img=document.getElementById("img");
    setInterval(fun,1000);
    function fun() {
        img.src="../image/banner_"+i+".jpg"      //  ../ 代表当前目录的上一级目录
        i++;
        if(i>3){
            i=1;
        }
    }
</script>
</body>

</html>

效果：
在这里插入图片描述

案例（自动跳转到我的主页）

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

<body>
<p align="center"><font id="second" color="red">5</font>秒后跳转到我的主页...</p>

<script>
    var ss = 5;
    var second = document.getElementById("second");

    function fun() {
        second.innerHTML = ss-- + '';
        if (ss === 0) {
            location.href = "http://www.kinggm520.cn";
            stop.clearInterval();
        }
    }
    var stop = setInterval(fun, 1000);
   
</script>

</body>
</html>

效果：
在这里插入图片描述

案例（表格的动态添加和删除）


<!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 cellspacing="0" border="1px">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

</table>


<script>
    /*
    //方式一、直接添加
        分析：
            1.添加：
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td，设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>
                2.怎么删除？
                    removeChild():通过父节点删除子节点

     */

    //1.获取按钮
    /* document.getElementById("btn_add").onclick = function(){
         //2.获取文本框的内容
         var id = document.getElementById("id").value;
         var name = document.getElementById("name").value;
         var gender = document.getElementById("gender").value;

         //3.创建td，赋值td的标签体
         //id 的 td
         var td_id = document.createElement("td");
         var text_id = document.createTextNode(id);
         td_id.appendChild(text_id);
         //name 的 td
         var td_name = document.createElement("td");
         var text_name = document.createTextNode(name);
         td_name.appendChild(text_name);
         //gender 的 td
         var td_gender = document.createElement("td");
         var text_gender = document.createTextNode(gender);
         td_gender.appendChild(text_gender);
         //a标签的td
         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);

         //4.创建tr
         var tr = document.createElement("tr");
         //5.添加td到tr中
         tr.appendChild(td_id);
         tr.appendChild(td_name);
         tr.appendChild(td_gender);
         tr.appendChild(td_a);
         //6.获取table
         var table = document.getElementsByTagName("table")[0];
         table.appendChild(tr);
     }*/

    //方式二、使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        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>

效果：
在这里插入图片描述

案例（表格全选 反选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            text-align: center;
        }

        .tr_out {
            background-color: white;
        }

        .tr_over {
            background-color: #1fbaf3;
        }
    </style>

    <script>
        //在页面加载完之后再绑定事件
        window.onload = function () {
            //给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                var cb_all = document.getElementsByName("cb_first")[0];
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = true;
                }
                cb_all.checked = true;
            }

            //给全不选选按钮绑定单击事件
            document.getElementById("selectNone").onclick = function () {
                var cbs = document.getElementsByName("cb");
                var cb_all = document.getElementsByName("cb_first")[0];
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
                cb_all.checked = false;
            }

            //给反选按钮绑定单击事件
            document.getElementById("selectReverse").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;  //将当前状态取反即可实现反选
                }
            }

            //给第一个checkBox 设置全选和全不选功能
            document.getElementsByName("cb_first")[0].onclick = function () {
                var cb_first = document.getElementsByName("cb_first")[0];
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = cb_first.checked;  //设置每一个cb的状态和第一个cb状态相同
                }
            }

            //给所有tr绑定鼠标移入元素之上事件和移出事件
            var trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () { //移入
                    this.className = "tr_over";
                }

                trs[i].onmouseout = function () { //移出
                    this.className = "tr_out";

                }
            }

        }

        //删除   这个函数要放在 window.onload 之外才有效 
        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

    </script>

</head>

<body>

<table border="1px" align="center" cellspacing="0" cellpadding="1px" width="400px">
    <caption>学生信息表</caption>
    <tr>
        <th>
            <input type="checkbox" name="cb_first">
        </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)" onclick="del(this);">删除</a>
        </td>


    </tr>
    <tr>
        <td>
            <input type="checkbox" name="cb">
        </td>

        <td>
            2
        </td>

        <td>
            黄黄
        </td>

        <td>
            女
        </td>
        <td>
            <a href="javascript:void(0)" onclick="del(this);">删除</a>
        </td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" name="cb">
        </td>

        <td>
            3
        </td>

        <td>
            四眼
        </td>

        <td>
            男
        </td>
        <td>
            <a href="javascript:void(0)" onclick="del(this);">删除</a>
        </td>
    </tr>


</table>
<div align="center" style="margin-top: 20px">
    <input id="selectAll" type="button" value="全选">
    <input id="selectNone" type="button" value="全不选">
    <input id="selectReverse" type="button" value="反选">
</div>

</body>

</html>

效果：
在这里插入图片描述

案例（提交数据到表格select二级联动)

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

    <style>
        .t {
            margin-left: 40px;
        }

        .s {
            height: 30px;
            width: 150px;
        }

        input {
            width: 100%;
            height: 25px;
        }

        .b {
            background: #1fbaf3;
            color: white;
            border: 0;
            height: 40px;
            width: 100px;
            margin-top: 20px;
            font-size: large;

        }

        .d {

            margin: 40px;
        }

        .tr {
            height: 40px;
            background: #F3F3F3;
            text-align: center;
            font-weight: bold;
        }

        .tr1 {
            height: 40px;
            text-align: center;
        }
    </style>


    <script language="JavaScript">
        var city = new Array;
        city['北京市'] = ['朝阳区', '西城区', '东城区'];
        city['河北省'] = ['石家庄', '唐山', '邯郸'];
        city['山东省'] = ['济南', '泰安', '青岛'];

        function allCity() {
            var select1 = document.getElementById("a1");
            for (var i in city) {  //这里注意遍历数组的写法
                select1.add(new Option(i, i), null);
            }
            addOption(); // 初始化选项
        }

        function addOption() {
            var select2 = document.getElementById("a2");
            var select1 = document.getElementById("a1").value;
            select2.length = 0; //每次都先清空一下市级菜单
            if (select1 != '-请选择省份-') {
                select2.add(new Option("-请选择城市-", "0"), null);
                for (var i in city[select1]) {
                    select2.add(new Option(city[select1][i], city[select1][i]), null);
                }
            } else if (select1 == '-请选择省份-') {
                select2.length = 0;
                select2.add(new Option("-请选择城市-", "0"), null);
            }
        }

        window.onload = allCity();


    </script>

</head>
<body>
<font> <b>添加地址:</b> </font>
<br>
<br>

<div class="t">
    <form  method="post">
    <table cellpadding="4px">
        <tr>
            <td>所在地区：</td>
            <td><select class="s" id="a1" onchange="addOption()" name="province">
                <option value="0">-请选择省份-</option>
                <option value="北京市">北京市</option>
                <option value="河北省">河北省</option>
                <option value="山东省">山东省</option>
            </select></td>
            <td><select class="s" id="a2" name="city">
                <option value="0">-请选择城市-</option>
            </select></td>

        </tr>

        <tr>
            <td>详细地址：</td>
            <td colspan="2"><input id="a3" type="text" name="address" required="required"></td>

        </tr>
        <tr>
            <td>收货人姓名：</td>
            <td colspan="2"><input id="a4" type="text" name="name"></td>

        </tr>
        <tr>
            <td>联系电话：</td>
            <td colspan="2"><input id="a5" type="text" name="phone"></td>
        </tr>
        <tr>
            <td><input id="btn_add" class="b" type="button" value="保存"></td>

        </tr>

    </table>
</form>
</div>

<div class="d">
    <table id="table"  cellspacing="0" border="1" width="100%">
        <tr class="tr">
            <td>收货人</td>
            <td>所在地区</td>
            <td>详细地址</td>
            <td>手机/电话</td>
            <td>操作</td>
        </tr>

    </table>

    <script>
        var btn = document.getElementById("btn_add");
        btn.onclick = function () {
            // //获取文本框的内容
            var area = document.getElementById("a1").value + document.getElementById("a2").value;
            var detailArea = document.getElementById("a3").value;
            var name = document.getElementById("a4").value;
            var phone = document.getElementById("a5").value;
            //获取table
            var table = document.getElementById("table");
            //追加一行
            if(!(detailArea.trim()===""||detailArea==null)) {
                table.innerHTML += "<tr class='tr1'>\n" +
                    "        <td>" + name + "</td>\n" +
                    "        <td>" + area + "</td>\n" +
                    "        <td>" + detailArea + "</td>\n" +
                    "        <td>" + phone + "</td>\n" +
                    "        <td> <a href=\"javascript:void(0);\" οnclick=\"defAddr(this);\" >默认地址</a> </td>\n" +
                    "        </tr>";
            }else {
                alert("详细地址不能为空！")
            }
        }
        function defAddr(obj) {
            alert("\n已添加为默认地址");

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

效果：
在这里插入图片描述

家乡的落日
关注
  • 8
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
...
09-08 2207
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
HTML5+CSS3+JavaScript网页设计案例课堂
11-14
HTML5+CSS3+JavaScript网页设计案例课堂(刘玉红编著)。该资源中包含该书籍的电子书，课程源代码，以及课堂视频。由于资源过大，请下载txt文档，文档中有百度网盘的下载地址。
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
HTML静态网页作业——我的家乡安庆
QQ_____365392777的博客
08-11 3235
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
关于html css 和 javascript的实例
weixin_44005203的博客
08-22 500
九九乘法表加表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS打印九九乘法表</title> <style media="screen"> table th{ border: 1p...
157个HTML+CSS+JavaScript前端开发24实例
10-10
157个HTML+CSS+JavaScript前端开发24实例
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 3935
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
关于Jqueryweui 的select联动用法
weixin_43820898的博客
12-24 2788
在使用Jquery weui 框架时，我想实现根据收货地址获得该条收货地址的绑定的联系人和电话。 但是又懒得根据收货地址查询联系人和联系电话。（因为收货地址都是从数据库获取的，此时不仅拿到了收货地址，还拿到了联系人和联系电话）。如果再查询数据库多此一举。 先上效果图： 在下拉框选中不同的收货地址，联系人和联系电话也会跟着变化 实现效果： <!DOCTYPE html> <ht...
JSP编写的注册页面
10-21
总的来说，这个“JSP编写的注册页面”项目涉及到前端交互设计、后端数据处理、数据库操作以及用户输入验证等多个方面，是学习和实践JSP开发的一个很好的案例。通过这个项目，开发者不仅可以深化对JSP的理解，还能...
JavaScript学习笔记及案例总结
wsgjm1314的博客
06-27 676
JavaScript 一、JavaScript简介 1.什么是JavaScript？ ‘JavaScript简称JS，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），不需要变异，可以直接运行 Web前端三层： 结构层HTML定义页面的结构 样式层CSS定义页面的样式 行为层JavaScript用来实现交互，提升用户体验 2.JavaScript作用 在客户端动态的操作页面 eg：购物车 在客户端做数据校验 在客户端发送异步请求 二、引用方式 1.内联方式 在页面中使用script标签
程序天下:JavaScript实例自学手册
07-08
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
05-03
教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
html+css登录页面
06-12
6套登录模板，可用于前后台登录模板使用。效果不错。欢迎下载试用
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
最新发布
html精品源码
12-16 3176
如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto...
web前端期末大作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript
专注于dreamweaver网页设计制作
08-09 1880
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV......
JSP处理表单的一些经验分享
fanzhenhua的专栏
03-03 717
之前在页面跳转和表单提交这一类问题上碰了不少钉子，于是想把处理这类问题的经历和见解写出来，供各位业内的同仁参考，有不对的地方，敬请斧正！ 1：超连接跳转我们在超连接的时候，常常连接到一个jsp或者Action,比如:XXX这样做会有一个问题：在test.jsp中，除你传递的param1和param2参数外,你用request.getParamter()取任何原来页面的表单元素都会为
简单网站前端示例（html+css+js）
qq_39231899的博客
07-22 7003
html代码 草莓协会 草莓协会 网站首页 二级分类1 二级分类2 二级分类3 ...
简单的基于html，css，javascript的登录注册页面
zwslovexyj的博客
04-29 528
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录注册</title> <link rel="stylesheet" type="text/css" href="./pageChange.css"/> <script src="./pageChange.js" type="text/javascript" char
HTML ,CSS ,JS 组合运用制作登录界面，注册界面，相册旋转展示界面，并相互跳转联系，源代码
qq_53162555的博客
06-10 2925
完成《个人相册》项目登录页面 要求： 1. 使用正则表达式验证邮箱 2. 密码长度至少为6位且为字母与数字的组合
使用JS+HTML+CSS创建动态轮播图教程
"使用JavaScript、HTML和CSS实现一个轮播图效果的教程，包括HTML结构、CSS样式和JavaScript功能代码的示例。" 在网页设计中，轮播效果是一种常见的元素，用于展示多张图片或内容并自动切换，给用户带来动态的视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

家乡的落日

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值