原生jsはカートを実現します。
もとはjsについてショッピングカーの添削を実現して調べて、みんなに参考にするように供えて、具体的な内容は次の通りです。
効果図:
コード:
効果図:
コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix{
clear: both;
zoom: 1;
}
.shopping{
width: 1200px;
margin: 0 auto;
font-size: 14px;
}
.shopping .header{
width: 100%;
height: 50px;
line-height: 50px;
background: #ccc;
color: #000000;
font-weight: bold;
text-align: left;
}
.shopping .header ul{
padding-left: 30px;
}
.shopping .header ul li{
width: 190px;
list-style: none;
}
.shopping .footer{
width: 100%;
height: 50px;
background: #ccc;
color: #000000;
text-align: left;
}
.shopping .footer .footlf{
width: 200px;
line-height: 50px;
margin-left: 30px;
}
.shopping .footer .footrg{
width: 600px;
text-align:right;
}
.shopping .footer .footrg span:nth-child(1){
display: inline-block;
padding: 0px 25px;
background: black;
color: white;
line-height: 48px;
margin-right: 20px;
}
.shopping .footer .footrg span:nth-child(2),.shopping .footer .footrg span:nth-child(3){
display: inline-block;
margin-right: 20px;
}
.shopping .footer .footrg span:nth-child(4){
font-size:16px;
font-weight: bold;
line-height: 50px;
margin-right: 50px;
}
.shopping .footer .footrg s{
color: red;
}
.content{
margin: 10px 0px;
}
.content dl{
margin-bottom: 20px;
}
.content dl dt{
border: 1px solid #CCCCCC;
height: 30px;
line-height: 30px;
font-weight: bold;
}
.content dl dt{
padding-left: 20px;
}
.content dl dd{
padding-left: 20px;
border: 1px solid #CCCCCC;
height: 100px;
line-height: 100px;
border-top: none;
}
.content dl dd ul li{
list-style: none;
}
.content dl dd ul li img{
width: 80px;
height: 80px;
vertical-align: middle;
}
.content dl dd ul li{
width: 190px;
}
.content dl dd ul li s{
color: red;
font-weight: bold;
}
.content dl dd ul li input{
width: 30px;
}
s{
text-decoration: none;
}
.content .del{
cursor: pointer;
}
.minus{
padding: 0px 10px;
background: red;
cursor: pointer;
}
.plus{
padding: 0px 10px;
background: red;
cursor: pointer;
}
input{
cursor: pointer;
}
</style>
</head>
<body>
<div class="shopping">
<div class="header clearfix">
<ul>
<li class="fl"><input type="checkbox" name="" class="all"> </li>
<li class="fl"> </li>
<li class="fl"> </li>
<li class="fl"> </li>
<li class="fl"> </li>
<li class="fl"> </li>
</ul>
</div>
<div class="content">
<dl>
<dt> ：xxx 1</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/01.jpg" />
<span> </span>
</li>
<li class="fl">
<s>$<span class="price">100</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1">
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">100</span></s>
</li>
<li class="fl">
<span class="del"> </span>
</li>
</ul>
</dd>
</dl>
<dl>
<dt> ：xxx 2</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/02.jpg" />
<span> 2</span>
</li>
<li class="fl">
<s>$<span class="price">200</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1">
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">200</span></s>
</li>
<li class="fl">
<span class="del"> </span>
</li>
</ul>
</dd>
</dl>
<dl>
<dt> ：xxx 3</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/02.jpg" />
<span> 3</span>
</li>
<li class="fl">
<s>$<span class="price">300</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1" >
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">300</span></s>
</li>
<li class="fl">
<span class="del"> </span>
</li>
</ul>
</dd>
</dl>
</div>
<div class="footer clearfix">
<div class="footlf fl">
<input type="checkbox" name="" class="all_is">
<input type="checkbox" name="" id="cancel">
</div>
<div class="footrg fr">
<span> </span>
<span> <s id="piece">0</s> </span>
<span> ( )：￥<s class="sum_">0.00</s></span>
<span> </span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//
//1.
//2.
var del=document.getElementsByClassName("del");//
var dl=document.getElementsByTagName("dl");
var all=document.getElementsByClassName("all")[0];//
var all_is=document.getElementsByClassName("all_is")[0];//
var ischeck=document.getElementsByClassName("ischeck");//
var minus=document.getElementsByClassName("minus");//
var plus=document.getElementsByClassName("plus");//
var count=document.getElementsByClassName("count");//
var price=document.getElementsByClassName("price");//
var price_sum=document.getElementsByClassName("price_sum");//
var sum_=document.getElementsByClassName("sum_")[0];//
var piece=document.getElementById("piece");//
var cancel=document.getElementById("cancel");//
//
all_();
function all_(){
all.onchange=function(){
// ture false
if(all.checked){
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=true;
}
piece_();//
}
else{
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=false;
}
piece_();//
}
shss();//
}
}
//
comm_ischeck();
function comm_ischeck(){
for (var i=0;i<ischeck.length;i++) {
(function(j){
ischeck[j].onclick=function(){
shss();//
piece_();//
for (var k=0;j<ischeck.length;k++) {//
if (!ischeck[k].checked) {// flase
all.checked = false;
break; //
}
//
all.checked =true;
}
}
})(i)
}
}
//
all_iss();
function all_iss(){
all_is.onchange=function(){
//
for(var i=0;i<ischeck.length;i++){
ischeck[i].checked = ischeck[i].checked?false:true;
}
shss();//
piece_();//
}
}
//
add_is();
function add_is(){
for(var i=0;i<minus.length;i++){
(function(i){
minus[i].onclick=function(){
if(parseInt(count[i].value)<2){
count[i].value=1;
}
else{
count[i].value=parseInt(count[i].value)-1;
}
// parseInt(count[i].value) value string
// <1 0
//count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1);
var pric=price[i].innerHTML;//
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);// = *
shss();//
piece_();//
}
})(i)
}
}
//
add();
function add(){
for(var i=0;i<plus.length;i++){
//
(function(i){
plus[i].onclick=function(){
var pric=price[i].innerHTML;//
// value string
count[i].value=parseInt(count[i].value)+1;//
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);// = *
shss();//
piece_();//
}
})(i)
}
}
//count
count_();
function count_(){
for(var i=0;i<count.length;i++){
(function(i){
count[i].onchange=function(){
var pric=price[i].innerHTML;//
// value string
count[i].value=parseInt(count[i].value)+1;//
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);// = *
shss();//
piece_();//
}
})(i)
}
}
//
piece_();
function piece_(){
piece.innerHTML=0;
for(var i=0;i<ischeck.length;i++){
if(ischeck[i].checked){
piece.innerHTML=parseInt(piece.innerHTML)+parseInt(count[i].value);
}
}
}
//
shss();
function shss(){
sum_.innerHTML=0;
for(var i=0;i<ischeck.length;i++){
if(ischeck[i].checked){
console.log(sum_.innerHTM);
sum_.innerHTML=parseInt(sum_.innerHTML)+parseInt(price_sum[i].innerHTML);
}
}
}
//
cancel_();
function cancel_(){
//
cancel.onclick=function(){
for(var i=0;i<ischeck.length;i++){
ischeck[i].checked=false;
}
shss();
piece_();
}
}
//
del_();
function del_(){
for(var i=0;i<del.length;i++){
(function(i){
del[i].onclick=function(){
dl[i].parentNode.removeChild(dl[i]);
shss();//
piece_();//
}
})(i)
}
}
</script>
</html>