购物车的源程序

1、重新计费部分还没有做好,大家自己动手吧!
2、下一版本将用session做。
//shop_cart.jsp
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page session="true" %>
<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="bka" scope="page" class="shop.bka" />
<%
String product_type;
String action;
int product_id;
int curpage;
//商品类型
if (request.getParameter("product_type")==null){
product_type="all";
}else{
product_type=request.getParameter("product_type");
}

//页数和商品类型参数,可以在“继续购物”时返回到上次购物的页面
if (request.getParameter("curpage")==null){
curpage=1;
}else{
curpage=java.lang.Integer.parseInt(request.getParameter("curpage"));
}

//动作
if (request.getParameter("action")==null){
action="view";
}else{
action=request.getParameter("action");
}

//商品编号
if (request.getParameter("product_id")==null){
product_id=0;
}
else{
product_id=java.lang.Integer.parseInt(
 request.getParameter("product_id"));
}

int bbb;
bbb=1;

Integer num = new Integer(bbb);

//商店编号
session.putValue("shop_id",num);
//顾客username
session.putValue("guest_name","asp2001");
String guest_name=(String)session.getValue("guest_name");
Integer shop_id=(Integer)session.getValue("shop_id");
java.lang.String sql; 
java.sql.ResultSet rs;
if (action.compareTo("add")==0) {
sql="select cart_quantity from shop_cart where " 
+ "cart_shop_id=" + shop_id + " and cart_guest_id="" 
+ guest_name + "" and cart_product_id=" + product_id ;
rs = bka.executeQuery(sql);
if (rs.next()){
int cart_quantity;
cart_quantity=java.lang.Integer.parseInt(
 rs.getString("cart_quantity"))+1;
sql="update shop_cart set cart_quantity=" 
+ cart_quantity + " where cart_shop_id=" 
+ shop_id + " and cart_guest_id="" + guest_name 
+ "" and cart_product_id=" + product_id ;
rs = bka.executeQuery(sql);}
else
{
sql="insert into shop_cart (cart_shop_id,cart_guest_id,"
+"cart_product_id,cart_quantity) values ("" + shop_id 
+ "","" + guest_name + "","" + product_id + "",1)";
rs = bka.executeQuery(sql);
}
}
if (action.compareTo("clear")==0) {
sql="delete from shop_cart where cart_shop_id=" + shop_id 
+ " and cart_guest_id="" + guest_name + """;
rs = bka.executeQuery(sql);
}

