模拟购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价 ：<strong>34</strong>元
小计： <i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价 ：<strong>28.7</strong>元
小计： <i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价 ：<strong>68</strong>元
小计： <i>0</i>元
</p>
<hr>
<div>
共购买了<span>0</span>件商品 单价最贵的：<span>0</span>元，合计<span>0</span>元
</div>
<script type="text/javascript">
var aP = document.getElementsByTagName('p');
var adiv = document.getElementsByTagName('div')[0];
var oSpan1 = adiv.getElementsByTagName('span')[0];
var oSpan2 = adiv.getElementsByTagName('span')[1];
var oSpan3 = adiv.getElementsByTagName('span')[2];
var max = 0;
var arr = [];
for (var i = 0; i < aP.length; i++) {
tab(aP[i]);
}
function tab(obj) {
var oBtn1 = obj.getElementsByTagName('button')[0];
var oBtn2 = obj.getElementsByTagName('button')[1];
var oSpan = obj.getElementsByTagName('span')[0];
var oI = obj.getElementsByTagName('i')[0];
var oStr = obj.getElementsByTagName('strong')[0];
oBtn1.onclick = function() {
if (oSpan.innerHTML == 0) {
return;
}
oSpan.innerHTML = Number(oSpan.innerHTML) - 1;
oSpan1.innerHTML = Number(oSpan1.innerHTML) - 1;
oI.innerHTML = oSpan.innerHTML * oStr.innerHTML;
oSpan3.innerHTML = Number(oSpan3.innerHTML) - Number(oStr.innerHTML);
findMax();
oSpan2.innerHTML = max;
}
oBtn2.onclick = function() {
oSpan.innerHTML = Number(oSpan.innerHTML) + 1;
//共计商品
oSpan1.innerHTML = Number(oSpan1.innerHTML) + 1;
// 共计价格
oI.innerHTML = oSpan.innerHTML * oStr.innerHTML;
oSpan3.innerHTML = Number(oSpan3.innerHTML) + Number(oStr.innerHTML);
// 最贵单价
if (max < Number(this.nextElementSibling.innerHTML)) {
max = Number(this.nextElementSibling.innerHTML);
oSpan2.innerHTML = max;
}
}
function findMax() {
// 清空数组
arr = [];
// 清空最大值
max = 0;
// 存放数量不为0的单价
for (var i = 0; i < aP.length; i++) {
var oSpan0 = aP[i].getElementsByTagName('span')[0];
var oStrong0 = aP[i].getElementsByTagName('strong')[0];
if (Number(oSpan0.innerHTML) > 0) {
arr.push(Number(oStrong0.innerHTML));
}
}
// 在单价中找最大值
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
}
}
</script>
</body>
</html>
qq列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,h4{
margin: 0;
list-style: none;
padding: 0;
}
#list{
width: 240px;
}
h4{
height: 30px;
background: #999999;
text-indent:2em ;
color: #FFF;
cursor: pointer;
border: 1px #000000 solid;
}
#list ul li{
text-indent: 2em;
border: 1px black solid;
cursor: pointer;
line-height: 26px;
}
#list ul li:hover{
background: #CCE9AC;
}
#list ul{
list-style: none;
display: none;
}
</style>
</head>
<body>
<ul id="list">
<li>
<h4>我的好友</h4>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五00</li>
<li>杨柳0</li>
<li>高柒</li>
</ul>
</li>
<li>
<h4>我的同事</h4>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五00</li>
<li>杨柳0</li>
<li>高柒</li>
</ul>
</li>
<li>
<h4>我的同学</h4>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五00</li>
<li>杨柳0</li>
<li>高柒</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var oList=document.getElementById('list');
var aH4=oList.getElementsByTagName('h4');
var aUl=oList.getElementsByTagName('ul');
for(var i =0;i<aH4.length;i++){
aH4[i].index=i;
aH4[i].off=true;
aH4[i].onclick=function(){
if(this.off){
aUl[this.index].style.display='block';
}else{
aUl[this.index].style.display='none';
}
this.off=!this.off;
}
}
</script>
</body>
</html>
