原生JavaScript实现购物车


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JavaScript实现购物车的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现购物车

代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin: 0;
 padding:0;
 }
 .box{
 width:600px;
 margin: 10px auto;
 background: url(img/g.jpg) ;
 height:500px;
 }
 td{
 text-align: center;
 font-size: 30px;
 color:orangered;
 }
 button{
 width:150px;
 border:0;
 border-radius: 5px;
 height:30px;
 background-color: dodgerblue;
 }
 
 /*.trl:hover{
 background:pink;
 }*/
 
 </style>
 </head>
 <body>
 <div class="box">
 <br />
 <button>全部?h除</button>
 <button>?中删除</button>
 <br>
 <br>
 <input type="text" value="请输入关键字" />
 <input type="button" value="搜索" />
 
 <br>
 <br>
 <table width='600' border="1" cellspacing="0">
 <tr>
  <th><input type="checkbox" class="qx" />全选</th>
  <th>商品</th>
  <th>价格</th>
  <th>序列号</th>
  <th>产地</th>
  <th>品牌</th>
  <th>操作</th>
 </tr>
 <tr class="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">榴莲</td>
  <td>20元</td>
  <td class="ind">1</td>
  <td>海南</td>
  <td>安牌</td>
  <td onclick="del(this)">删除</td>
 </tr>
 <tr class="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">苹果</td>
  <td>20元</td>
  <td class="ind">2</td>
  <td>海南</td>
  <td>安牌</td>
  <td onclick="del(this)">删除</td>
 </tr>
 <tr class="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">草莓</td>
  <td>20元</td>
  <td class="ind">3</td>
  <td>海南</td>
  <td>安牌</td>
  <td onclick="del(this)">删除</td>
 </tr>
 <tr class="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">香蕉</td>
  <td>20元</td>
  <td class="ind">4</td>
  <td>海南</td>
  <td>安牌</td>
  <td onclick="del(this)">删除</td>
 </tr>
 </table>
 </div>
 <script>
// 全选全不选
   
   var qx=document.getElementsByClassName('qx')[0];
   var dx=document.getElementsByClassName("dx");
   qx.onclick=function(){
    for(var i=0;i<dx.length;i++){
    dx[i].checked=qx.checked
    }
   }
 //全部删除 
   var btn=document.getElementsByTagName("button");
   var tr=document.getElementsByTagName('tr');
   var tbody=document.getElementsByTagName("tbody")[0];
   btn[0].onclick=function(){
    for(var i=1;i<tr.length;i++){
     tbody.removeChild(tr[i]);
     i--;
    }       
   }
 //选中删除 
   var dx=document.getElementsByClassName('dx');
   btn[1].onclick=function(){
   for(var i=0;i<dx.length;i++){
    if(dx[i].checked==true){
    tbody.removeChild(dx[i].parentNode.parentNode)
    i--;
    indChange();
    }
   }
   }
 //清空文本框  搜索变颜色
  var input=document.getElementsByTagName('input');
  
  input[0].onfocus=function(){
  this.value=""
  }
  
  var shop=document.getElementsByClassName('shop');
  
  input[1].onclick=function(){
   for(var i=0;i<shop.length;i++){
   
   if(shop[i].innerHTML==input[0].value){
   for(var j=0;j<shop.length;j++){
   shop[j].parentNode.style.background=""
   }
   shop[i].parentNode.style.background="yellow"
   }
   }
  }
  
// 
//移入移出 hover 
  for(var i=1;i<tr.length;i++){
  tr[i].onmouseover=function(){
  this.style.background="pink"
  }
  tr[i].onmouseout=function(){
  this.style.background=""
  }
  
  }

//单行删除(序列号)
// 父元素.removeChild(子元素) tbody 删除tr
 function del(t){
  tbody.removeChild(t.parentNode);
  indChange();
 }
 
 
 //序列号
 
 function indChange(){
  var ind=document.getElementsByClassName("ind");
  for(var i=0;i<ind.length;i++){
  ind[i].innerHTML=i+1;
  }
 }
 
 
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
Table冻结表头示例代码
Aug 20 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 #Javascript
JS实现公告上线滚动效果
Jan 10 #Javascript
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
原生JavaScript实现轮播图
Jan 10 #Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
You might like
php实现点击可刷新验证码
2015/11/07 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
Javascript注入技巧
2007/06/22 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
转让协议书范本
2014/04/15 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
十八大观后感
2015/06/12 职场文书
红色电影观后感
2015/06/18 职场文书
委托收款证明
2015/06/23 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers