用html和JavaScript和jsp写首页和计算找零和商品新增和商品列表

时间: 2024-01-30 11:01:49 浏览: 76

简单计算器：使用html，css和JavaScript

在本项目中，"简单计算器：使用HTML，CSS和JavaScript"是一个基础的前端开发实例，它展示了如何利用这三种核心技术构建一个基本的交互式计算器。HTML负责构建网页结构，CSS用于美化界面，而JavaScript则实现了计算器的功能逻辑。下面将详细阐述这三个方面的知识点。 **HTML（HyperText Markup Language）** HTML是网页的基础，它定义了网页的结构和内容。在创建简单计算器时，HTML会创建一系列的按钮元素，分别代表数字、运算符以及清除和等于键。例如，`<button>`标签用于创建按钮，通过`value`属性设置按钮显示的文本和对应的计算功能。同时，HTML还会包含一个输入框`<input>`，用于显示用户的输入和计算结果。 ```html <div id="calculator"> <input type="text" id="display" disabled> <div class="buttons">  </div> </div> ``` **CSS (Cascading Style Sheets)** CSS用于美化HTML元素，提供布局和视觉效果。在简单计算器项目中，CSS可以用来设定按钮的大小、颜色、边框、间距等样式，以及整体计算器的布局。使用CSS选择器如类选择器（`.class`）或ID选择器（`#id`）来指定特定元素的样式。 ```css #calculator { display: flex; flex-direction: column; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } button { background-color: #f2f2f2; padding: 10px; border: none; font-size: 18px; } ``` **JavaScript** JavaScript是实现计算器功能的核心，它处理用户与网页的交互。当用户点击按钮时，JavaScript会捕获事件，更新输入框的值，并根据需要执行相应的计算。JavaScript中的`addEventListener`方法用于监听按钮的点击事件，`innerHTML`或`value`属性用来获取和修改HTML元素的内容。 ```javascript const buttons = document.querySelectorAll('.buttons button'); const display = document.getElementById('display'); buttons.forEach(button => { button.addEventListener('click', () => { const value = button.value; // 根据value的值进行不同的操作，例如： if (!isNaN(value)) { display.value += value; } else if (value === '=') { try { display.value = eval(display.value); } catch { display.value = '错误'; } } else if (value === 'C') { display.value = ''; } }); }); ``` 以上代码中，`eval()`函数用于执行计算表达式，但要注意其安全性问题，因为`eval`会执行任何JavaScript代码，可能导致安全风险。在实际应用中，通常会用更安全的方式来解析和执行数学表达式。总结，这个简单计算器项目是一个很好的学习实践，涵盖了前端开发的基本技术栈：HTML、CSS和JavaScript。通过这个项目，开发者可以了解如何结合这三个技术创建动态、交互式的Web应用。

好的，以下是一个示例代码，您可以根据您的需求进行修改和扩展。首先，我们需要一个HTML页面来显示商品列表和计算找零的表单。以下是一个简单的HTML页面示例： ```html <!DOCTYPE html> <html> <head> <title>商品列表和找零计算器</title> <meta charset="UTF-8"> </head> <body> <h1>商品列表</h1> <table> <tr> <th>商品编号</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> </tr> <tr> <td>001</td> <td>手机</td> <td>2000</td> <td>10</td> </tr> <tr> <td>002</td> <td>电脑</td> <td>5000</td> <td>5</td> </tr> <tr> <td>003</td> <td>平板</td> <td>3000</td> <td>8</td> </tr> </table> <hr> <h1>找零计算器</h1> <form> <label for="price">商品价格：</label> <input type="text" id="price" name="price"><br> <label for="paid">实付金额：</label> <input type="text" id="paid" name="paid"><br> <button type="button" onclick="calculate()">计算找零</button> <p id="change"></p> </form> <hr> <h1>新增商品</h1> <form action="add_product.jsp" method="post"> <label for="id">商品编号：</label> <input type="text" id="id" name="id"><br> <label for="name">商品名称：</label> <input type="text" id="name" name="name"><br> <label for="price">商品价格：</label> <input type="text" id="price" name="price"><br> <label for="quantity">商品数量：</label> <input type="text" id="quantity" name="quantity"><br> <button type="submit">新增商品</button> </form> </body> </html> ``` 接下来，我们需要编写JavaScript代码来实现计算找零的功能。以下是一个简单的JavaScript代码示例： ```javascript function calculate() { var price = parseFloat(document.getElementById("price").value); var paid = parseFloat(document.getElementById("paid").value); var change = paid - price; document.getElementById("change").innerHTML = "找零：" + change.toFixed(2) + "元"; } ``` 最后，我们需要编写一个JSP页面来处理新增商品的请求。以下是一个简单的JSP页面示例： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String id = request.getParameter("id"); String name = request.getParameter("name"); double price = Double.parseDouble(request.getParameter("price")); int quantity = Integer.parseInt(request.getParameter("quantity")); // 在这里进行新增商品的处理 %> <!DOCTYPE html> <html> <head> <title>新增商品结果</title> <meta charset="UTF-8"> </head> <body> <h1>新增商品结果</h1> <p>商品编号： <%= id %></p> <p>商品名称： <%= name %></p> <p>商品价格： <%= price %></p> <p>商品数量： <%= quantity %></p> <p>商品已成功添加！</p> </body> </html> ``` 以上是一个简单的示例代码，您可以根据您的具体需求进行修改和扩展。希望对您有所帮助！

阅读全文

用html和JavaScript和jsp写首页和计算找零和商品新增和商品列表

相关推荐

java+jsp编写的购物网站

用jsp写的网上商城

用html和JavaScript和jsp写首页，计算找零，商品新增，商品列表

javascript检验jsp

jsp和javascript写的无刷新聊天室及源代码

利用javascript技术计算商品总价

jsp javascript html 技术讲座 实例

关于JSP和JavaScript的探析

基于JAVA JSP网上书店系统的毕业设计，JSP和Servlet技术，前端HTML、CSS和JavaScript，MySQL

JS和HTML和JAVAScript写的弹弹球小游戏.html

基于Html和JavaScript的DsnFeeCalc勘测设计费计算源码

html css javascript jsp servelet等超详细教程

关于JSP和JavaScript的探析.pdf

动态网页 源代码及图片 Javascript jsp html

jsp.war.rar_JSP.w_javascript_jsp war_jsp.war_jsp登陆

用html+javascript读写txt文件

JavaScript ES6新增特性

jsp+javascript收集

JavaScript实现硬币找零应用程序

最新推荐

vs2019安装和使用详细图文教程

用html5的canvas和JavaScript创建一个绘图程序的简单实例

Visual Studio和Visual Studio Code之间有什么区别

vue 实现在同一界面实现组件的动态添加和删除功能

jQuery实现冻结表格行和列

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

jsp javascript html 技术讲座实例

动态网页源代码及图片 Javascript jsp html