if (action.compareTo("delete")==0) { 
sql="delete from shop_cart where cart_shop_id=" + shop_id 
+ " and cart_guest_id="" + guest_name + "" and cart_product_id=" 
+ product_id ;
rs = bka.executeQuery(sql);
}
%>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="610" height="2">
<tr>
<td>
<form method="POST" action="shop_cart.jsp?action=update&
product_type=<%=product_type%>&curpage=<%=curpage%>">
<table border="0" cellpadding="0" cellspacing="0" width="610" height="2">
<tr>
<td width="122" height="7"><div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" width="100%"
bordercolorlight="#FFB468" bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%">
<div align="center"><center><p>购物车</td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" 
width="100%" bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_list.jsp?shop_id=<%=shop_id%>&product_type=
<%=product_type%>&curpage=<%=curpage%>">继续购物</a>
</td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<div align="center"><center><tableborder="1" cellpadding="2" 
cellspacing="0" width="100%" bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="javascript: document.forms[0].submit()">重新计费</a></td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<table border="1" cellpadding="2" cellspacing="0" width="100%"  
bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_cart.jsp?action=clear&product_type=<%=product_type%>
&curpage=<%=curpage%>">清空购物车</a></td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<table border="1" cellpadding="2" cellspacing="0" width="100%" 
bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_order.asp">确认购买</a></td>
</tr>
</table>
</center></div></td>
</tr>
<tr align="center">
<td width="610" height="1" colspan="5">
<div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" width="100%"
bgcolor="#FDFEE2" bordercolorlight="#FFB468" bordercolordark="#FFFFFF" height="40">
<tr>
<td width="20%" height="8" align="left">商品名称</td>
<td width="10%" height="8" align="left">市场价</td>
<td width="10%" height="8" align="left">优惠价</td>
<td width="10%" height="8" align="left">数量</td>
<td width="14%" height="8" align="left">小计</td>
<td width="12%" height="8" align="left">定金比例</td>
<td width="17%" height="8" align="left">定金小计</td>
<td width="17%" height="8" align="left">删除</td>
</tr>
<%
sql="select shop_product.product_id,shop_product.product_name,
shop_product.product_price,shop_product.product_discount,
shop_cart.cart_quantity,shop_product.product_first from shop_cart,
shop_product where shop_cart.cart_shop_id=" + shop_id 
+ " and shop_cart.cart_guest_id="" + guest_name 
+ "" and shop_cart.cart_product_id=shop_product.product_id";
rs = bka.executeQuery(sql);
int total;
int total_first;
total=0;
total_first=0;
String product_name;
int product_price;
int product_discount;
int product_first;
int cart_quantity;
if (rs.next()){
while (rs.next()) {
product_id=java.lang.Integer.parseInt(rs.getString(1));
product_name=rs.getString(2);
product_price=java.lang.Integer.parseInt(rs.getString(3));
product_discount=java.lang.Integer.parseInt(rs.getString(4));
cart_quantity=java.lang.Integer.parseInt(rs.getString(5));
product_first=java.lang.Integer.parseInt(rs.getString(6));
%>

<tr>
<td width="10%" height="1" align="left">
<%=product_name%></td>
<td width="10%" height="1" align="left">
<%=product_price%></td>
<td width="10%" height="1" align="left">
<%=product_discount%></td>
<td width="10%" height="1" align="left">
<input type="text" name="<%= "t" + product_id %>" size="3" value="<%=cart_quantity%>">
</td>
<td width="14%" height="1" align="left">
<%=product_discount*cart_quantity%></td>
<td width="12%" height="1" align="left">
<%=product_first + "%"%></td>
<td width="17%" height="1" align="left">
<%=product_first*product_discount*cart_quantity/100.0%></td>
<td width="17%" height="1"><div align="center"><center><p><a href="shop_cart.jsp?action=delete&product_id=<%=product_id%>">delete</a></td>
</tr>

<%
total=total+product_discount*cart_quantity;
total_first=total_first+product_discount*cart_quantity*product_first/100;
}
%>

<tr align="center">
<td width="72%" colspan="6" height="16"><div align="right"><p>总计</td>
<td width="36%" colspan="2" height="16"><div align="left"><%=total%></td>
</tr>
<tr align="center">
<td width="72%" colspan="6" height="16"><div align="right"><p>定金总计</td>
<td width="36%" colspan="2" height="16"><div align="left"><%=total_first%></td>
</tr>
<tr align="center">
<td width="72%" colspan="6" height="16">
<div align="right"><p>结余</td>
<td width="36%" colspan="2" height="16">
<div align="left"><%=total-total_first%>
</td>
</tr>
</table>
</center></div>
<%
}else{
%>
<p align="center">购物车为空!</p>
<%
}
%>

数据库操作部分

程序用到两个表:
1 shop_cart表
cart_id int 购物车编号 自动编号
cart_shop_id nvarchar 商店编号
cart_product_id nvarchar 商品编号
cart_quantity int 商品数量
临时存放购物车数据

2 shop_product表
product_id int 商品编号 自动编号
shop_id nvarchar 商店编号
product_name nvarchar 商品名称
product_bb nvarchar 商品介绍
product_price int 市场价
product_discount int 优惠价
product_img img 图片
product_status nvarchar 状态
product_first int 定金比例
product_type nvanchar 商品类型
存放商品资料

使用bka.java制成的javabean:bka.class可以提供对数据库的操作。
另外,需在控制面板的系统DSN中注册bka.dsn,
从而可使JSP通过JDBC-ODBC来调用sql数据库。
在页面中调用javabean,基本上可采用以下方式:

<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="RegisterBean" scope="page" class="shop.bka" />
<%
String sql="select * from xxx";
ResultSet rs = RegisterBean.executeQuery(sql); 
if(rs.next()) { 
rs.close();
RegisterBean.closeStmt();
session.putValue("register_message","duplicate name found!");
}
%>
注意应在使用后将rs关闭。
以下是bka.java的源程序。注意在使用前需用javac加以编译成为class文件即javabean.
--shop/bka.java--
package shop;
import java.sql.*;

public class bka {
String sDBDriver = "sun.jdbc.odbc.JdbcOdbcDriver";
String sConnStr = "jdbc:odbc:bka";
Connection conn = null;
ResultSet rs = null;

public bka() {
try {
Class.forName(sDBDriver); 
}
catch(java.lang.ClassNotFoundException e) {
System.err.println("bka(): " + e.getMessage());
}
}
public ResultSet executeQuery(String sql) {
rs = null;
try {
conn = DriverManager.getConnection(sConnStr,"xxx","yyy"); 
Statement stmt = conn.createStatement();
rs = stmt.executeQuery(sql);

catch(SQLException ex) { 
System.err.println("aq.executeQuery: " + ex.getMessage());
}
return rs;
}
} 1、重新计费部分还没有做好,大家自己动手吧!
2、下一版本将用session做。
//shop_cart.jsp
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page session="true" %>
<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="bka" scope="page" class="shop.bka" />
<%
String product_type;
String action;
int product_id;
int curpage;
//商品类型
if (request.getParameter("product_type")==null){
product_type="all";
}else{
product_type=request.getParameter("product_type");
}

//页数和商品类型参数,可以在“继续购物”时返回到上次购物的页面
if (request.getParameter("curpage")==null){
curpage=1;
}else{
curpage=java.lang.Integer.parseInt(request.getParameter("curpage"));
}

//动作
if (request.getParameter("action")==null){
action="view";
}else{
action=request.getParameter("action");
}

//商品编号
if (request.getParameter("product_id")==null){
product_id=0;
}
else{
product_id=java.lang.Integer.parseInt(
 request.getParameter("product_id"));
}

int bbb;
bbb=1;

Integer num = new Integer(bbb);

//商店编号
session.putValue("shop_id",num);
//顾客username
session.putValue("guest_name","asp2001");
String guest_name=(String)session.getValue("guest_name");
Integer shop_id=(Integer)session.getValue("shop_id");
java.lang.String sql; 
java.sql.ResultSet rs;
if (action.compareTo("add")==0) {
sql="select cart_quantity from shop_cart where " 
+ "cart_shop_id=" + shop_id + " and cart_guest_id="" 
+ guest_name + "" and cart_product_id=" + product_id ;
rs = bka.executeQuery(sql);
if (rs.next()){
int cart_quantity;
cart_quantity=java.lang.Integer.parseInt(
 rs.getString("cart_quantity"))+1;
sql="update shop_cart set cart_quantity=" 
+ cart_quantity + " where cart_shop_id=" 
+ shop_id + " and cart_guest_id="" + guest_name 
+ "" and cart_product_id=" + product_id ;
rs = bka.executeQuery(sql);}
else
{
sql="insert into shop_cart (cart_shop_id,cart_guest_id,"
+"cart_product_id,cart_quantity) values ("" + shop_id 
+ "","" + guest_name + "","" + product_id + "",1)";
rs = bka.executeQuery(sql);
}
}
if (action.compareTo("clear")==0) {
sql="delete from shop_cart where cart_shop_id=" + shop_id 
+ " and cart_guest_id="" + guest_name + """;
rs = bka.executeQuery(sql);
}

