基于HTML的购物车模型的代码设计

HTML代码
<html lang="en">

<head>

    <meta charset="UTF-8">

​

​

<link rel="stylesheet" href="css/style.css" />

    <script type="text/javascript" src="js/script.js" >script>

head>

<body>

​

​

<th id="header"><h1>欢迎来到此网站,请尽情购物吧h1>th>

​

​

    <tr id="head">

      <th width="100px">商品th>

      <th width="200px">商品描述th>

      <th width="200px">单价th>

      <th width="200px">规格th>

      <th width="200px">操作th>

    tr>

    <tr>

      <td class="goods">td>

      <td class="describe">【12期免息】Huawei/华为Mate 30 Pro 5G麒麟990徕卡四摄5G芯片智能手机mate30pro5g官方旗舰店td>

      <td class="price">7899.00td>

      <td>

​

​

<option value="4GB+64GB">4GB+64GBoption>

<option value="8GB+64GB">8GB+64GBoption>

<option value="4GB+128GB">4GB+128GBoption>

<option value="8GB+128GB">8GB+128GBoption>

select>

      td>

      <td class="total">

      加入购物车

      td>

    tr>

    <tr>

      <td class="goods">td>

      <td class="describe">保时捷Panamera S 威利原厂1:18 帕拉梅拉四门合金仿真汽车模型蓝td>

      <td class="price">299.00td>

      <td>

      <select class="select">

<option value="蓝色 Panamera蓝色">蓝色 Panamera蓝色option>

<option value="911 GT-3 白色">911 GT-3 白色option>

<option value="黑色 Cayenne黑色">黑色 Cayenne黑色option>

select>

      td>

      <td class="total">

      加入购物车

      td>

    tr>

    <tr>

      <td class="goods">td>

      <td class="describe">海贼海贼王 超大王拼图1000片木质成年路飞卡通包邮td>

      <td class="price">49.99td>

      <td>

​

​

<option value="海贼王全家福">海贼王全家福option>

<option value="两年后9人集结">两年后9人集结option>

<option value="少年初长成">少年初长成option>

select>

      td>

      <td class="total">

      加入购物车

      td>

    tr>

    <tr>

      <td class="goods">td>

      <td class="describe">ThinkPad E490 2UCD/2XCD英特尔酷睿i5 14英寸联想笔记本电脑商务办公轻薄便携官方旗舰店2019款笔记本td>

      <td class="price">7899.00td>

      <td>

​

​

<option value="2XCD:i5/8G/128GB+1TB/2G独显">2XCD:i5/8G/128GB+1TB/2G独显option>

<option value="2UCD:i5/8G/ 256GB/ 2G独显">2UCD:i5/8G/ 256GB/ 2G独显option>

select>

      td>

      <td class="total">

      加入购物车

      td>

    tr>

  table>

  <th id="header"><h1>已加入购物车的宝贝h1>th>

​

​

  <thead id="head">

  <th width="100px">商品th>

      <th width="200px">商品描述th>

      <th width="100px">单价th>

      <th width="200px">规格th>

      <th width="100px">数量th>

      <th width="100px">金额th>

      <th width="100px">删除th>

  thead>

  <tbody id="goods">tbody>

  <tfoot>

  <td colspan="5" align="center">总计td>

  <td id="total">td>

  <td>td>

  tfoot>

  table>

div>

body>

html>

JS代码
//增加购物车列表中的行

function addr(button){

//从商品列表中获取元素

var tr = button.parentNode.parentNode;

var td = tr.getElementsByTagName("td");

var goods = td[0].innerHTML;

var des = td[1].innerHTML;

var price = td[2].innerHTML;

var sele = td[3].innerHTML;

//使用insertRow()函数增加行

var tbody=document.getElementById("goods");

  var row=tbody.insertRow();

//将获取的对应的元素放入新增加的行中

row.innerHTML = "<td>"+goods+"td>"+

"<td>"+des+"td>"+

"<td>"+price+"td>"+

"<td>"+sele+"td>"+

"<td align='center'>"+

"<input type='button' value=' - ' id='jian' onclick=jian(this)>"+

  "<input id='text' type='text' size='1' value='1' />"+

  "<input type='button' value=' + ' id='add' onclick=add(this)>"+"td>"+

  "<td>"+price+"td>"+

  "<td align='center'>"+

    "<input type='button' value='删除' class='add1' onclick=dele(this)>"+

  "td>"

  //计算总价函数

  total();

}

