前端简易的登录订单页面

Mr.祝小码

已于 2023-12-25 20:11:16 修改

阅读量889

点赞数 6

分类专栏：前端文章标签：前端 javascript html5 jquery css css3 前端框架

于 2023-12-25 20:04:46 首次发布

本文链接：https://blog.csdn.net/m0_74195289/article/details/135207366

版权

前端专栏收录该内容

6 篇文章

订阅专栏

介绍：

分享一期一个前端从登录到订单价格技术的一个简易的项目

开发工具：

HBuilderX

开发技术栈：

HTML+CSS+JavaScript+JQuery

项目详情：

项目开发步骤（登录页面）：

1. 新建 HTML页面，通过 HTML标签按图 1 创建界面。

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
       
    </head>
    <body>
        <div class="content">
            <form id="loginform">
                <fieldset>
                    <legend>用户登录</legend>
                    <p>
                        <label for="email">账号:</label>
                        <input type="text" id="email" class="txt" onblur="checkName()" required />
                        <span id="emailDesc"></span>
                    </p>
                    <p>
                        <label for="psw">密码:</label>
                        <input type="password" id="psw" class="txt" onblur="checkPsw()" required />
                        <span id="pswDesc"></span>
                    </p>
                    <p>
                        <input type="button" value="登录" onclick="login()"/>
                    </p>
                </fieldset>
            </form>
        </div>
        
    </body>
</html>

添加CSS：

 <style>
     .content {
                width: 50%;
                border: 5px pink;
                margin: 0 auto;
                text-align: center;
                /* 文本居中 */
            }
        
         .txt {
                margin: 0.625rem;
                /* 文字添加间距 */
            }
        
         .content span {
                color: red;
            }
        </style>

JavaScript部分：

   // 验证账号
            function checkName() {
                var email = document.getElementById("email").value;
                var emailDesc = document.getElementById("emailDesc");
                if (email.length >= 6 && email.length <= 16) {
                    emailDesc.innerHTML = "<font color='green'>√</font>";
                    return true;
                } else if (email == "") {
                    emailDesc.innerHTML = "<font color='red'>账号不能为空</font>";
                    return false;
                } else {
                    emailDesc.innerHTML = "<font color='red'>账号长度不正确</font>";
                    return false;
                }
            }

            // 验证密码
            function checkPsw() {
                var psw = document.getElementById("psw").value;
                var pswDesc = document.getElementById("pswDesc");
                if (psw.length >= 6 && psw.length <= 16) {
                    pswDesc.innerHTML = "<font color='green'>√</font>";
                    return true;
                } else if (psw == "") {
                    pswDesc.innerHTML = "<font color='red'>密码不能为空</font>";
                    return false;
                } else {
                    pswDesc.innerHTML = "<font color='red'>密码长度在6~16位，请重新输入</font>";
                    return false;
                }
            }

            // 验证账号密码并跳转
            function login() {
                var email = document.getElementById("email").value;
                var psw = document.getElementById("psw").value;
                if (checkName() && checkPsw()) {
                    if (email == "123456" && psw == "123456") {
                        window.location.href = "cart.html";
                    }
                }
            }

这些就是登录部分的代码实现，具体页面如下：

以上就是登录部分完整的代码，写完了登录部分，接下来就是写用户点击登陆，跳转到订单的页面，并通过修改商品数量计算总金额，具体步骤如下：

项目开发步骤（订单页面）：

建立一个简单的表格页面

 <h1>欢迎您登录成功！</h1>
    <table class="tab" border="3px solid pink">
        <tr>
            <th>产品名称</th>
            <th>状态</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
        </tr>
        <tr>
            <td>iPhone 15 Pro Max 1TB 远峰蓝</td>
            <td>可购买</td>
            <td><input type="number" name="" id="quantity1" oninput="updateSubtotal(1)"/></td>
            <td>8388</td>
            <td id="subtotal1">￥</td>
        </tr>
        <tr>
            <td>小米 5 X 64G</td>
            <td>可购买</td>
            <td><input type="number" name="" id="quantity2" oninput="updateSubtotal(2)"></td>
            <td>1499</td>
            <td id="subtotal2"></td>
        </tr>
		<tr>
		    <td>小米 5 X 64G</td>
		    <td>可购买</td>
		    <td><input type="number" name="" id="quantity3" oninput="updateSubtotal(3)"></td>
		    <td>1499</td>
		    <td id="subtotal3"></td>
		</tr>
        
        <tr>
            <td colspan="5" class="cat">
                总金额:<a>￥</a><span id="spanTotal">0</span><strong>元</strong>
            </td>
        </tr>
    </table>

添加CSS样式：

<style>
		body{
			width: 50%;
			height: 50%;
			margin: 0 auto;
		}
        .tab {
            border-collapse: collapse;
            margin: 0;
        }
        tr {
            border: 3px solid pink;
        }
        table td .cat {
            float: right;
        }
        .right-align {
            float: right;
        }
        #spanTotal {
            font: bold 25px Geneva, Verdana, sans-serif;
            color: orange;
        }
        table td:hover {
            background-color: green;
        }
		
    </style>

添加JavaScript脚本事件部分：

 function updateSubtotal(row) {
            var quantityInput = document.getElementById('quantity' + row);
            var subtotalCell = document.getElementById('subtotal' + row);
            var priceCell = quantityInput.parentNode.nextElementSibling;
            
            //获取数量和价格值
            var quantity = parseInt(quantityInput.value) || 0; // Ensure it's a number
            var price = parseInt(priceCell.innerText);

            // 确保数量不能小于0
            if (quantity <= 0) {
                quantityInput.value = 1;
                quantity = 1;
            }

            // 计算小计并更新单元格
            var subtotal = quantity * price;
            subtotalCell.innerText = subtotal;

            //更新总金额
            updateTotal();
        }

        function updateTotal() {
            var totalAmount = document.getElementById('spanTotal');
            var subtotals = document.querySelectorAll('[id^="subtotal"]');
            var total = 0;

            // 通过小计来计算总价
            subtotals.forEach(function(subtotal) {
                total += parseInt(subtotal.innerText) || 0;
            });

            // 更新总金额
            totalAmount.innerText = total;
        }

以上就是订单页面具体的实现代码

订单页面（未修改数量）：

订单页面（修改数量）：

以上就是订单页面，可以通过JavaScript修改数量，计算小计和总金额的代码实现

总结：

本项目只是一个简易的前端期末考试的一个小作业，用于学习使用，该项目从搭建页面，通过判断用户名和密码来确认是否登陆成功，再到订单页面通过JavaScript事件来计算商品的小计和商品的总价，涉及到了HTML刚块级标签的布置，CSS样式搭建和JavaScript的编写，本案例没有使用JQuery，用不用JQuery完全凭自己的想法来决定。