if (action.compareTo("delete")==0) { 
sql="delete from shop_cart where cart_shop_id=" + shop_id 
+ " and cart_guest_id="" + guest_name + "" and cart_product_id=" 
+ product_id ;
rs = bka.executeQuery(sql);
}
%>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="610" height="2">
<tr>
<td>
<form method="POST" action="shop_cart.jsp?action=update&
product_type=<%=product_type%>&curpage=<%=curpage%>">
<table border="0" cellpadding="0" cellspacing="0" width="610" height="2">
<tr>
<td width="122" height="7"><div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" width="100%"
bordercolorlight="#FFB468" bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%">
<div align="center"><center><p>购物车</td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" 
width="100%" bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_list.jsp?shop_id=<%=shop_id%>&product_type=
<%=product_type%>&curpage=<%=curpage%>">继续购物</a>
</td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<div align="center"><center><tableborder="1" cellpadding="2" 
cellspacing="0" width="100%" bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="javascript: document.forms[0].submit()">重新计费</a></td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<table border="1" cellpadding="2" cellspacing="0" width="100%"  
bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_cart.jsp?action=clear&product_type=<%=product_type%>
&curpage=<%=curpage%>">清空购物车</a></td>
</tr>
</table>
</center></div></td>
<td width="122" height="7" style="border: medium" align="center">
<table border="1" cellpadding="2" cellspacing="0" width="100%" 
bordercolorlight="#FFB468"
bordercolordark="#FFFFFF" bgcolor="#FFB468">
<tr>
<td width="100%"><div align="center"><center><p>
<a href="shop_order.asp">确认购买</a></td>
</tr>
</table>
</center></div></td>
</tr>
<tr align="center">
<td width="610" height="1" colspan="5">
<div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" width="100%"
bgcolor="#FDFEE2" bordercolorlight="#FFB468" bordercolordark="#FFFFFF" height="40">
<tr>
<td width="20%" height="8" align="left">商品名称</td>
<td width="10%" height="8" align="left">市场价</td>
<td width="10%" height="8" align="left">优惠价</td>
<td width="10%" height="8" align="left">数量</td>
<td width="14%" height="8" align="left">小计</td>
<td width="12%" height="8" align="left">定金比例</td>
<td width="17%" height="8" align="left">定金小计</td>
<td width="17%" height="8" align="left">删除</td>
</tr>
<%
sql="select shop_product.product_id,shop_product.product_name,
shop_product.product_price,shop_product.product_discount,
shop_cart.cart_quantity,shop_product.product_first from shop_cart,
shop_product where shop_cart.cart_shop_id=" + shop_id 
+ " and shop_cart.cart_guest_id="" + guest_name 
+ "" and shop_cart.cart_product_id=shop_product.product_id";
rs = bka.executeQuery(sql);
int total;
int total_first;
total=0;
total_first=0;
String product_name;
int product_price;
int product_discount;
int product_first;
int cart_quantity;
if (rs.next()){
while (rs.next()) {
product_id=java.lang.Integer.parseInt(rs.getString(1));
product_name=rs.getString(2);
product_price=java.lang.Integer.parseInt(rs.getString(3));
product_discount=java.lang.Integer.parseInt(rs.getString(4));
cart_quantity=java.lang.Integer.parseInt(rs.getString(5));
product_first=java.lang.Integer.parseInt(rs.getString(6));
%>

<tr>
<td width="10%" height="1" align="left">
<%=product_name%></td>
<td width="10%" height="1" align="left">
<%=product_price%></td>
<td width="10%" height="1" align="left">
<%=product_discount%></td>
<td width="10%" height="1" align="left">
<input type="text" name="<%= "t" + product_id %>" size="3" value="<%=cart_quantity%>">
</td>
<td width="14%" height="1" align="left">
<%=product_discount*cart_quantity%></td>
<td width="12%" height="1" align="left">
<%=product_first + "%"%></td>
<td width="17%" height="1" align="left">
<%=product_first*product_discount*cart_quantity/100.0%></td>
<td width="17%" height="1"><div align="center"><center><p><a href="shop_cart.jsp?action=delete&product_id=<%=product_id%>">delete</a></td>
</tr>

<%
total=total+product_discount*cart_quantity;
total_first=total_first+product_discount*cart_quantity*product_first/100;
}
%>

<tr align="center">
<td width="72%" colspan="6" height="16"><div align="right"><p>总计</td>
<td width="36%" colspan="2" height="16"><div align="left"><%=total%></td>
</tr>
<tr align="center">
<td width="72%" colspan="6" height="16"><div align="right"><p>定金总计</td>
<td width="36%" colspan="2" height="16"><div align="left"><%=total_first%></td>
</tr>
<tr align="center">
<td width="72%" colspan="6" height="16">
<div align="right"><p>结余</td>
<td width="36%" colspan="2" height="16">
<div align="left"><%=total-total_first%>
</td>
</tr>
</table>
</center></div>
<%
}else{
%>
<p align="center">购物车为空!</p>
<%
}
%>

