原生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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javascript new fun的执行过程
Aug 05 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
js实现窗口全屏示例详解
Sep 17 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php记录日志的实现代码
2011/08/08 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
js 单引号 传递方法
2009/06/22 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
python中关于for循环的碎碎念
2017/06/30 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
用Python进行websocket接口测试
2020/10/16 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
大学生职业规划论文
2014/01/11 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
安全保证书范文
2014/04/29 职场文书
先进单位申报材料
2014/12/25 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
九年级数学教学反思
2016/02/17 职场文书