沧浪苏州网站建设,perl 网站开发,网站建设前期准备工作总结,网站推广适合哪种公司做实验七 JSP内置对象II
目的#xff1a;
掌握JSP内置对象的使用。理解JSP的作用域掌握session#xff0c;application对象的使用
实验要求#xff1a;
完成实验题目要求提交实验报告#xff0c;将代码和实验结果页面截图放入报告中
实验过程#xff1a;
一、结合之前…实验七 JSP内置对象II
目的
掌握JSP内置对象的使用。理解JSP的作用域掌握sessionapplication对象的使用
实验要求
完成实验题目要求提交实验报告将代码和实验结果页面截图放入报告中
实验过程
一、结合之前所学的相关技术编写代码实现以下购物车功能
编写一个页面展现商品列表静态页面页面右上方有登陆、结账和查看购物车三个按钮下方展示网站历史访问的人数用户点击商品后可以将商品加入购物车用户点击登陆跳转到登陆页面用户点击结账若已登陆跳转至结账页面否则跳转到登陆页面登陆后再跳转到结账页。用户点击查看购物车按钮跳转至购物车页面可查看购物车列表、增加商品数量或者删除商品
【参考代码】
登录页面Login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录/title
/head
body
h2登录/h2
form onsubmithandleLogin(event)divlabel forusername用户名:/labelinput typetext idusername required/divdivlabel forpassword密码:/labelinput typepassword idpassword required/divbutton typesubmit登录/button
/formscriptfunction handleLogin(event) {event.preventDefault();let username document.getElementById(username).value;let password document.getElementById(password).value;// 假设简单验证用户if (username 111 password 111) {localStorage.setItem(loggedIn, true);alert(登录成功!);window.location.href index.html;} else {alert(用户名或密码错误!);}}
/script
/body
/html
商品页面index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title商品列表/titlestyle/* 页面样式 */body {font-family: Arial, sans-serif;}nav {display: flex;justify-content: flex-end;padding: 10px;background-color: #f8f8f8;}nav button {margin-left: 10px;}.products {display: flex;gap: 20px;padding: 20px;}.product {border: 1px solid #ccc;padding: 10px;text-align: center;}footer {text-align: center;margin-top: 20px;}/style
/head
body
navbutton onclicknavigateTo(login)登录/buttonbutton onclicknavigateTo(checkout)结账/buttonbutton onclicknavigateTo(cart)查看购物车/button
/navdiv classproductsdiv classproduct onclickaddToCart(商品1)h3商品1 10元/h3p点击添加到购物车/p/divdiv classproduct onclickaddToCart(商品2)h3商品2 20元/h3p点击添加到购物车/p/divdiv classproduct onclickaddToCart(商品3)h3商品3 30元/h3p点击添加到购物车/p/div
/divfooter本网站历史访问人数123/span
/footerscriptfunction navigateTo(page) {if (page login) {window.location.href login.html;} else if (page checkout) {if (localStorage.getItem(loggedIn)) {window.location.href checkout.html;} else {window.location.href login.html;}} else if (page cart) {window.location.href cart.html;}}function addToCart(product) {let price;if (product 商品1) {price 10;} else if (product 商品2) {price 20;} else if (product 商品3) {price 30; // 新商品}let cart JSON.parse(localStorage.getItem(cart)) || [];let item cart.find(p p.name product);if (item) {item.quantity 1;} else {cart.push({ name: product, quantity: 1, price: price }); // 存储价格}localStorage.setItem(cart, JSON.stringify(cart));alert(product 已添加到购物车!);}
/script
/body
/html
购物车页面cart.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title购物车/title
/head
body
h2购物车内容/h2
ul idcartItems!-- 购物车商品列表 --
/ul
button onclickcheckout()结账/buttonscriptfunction loadCart() {let cart JSON.parse(localStorage.getItem(cart)) || [];const cartItems document.getElementById(cartItems);cartItems.innerHTML ;if (cart.length 0) {cartItems.innerHTML li购物车为空/li;return;
}cart.forEach((item, index) {const li document.createElement(li);li.textContent ${item.name} - 单价: ${item.price}元, 数量: ${item.quantity};const increaseBtn document.createElement(button);increaseBtn.textContent ;increaseBtn.onclick () changeQuantity(index, 1);const decreaseBtn document.createElement(button);decreaseBtn.textContent -;decreaseBtn.onclick () changeQuantity(index, -1);const removeBtn document.createElement(button);removeBtn.textContent 删除;removeBtn.onclick () removeItem(index);li.appendChild(increaseBtn);li.appendChild(decreaseBtn);li.appendChild(removeBtn);cartItems.appendChild(li);});}function changeQuantity(index, amount) {let cart JSON.parse(localStorage.getItem(cart)) || [];cart[index].quantity amount;if (cart[index].quantity 0) {cart.splice(index, 1);}localStorage.setItem(cart, JSON.stringify(cart));loadCart();}function removeItem(index) {let cart JSON.parse(localStorage.getItem(cart)) || [];cart.splice(index, 1);localStorage.setItem(cart, JSON.stringify(cart));loadCart();}function checkout() {if (localStorage.getItem(loggedIn)) {alert(正在跳转至结账页面...);window.location.href checkout.html;} else {alert(请先登录);window.location.href login.html;}}//初始化购物车内容loadCart();
/script
/body
/html
结账页面Checkout.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title结账/titlescriptfunction checkLoginStatus() {if (!localStorage.getItem(loggedIn)) {// 如果未登录跳转到登录页面window.location.href login.html;}}function loadCart() {let cart JSON.parse(localStorage.getItem(cart)) || [];const cartItems document.getElementById(cartItems);cartItems.innerHTML ;let total 0; // 用于计算总价if (cart.length 0) {cartItems.innerHTML li购物车为空/li;return;}cart.forEach(item {const li document.createElement(li);li.textContent ${item.name} - 单价: ${item.price}元, 数量: ${item.quantity};cartItems.appendChild(li);total item.price * item.quantity; // 累加总价});// 显示总价const totalLi document.createElement(li);totalLi.textContent 总价: ${total}元;cartItems.appendChild(totalLi);}function completeCheckout() {alert(结账成功感谢您的购买。);// 清空购物车localStorage.removeItem(cart);window.location.href index.html; // 返回到商品列表页面}function goBack() {window.location.href cart.html;}// 页面加载时检查登录状态window.onload function() {checkLoginStatus();loadCart();}/script
/head
body
h2结账/h2
h3购物车内容/h3
ul idcartItems!-- 购物车商品列表 --
/ul
button onclickcompleteCheckout()完成结账/button
button onclickgoBack()返回购物车/button
/body
/html
【运行结果】 点击“查看购物车” 点击“完成结账”清空购物车 商品未添加到购物车 二、实验心得。
使用了其他的技术来实现的购物车功能写法类似只是使用的对象不同
