javascript购物,javascript购物车页面反全全选全不选添加删除图片轮番
用javascript怎样计算购物车价格
/*计算总价格*/
川汇网站建设公司创新互联,川汇网站设计制作,有大型网站制作公司丰富经验。已为川汇上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的川汇做网站的公司定做!
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
}
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
/script
script type="text/javascript"
function initialize()
{
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
/*alert(smallTotal);*/
var smallT=document.getElementById("smallTotal"+a);
smallT.innerHTML=smallTotal;
}
/*取出购物车的所有商品的价格总和*/
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
/script
style type="text/css"
#imgtest {
position: absolute;
top: 100px;
left: 400px;
z-index: 1;
}
table {
left: 100px;
font-size: 20px;
}
/style
/head
body onload="initialize()"
div id="imgtest"/div
br /
br /
table border="1" style="text-align: center;" align="center"
thead style="height: 50"
td style="WIDTH: 300px"
商品名称
/td
td style="WIDTH: 60px"
图片
/td
td style="WIDTH: 170px"
数量
/td
td style="WIDTH: 170px"
价格
/td
td style="WIDTH: 250px"
小计
/td
/thead
tbody
tr
td class="name"商品1/td
td class="image"
img src="1.jpg" width="40px" height="40px" id="image1" /
/td
td class="quantity"
input id="quantity1" value="1" onblur="total(1);" /
/td
td class="price"
input type="hidden" id="price1" value="20" /
20
/td
td class="total"
span id="smallTotal1"/span 元
/td
/tr
tr
td class="name"商品2/td
td class="image"
img src="1.jpg" width="40px" height="40px" id="image1" /
/td
td class="quantity"
input id="quantity2" value="2" onblur="total(2);" /
/td
td class="price"
input type="hidden" id="price2" value="30" /
30
/td
td class="total"
span id="smallTotal2"/span 元
/td
/tr
tr
td colspan="4" class="cart_total"
br
/td
td
span class="red"总计:/spanspan id="total"/span 元
/td
/tr
/tbody
/table
/body
/html
关于javaScript问题 购物车的实现
关于只有最后一个文本框能触发checknum方法的问题:
其实这里有个逻辑错误,主要是%=i%中的i是多少的问题。从你贴出来的代码看,你是不是连JS代码也循环输出了吧,也就是有几条购物信息,就会生成几个checknum方法,在JS里,同函数名的方法如果多次定义,则只有最后一个定义的方法有效果,那最后一个checknum方法里的%=i%实际就只指代最后一个文本框了。结果就是只有最后一个文本框有效果。
其实楼主只需要循环输出表格,JS代码只用一个就行了,只要在文本框触发JS动作时,把%i%作为参数传进JS方法就行了,例如,你可以这么写:
...
td width="58" height="30"input name="num%=i%" size="5" type="text" value="%=goodsitem.number%" onBlur="checknum(this.form,%=i%)"/td
...
把JS方法放到循环外面,这么写:
function checknum(myform,i){
var inp = myform['num'+i];
if(isNaN(inp.value) || inp.value.indexOf('.')!=-1){
alert("请不要输入非法字符!");inp.focus();return;}//判断是否为数字值
if(inp.value%=leave%){alert("请输入小于现有库存 ("+%=leave%+") 的数量!");inp.focus();return;}
if(inp.value==0){
alert("请输入大于1的整数!");inp.focus();return;}
if(inp.value==""){
alert("请输入修改的数量!");inp.focus();return;}
myform.submit();
}
关于数字修改后触发checknum方法的问题:
楼主的checknum方法最后是要提交表单的,所以如果用键盘事件,那每一次输入一个字符或删除一个字符,都会触发表单提交动作,这应该不是楼主要的结果。字符修改后触发JS方法有专门的事件处理方法onchange。楼主可以吧onblur换成onchange试试。
如何用html css javascript php制作购物车?
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
link rel="stylesheet" href="---.css"
script src="---.js"/script
/head
body
div class="container"
div class="shop"
div class="header"
input type="checkbox" class="shop-checkbox"
span class="shop-icon"/span
span class="shop-name"---/span
span class="wangwang-icon"/span
/div
div class="items"
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div----/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"----/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span¥50.13/span
/div
div class="operation"
div---/div
div---/div
/div
/div
/div
/div
div class="shop"
div class="header"
input type="checkbox" class="shop-checkbox"
span class="shop-icon"/span
span class="shop-name"---/span
span class="wangwang-icon"/span
/div
div class="items"
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div----/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"---/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span¥9.90/span
/div
div class="operation"
div移入收藏夹/div
div删除/div
/div
/div
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div---/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"---/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span¥19.9/span
/div
div class="operation"
div移入收藏夹/div
div删除/div
/div
/div
/div
/body
/html
.container{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
}
.header{
margin: 8px;
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
}
.promotion-icons span{
margin-right: 4px;
}
.items{
border: 1px solid #ebe9e9;
}
.item{
display: flex;
margin: 8px;
}
.item-img{
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
}
.item-name
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px;
}
.num{
width: 18px;
height: 15px;
}
.num-control{
display: flex;
align-items: baseline;
}
.num-minus,.num-plus{
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
}
.checkout{
display: flex;
justify-content: space-between;
}
.shop{
margin-bottom: 20px;
margin-top: 30px;
}
.goods,.freight,.checkout-button{
margin-left: 15px;
}
.price-1{
text-decoration: line-through;
color: gray;
}
.check-num ,.total-price{
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
}
.checkout-button{
height: 30px;
width: 50px;
background-color: beige;
}
.checkout{
margin-top: 15px;
}
.item-name{
width: 25%;
}
.item-price-total{
width: 5%;
}
.sku{
width: 20%;
}
function updatePrice(){
let items = document.querySelectorAll('.item');
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item){
if(item.querySelector('.item-checkbox').checked){
let num = item.querySelector('.num').value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector('.price-2').getAttribute('data-price');
totalPrice = totalPrice + parseFloat(price) * num;
}
});
document.querySelector('.check-num').innerText= totalNum;
document.querySelector('.total-price').innerText = totalPrice;
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice();
}
});
let minuses = document.querySelectorAll('.num-minus');
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector('.num').value;
if(parseInt(num)1)
{
minus.parentElement.querySelector('.num').value=parseInt(num)-1;
updatePrice();
}
};
});
let pluses = document.querySelectorAll('.num-plus');
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector('.num').value;
plus.parentElement.querySelector('.num').value=parseInt(num)+1;
updatePrice();
}
});
}
js解决点击购物车过于频繁的问题
说明 :平时我们喜欢购物,但有时也有一些人手机卡频繁点击加入购物车,造成请求服务器频繁操作,在用户基数大的时候,会给服务器造成不少的资源浪费,所以给出下面简单demo供大家参考。在第一次点击后,如果再接连点击会弹出操作频繁,本案例设置下次点击间隔在1.5s。
请教JavaScript中 怎么让购物车的总计价格变化?
一般有两种做法。
一种是
在页面加载完毕后,先初始化一次总金额。
在调用添加、减少方法时,获取总金额的值然后加上或减去物品*数量的值
另一种就是
同样先初始化总金额
在调用添加、减少方法后,直接重新计算所有price的值然后给总金额赋值。
```js
function updateTotalPrice() {
let count= 0
const priceNodes = document.querySelectorAll("li input[name='price']")
priceNodes.forEach(node = {
count+= parseFloat(node.value) * 100
})
document.querySelector("#totalPrice").innerHTML = count/ 100
}
```
在淘宝购物流程中会出现哪些javascript事件
click(点击事件) blur(失去焦点事件) change(内容改变事件) submit(提交事件)主要就是这些了
当前标题:javascript购物,javascript购物车页面反全全选全不选添加删除图片轮番
网页路径:http://pwwzsj.com/article/dscjpgd.html