数据库操作部分

程序用到两个表:
1 shop_cart表
cart_id int 购物车编号 自动编号
cart_shop_id nvarchar 商店编号
cart_product_id nvarchar 商品编号
cart_quantity int 商品数量
临时存放购物车数据

2 shop_product表
product_id int 商品编号 自动编号
shop_id nvarchar 商店编号
product_name nvarchar 商品名称
product_bb nvarchar 商品介绍
product_price int 市场价
product_discount int 优惠价
product_img img 图片
product_status nvarchar 状态
product_first int 定金比例
product_type nvanchar 商品类型
存放商品资料

使用bka.java制成的javabean:bka.class可以提供对数据库的操作。
另外,需在控制面板的系统DSN中注册bka.dsn,
从而可使JSP通过JDBC-ODBC来调用sql数据库。
在页面中调用javabean,基本上可采用以下方式:

<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="RegisterBean" scope="page" class="shop.bka" />
<%
String sql="select * from xxx";
ResultSet rs = RegisterBean.executeQuery(sql); 
if(rs.next()) { 
rs.close();
RegisterBean.closeStmt();
session.putValue("register_message","duplicate name found!");
}
%>
注意应在使用后将rs关闭。
以下是bka.java的源程序。注意在使用前需用javac加以编译成为class文件即javabean.
--shop/bka.java--
package shop;
import java.sql.*;

public class bka {
String sDBDriver = "sun.jdbc.odbc.JdbcOdbcDriver";
String sConnStr = "jdbc:odbc:bka";
Connection conn = null;
ResultSet rs = null;

public bka() {
try {
Class.forName(sDBDriver); 
}
catch(java.lang.ClassNotFoundException e) {
System.err.println("bka(): " + e.getMessage());
}
}
public ResultSet executeQuery(String sql) {
rs = null;
try {
conn = DriverManager.getConnection(sConnStr,"xxx","yyy"); 
Statement stmt = conn.createStatement();
rs = stmt.executeQuery(sql);

catch(SQLException ex) { 
System.err.println("aq.executeQuery: " + ex.getMessage());
}
return rs;
}
}

(0)

相关推荐

  • 购物车的源程序

    1.重新计费部分还没有做好,大家自己动手吧!2.下一版本将用session做.//shop_cart.jsp<%@ page contentType="text/html;charset=gb2312"%><%@ page session="true" %><%@ page language="java" import="java.sql.*" %><jsp:useBean id=&q

  • jsp实现购物程序

    下面是我用JSP和数据库做的购物车的源程序: 注意:1.重新计费部分还没有做好,大家自己动手吧!2.下一版本将用session做. //shop_cart.jsp <%@ page contentType="text/html;charset=gb2312"%><%@ page session="true" %><%@ page language="java" import="java.sql.*"

  • Vuejs实现购物车功能

    开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY

  • AngularJS 实现购物车全选反选功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en" ng-app="testMo"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css&qu

  • angular.js实现购物车功能

    本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angularjs/angular.js"></script> <st

  • 利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • angular和BootStrap3实现购物车功能

    一.页面搭建 1.html结构 采用BootStrap3来快速创建一个购物车表单样式. 主要功能: A:列表数据所示 B:增加删除端口 C:清空购物车 D:商品数量的增减 E:动态计算商品价格以及总价 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>购物车</tit

  • 使用Angular.js实现简单的购物车功能

    先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script

  • parabola.js抛物线与加入购物车效果的示例代码

    在做购物车的时候发现一个很好用抛物线特效parabola.js,可先点击DEMO体验下.下面贴出一些关键代码,具体代码可在GitHub上查看 parabola.js var funParabola = function (element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面动不动就几百像素 * 页面上,我们放两个物体,200~800像素之间,我们可以映射为现实世界的2米到8米,也就是100:1 * 不过

  • JavaScript编写一个简易购物车功能

    网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

随机推荐