原生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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
javascript类型转换使用方法
Feb 08 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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动态创建Flash动画
2006/10/09 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
openPNE常用方法分享
2011/11/29 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
python 反向输出字符串的方法
2018/07/16 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
logging level级别介绍
2020/02/21 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
优秀学生干部推荐材料
2014/02/03 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
幼儿园开学寄语
2014/04/03 职场文书
买卖车协议书
2014/04/21 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
被委托人身份证明
2015/08/07 职场文书
观看《信仰》心得体会
2016/01/15 职场文书