<>强效果图:
, 
<>强,代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
身体{
overflow-y:汽车;
}
ul {
margin-top: 20 px;
border-top: 1 px固体# 666;
}
h2 {
宽度:500 px;
保证金:0汽车;
颜色:一个;
身高:100 px;
行高:100 px;
}
李{
list-style:没有;
填充:15 px 0 px 15像素60 px;
边界底部:1 px固体# ccc;
字体大小:0 px;
行高:30 px;/*高度:60 px; */}
输入(type=按钮),李强劲,李,李,李div {
高度:30 px;
字体大小:20 px;
行高:30 px;
text-align:中心;
}
输入(type=按钮),李强劲
{
宽度:60 px;
}
李,李em {
宽度:80 px;
背景:粉色;
}
李div {
宽度:100 px;
}
李强劲,李,李,李div {
显示:inline-block;
}
& lt;/style>
& lt; script>
window=function () {
var oUl=. getelementbyid(“列表”);
阿里var=oUl.getElementsByTagName(‘李’);
我(var=0; i< aLi.length;我+ +){
[我]fn1 (aLi);
}
函数fn1 (aLi) {
var aBtn=aLi.getElementsByTagName(“输入”);
var至上=aLi.getElementsByTagName(“强”)[0];
var aEm=aLi.getElementsByTagName (em) [0];
var aSpan=aLi.getElementsByTagName(跨度)[0];
var num=数量(aStrong.innerHTML);//aStrong.innerHTML=' 0 '
var价格=parseFloat (aEm.innerHTML);//aEm.innerHTML=12.9元的
aBtn [0] .onclick=function () {
如果(num> 0)
{
num -;
aStrong.innerHTML=num;
aSpan.innerHTML=(num *价格).toFixed(1) +“元”
}
}
aBtn [1] .onclick=function () {
num + +;
aStrong.innerHTML=num;
aSpan.innerHTML=(num *价格).toFixed(1) +“元”
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; h2>点点看,仿购物车+ -效果& lt;/h2>
& lt; ul id=傲斜怼北?
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 12.9元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 45.7元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 67.5元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 14.7元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 45.6元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
& lt; div类=" s1 "祝辞单价:& lt;/div> & lt; em> 32.4元& lt;/em>
& lt; div类=" s1 "祝辞共计:& lt;/div> & lt; span> 0 & lt;/span>
& lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
