js实现仿购物车加减效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow-y: auto;
}
ul{
margin-top: 20px;
border-top: 1px solid #666;
}
h1{
width: 500px;
margin: 0 auto;
color: deeppink;
height: 100px;
line-height: 100px;
}
li{
list-style: none;
padding: 15px 0px 15px 60px;
border-bottom:1px solid #ccc;
font-size: 0px;
line-height: 30px;
/*height: 60px;*/
}
input[type=button],li strong,li em,li span,li div{
height: 30px;
font-size: 20px;
line-height: 30px;
text-align: center;
}
input[type=button],li strong
{
width: 60px;
}
li span,li em{
width: 80px;
background: pink;
}
li div{
width: 100px;
}
li strong,li span,li em,li div{
display: inline-block;
}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('list');
var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
fn1(aLi[i]);
}
function fn1(aLi){
var aBtn=aLi.getElementsByTagName('input');
var aStrong=aLi.getElementsByTagName('strong')[0];
var aEm=aLi.getElementsByTagName('em')[0];
var aSpan=aLi.getElementsByTagName('span')[0];
var num=Number(aStrong.innerHTML); //aStrong.innerHTML='0'
var price=parseFloat(aEm.innerHTML);//aEm.innerHTML='12.9元'
aBtn[0].onclick=function(){
if(num>0)
{
num--;
aStrong.innerHTML=num;
aSpan.innerHTML=(num*price).toFixed(1)+'元'
}
}
aBtn[1].onclick=function(){
num++;
aStrong.innerHTML=num;
aSpan.innerHTML=(num*price).toFixed(1)+'元'
}
}
}
</script>
</head>
<body>
<h1>点点看，仿购物车+ -效果</h1>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>12.9元</em>
<div class="s1">共计：</div><span>0</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>45.7元</em>
<div class="s1">共计：</div><span>0</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>67.5元</em>
<div class="s1">共计：</div><span>0</span>
</li> <li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>14.7元</em>
<div class="s1">共计：</div><span>0</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>45.6元</em>
<div class="s1">共计：</div><span>0</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
<div class="s1">单价:</div><em>32.4元</em>
<div class="s1">共计：</div><span>0</span>
</li>
</ul>
</body>
</html>
js实现仿购物车加减效果的更多相关文章
- js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...
- JQuery案例：购物车加减
购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style ...
- js实现输入框数量加减【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用js进行日期的加减
如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...
- Js中处理日期加减天数
Js的处理日期还是很方便的. 一. 格式化日期为2017-07-04的格式 function formatTime(date) { var year = date.getFullYear(); var ...
- js 时间格式，加减
Date.prototype.Format = function (fmt) { //author: rixiao var o = { "M+": this.getMonth() ...
- js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
- 原生js实现仿window10系统日历效果
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...
- spin.js插件的转圈加载效果
先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...
随机推荐
- Python与数据结构[4] -> 散列表[0] -> 散列表与散列函数的 Python 实现
散列表 / Hash Table 散列表与散列函数 散列表是一种将关键字映射到特定数组位置的一种数据结构,而将关键字映射到0至TableSize-1过程的函数,即为散列函数. Hash Table: ...
- Codeforces #427 Div2 D
#427 Div2 D 题意 给出一个字符串,求它的子串中为 \(k-palindrome\) 的个数. \(1-palindrome\) 要求是一个回文串. \(k-palindrome (k &g ...
- hadoop 编译代码及运行
搞定了hadoop配置之后,可以写代码运行了,首先要配一下CLASS_PATH,修改/etc/profile export JAVA_HOME=/usr/lib/jvm/java--openjdk-i ...
- [Contest20180325]序列
Hogura有一个序列$a$,她希望你帮她维护下面的这些操作. $1\ l\ r\ x$对$l\leq i\leq r$的$a_i$执行$a_i=a_i+x$ $2\ l\ r\ x$对$l\leq ...
- 【二分答案】【中位数】codeforces 394 bun
bunDescription因为体育老师很喜欢等差数列,所以他要求学生们站队必须按身高站成等差数列.但是有些班级的学生无论如何也无法排成等差数列,于是体育老师从食堂买来了两种神奇的面包.吃一个第一种面 ...
- python3-关于GitHub的最基本操作
阅读目录 介绍 什么是GitHub? 创建存储库 创建一个分支 做一个提交 打开拉取请求 合并拉取请求 一.介绍 Hello World项目是计算机编程历史悠久的传统.这是一个简单的练习,可以让你在学 ...
- 【mybatis】mybatis执行一个update方法，返回值为1，但是数据库中数据并未更新，粘贴sql语句直接在数据库执行，等待好久报错：Lock wait timeout exceeded; try restarting transaction
今天使用mybatis和jpa的过程中,发现这样一个问题: mybatis执行一个update方法,返回值为1,但是数据库中数据并未更新,粘贴sql语句直接在数据库执行,等待好久报错:Lock wai ...
- ［干货］2017已来，最全面试总结——这些Android面试题你一定需要
地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...
- Mac的文件比对工具：Meld、Beyond Compare
Meld开源免费 Beyond Compare可以在Windows.Mac下使用,但是收费,需要自己破解
- Discuz! 7.1 & 7.2 远程代码执行漏洞
受影响产品: Discuz! 7.1 & 7.2 漏洞描述: 产生漏洞的$scriptlang数组在安装插件后已经初始化 Discuz!新版本7.1与7.2版本中的showmessage函数中 ...