//删除函数

function dele(dele){

dele.parentNode.parentNode.remove();

total();

}

//数量减少函数

function jian(jian){

//获取jian父节点的所有input标签

var inputs = jian.parentNode.getElementsByTagName("input");

//取出放在第二列的数量

amount = inputs[1].value;

//转换为整型

var amount1 = parseInt(amount);

//最小数量为1

if(amount1 == 1){

return;

}

inputs[1].value=amount1-1;

//根据数量的变化,计算出当前数量对应的金额

var tr = jian.parentNode.parentNode;

var tds = tr.getElementsByTagName("td");

var price = parseFloat(tds[2].innerHTML);

var sum = price*amount1;

tds[5].innerHTML=sum-price;

total();

}

function add(add){

var inputs = add.parentNode.getElementsByTagName("input");

amount = inputs[1].value;

var amount1 = parseInt(amount);

inputs[1].value=amount1+1;

var tr = add.parentNode.parentNode;

var tds = tr.getElementsByTagName("td");

var price = parseFloat(tds[2].innerHTML);

var sum = price*amount1;

tds[5].innerHTML=sum+price;

total();

}

//计算总价函数

function total() {

var tbody = document.getElementById("goods");

//取出tbody中所有tr标签

var trs = tbody.getElementsByTagName("tr");

var sum = 0;

//遍历trs数组,并计算每一个tr标签中金额的总和

for(var i = 0; i < trs.length; i++) {

var tds = trs[i].getElementsByTagName("td");

var m = tds[5].innerHTML;

sum += parseFloat(m);

}

var total = document.getElementById("total");

total.innerHTML = sum;

}

function prepareGallery() {

if (!document.getElementsByTagName) return false;

if (!document.getElementById) return false;

if (!document.getElementById("shopping")) return false;

var gallery = document.getElementById("shopping");

var links = gallery.getElementsByTagName("button");

for ( var i=0; i < links.length; i++) {

  links[i].onclick = function() {

  return addr(this);

}

}

}

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

  window.onload = func;

} else {

  window.onload = function() {

  oldonload();

  func();

  }

}

}

addLoadEvent(prepareGallery);

CSS样式表
* {

margin: 0px;

padding: 0px;

}

body{

text-align: center;

}

table,

td,

td {

border: 1px solid #000000;

font-size: 10px;

}

table {

display: block;

}

img {

float: left;

}

tr {

text-align: center;

}

#box {

width: 900px;

height: 1500px;

border: 1px solid white;

margin-top: 20px;

margin-left: 300px;

}

#shopping {

float: left;

text-align: center;

border-collapse: collapse;

}

#head {

height: 20px;

background: #F0FFFF;

}

#header{

color: gold;

letter-spacing: 0;

text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,

0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }

}

.add{

height: 30px;

text-align: center;

width: 100px;

border-radius: 5px;

cursor: pointer;

}

.add:hover{

 

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

}

.add1{

height: 30px;

text-align: center;

width: 50px;

border-radius: 5px;

cursor: pointer;

}

.add1:hover{

 

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

}

.select{

cursor: pointer;

}

.photos{

height: 100px;

width: 100px;

}

.describe{

padding: 5px;

text-align: left;

}

.goods {

padding: 5px;

text-align: left;

}

.total {

color: #ff0000;

font-weight: 700;

}

运行后的样式如下图

 基于HTML的购物车模型的代码设计_第1张图片

 

 

 
 

你可能感兴趣的:(基于HTML的购物车模型的代码设计)