js——论购物车的应用原理

<html>

<head>

　　<title>购物车</title>

　　 <meta charset="UTF-8">

</head>

<body>

　　<input type="button" value="上衣" onclick="rest(this.value)">                                                               　　　　　　　　　　　　

　　<input type="button" value="裤子" onclick="rest(this.value)">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  

　　<p id="c"></p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

</body>

</html>

<script>

　　var arr=[]; //创建数组　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　var mun=[]; //创建数组　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
　　function rest(x){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　var n;　　　　//创建一个变量，用来储存数据　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　f=0;　　//标识法　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　for(i in arr){　　//遍历数组　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　if(arr[i]==x){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　f=1;　　　　　　　　　　　　　　　　　　　　　　
　　n=i;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　}　　　　　　　　　　　　　　　　　　　　　　
　　if(f){　　　　　　　　　　　　　　
　　mun[n]+=1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　}else{　　　　　　　　　　　　　　　　　　
　　arr.push(x);　　　　　　　　　　　　　　　　　　　　　　
　　mun.push(1);　　　　　　　　　　　　　　　　　　　　　　
　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　document.getElementById("c").innerHTML="";　　　　　　　　　　　　　　　　　　　　　　　　　　
　　for(z in arr){　　　　　　　　　　　　　　　　　　　　　　
　　document.getElementById("c").innerHTML+=arr[z]+":"+mun[z]+"<br>";　　　　　　　　　　　　
　　　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　}　　　　　　　　　　　　　　　　

 </script>

方法：重点用数组和push(),标识法等构建购物车核心

写于2017/11/29

时间： 2024-11-05 23:19:45

js——论购物车的应用原理的相关文章

js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

VUE.JS实现购物车功能

购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面 最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新. 关于vue.

JS实现购物车01

需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车01</title> <style type="text/css"> .num{ width:20px; } </style> </head> <

JS 实现无缝滚动动画原理（初学者入）

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

js加入购物车抛物线动画

天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗

JS疑难点和GC原理

1. JS中的typeof是一元操作符,不是函数 在chrome的Console控制台上,输入typeof null,它会输出"object".因此,使用typeof操作符的时候,除了null,都会识别出其他数据的类型. 2. JS中的instanceof来区分Object下的Array.Json.RegEx.Date.Function.Error.Math instanceof对于非对象,返回false instanceof对于原型链上的对象,返回原型链对象 3. Object转St

Vue.js双向绑定的实现原理

Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:https://segmentfault.com/a/1190000006599500 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = {

js加入购物车特效

本文来源:  http://www.zhangxinxu.com/study/201312/js-parabola-shopping.html parabola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = funct

js实现购物车(源码)

首先是页面布局html+css部分 <!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>演示</title>  <link rel="stylesheet" href="css/style.css">  <script type="text