2019-04-12 全选、购物车、控制商品上下滚动、点击按钮移
2019-04-13 本文已影响0人
北街九条狗
全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
padding:0;
}
</style>
</head>
<body>
<ul id="list">
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
<li><input type="checkbox" name="hobby"> 篮球</li>
</ul>
<input id="all" type="checkbox" name="all"> 全选
<script type="text/javascript">
var oAll = document.getElementById('all');
var oList = document.getElementById('list');
var aInp = oList.getElementsByTagName('input');
var onOff = true;
oAll.onclick = function(){
if(onOff){
for(var i = 0;i < aInp.length;i++){
aInp[i].checked = true;
}
}
else{
for(var i = 0;i < aInp.length;i++){
aInp[i].checked = false;
}
}
onOff = !onOff;
}
// 每一个li点击
for(var i = 0;i < aInp.length;i++){
aInp[i].onclick = function(){
for(var j = 0;j < aInp.length;j++){
if(aInp[j].checked == false){
oAll.checked = false;
// onOff为true代表没全选状态
onOff = true;
return;
}
}
oAll.checked = true;
// onOff为false代表全选状态
onOff = false;
}
}
</script>
</body>
</html>
购物车
<!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>27.2</strong>元
小计 : <i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价 : <strong>13.5</strong>元
小计 : <i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价 : <strong>26</strong>元
小计 : <i>0</i>元
</p>
<hr>
<div id="box">
共计 ：<span>0</span> 件商品
单价最贵 ：<span>0</span> 元
总价 ： <span>0</span> 元
</div>
<script type="text/javascript">
var aP = document.getElementsByTagName('p');
var oBox = document.getElementById('box');
var oCounts = oBox.getElementsByTagName('span')[0];
var oPrice = oBox.getElementsByTagName('span')[1];
var oTotal = oBox.getElementsByTagName('span')[2];
var arr = [];
for(var i = 0;i < aP.length;i++){
tab(aP[i]);
}
var max = 0;
function tab(obj){
var oBtn1 = obj.getElementsByTagName('button')[0];
var oBtn2 = obj.getElementsByTagName('button')[1];
var oSpan = obj.getElementsByTagName('span')[0];
var oStrong = obj.getElementsByTagName('strong')[0];
var oI = obj.getElementsByTagName('i')[0];
oBtn1.onclick = function(){
if(oSpan.innerHTML == '0'){
return;
}
oSpan.innerHTML = Number(oSpan.innerHTML) - 1;
oI.innerHTML = oSpan.innerHTML * oStrong.innerHTML;
// 更新总数
oCounts.innerHTML = Number(oCounts.innerHTML) - 1;
// 计算总价
oTotal.innerHTML =(Number(oTotal.innerHTML) - Number(oStrong.innerHTML)).toFixed(2);
// 单价最贵
findMax();
oPrice.innerHTML = max;
}
oBtn2.onclick = function(){
oSpan.innerHTML = Number(oSpan.innerHTML) + 1;
oI.innerHTML = oSpan.innerHTML * oStrong.innerHTML;
// 更新总数
oCounts.innerHTML = Number(oCounts.innerHTML) + 1;
// 计算总价
oTotal.innerHTML = (Number(oTotal.innerHTML) + Number(oStrong.innerHTML)).toFixed(2);
// 单价最贵
if(max < Number(this.nextElementSibling.innerHTML)){
max = Number(this.nextElementSibling.innerHTML);
oPrice.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>
控制商品上下滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
font-size: 0;
background: #202329;
}
ul{
list-style: none;
padding:0;
margin:0;
}
p{
margin:0;
cursor: pointer;
}
#box{
width: 100px;
height: 340px;
border:10px solid #F3F3F3;
overflow: hidden;
margin:200px auto;
position: relative;
}
.top{
width: 100%;
height: 20px;
background:#0067C3;
position: absolute;
top:0;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 14px;
}
.bottom{
width: 100%;
height: 20px;
background: #0067C3;
position: absolute;
bottom:0;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 14px;
}
#box ul{
position: absolute;
top:20px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href=""><img src="img/练习1/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/6.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/7.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/8.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/9.jpg" alt=""></a></li>
<li><a href=""><img src="img/练习1/10.jpg" alt=""></a></li>
</ul>
<p class="top">↑</p>
<p class="bottom">↓</p>
<script type="text/javascript">
var oTop = document.getElementsByTagName('p')[0];
var oBottom = document.getElementsByTagName('p')[1];
var oUl = document.getElementsByTagName('ul')[0];
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
var timer = null;
// 鼠标按下,启动定时器,完成自动上移
oTop.onmousedown = function(){
timer = setInterval(function(){
if(parseInt(getStyle(oUl,'top')) <= -180){
clearInterval(timer);
oUl.style.top = '-180px';
return;
}
oUl.style.top = parseInt(getStyle(oUl,'top')) - 10 + 'px';
},50);
}
oTop.onmouseup = function(){
clearInterval(timer);
}
// 下移
</script>
</div>
</body>
</html>
点击按钮移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box,#box1{
width: 100px;
height: 100px;
background: #0F7CBF;
position: absolute;
left:8px;
}
#box1{
top:200px;
}
</style>
</head>
<body>
<p>
<button type="button">走你</button>
<button type="button">回来</button>
</p>
<div id="box"></div>
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oBtn1 = document.getElementsByTagName('button')[0];
var oBtn2 = document.getElementsByTagName('button')[1];
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
move(oBox,300,10,'left');
doOpacity(oBox,0,0.05,'opacity')
}
oBtn2.onclick = function(){
move(oBox,8,10,'left');
doOpacity(oBox,1,0.05,'opacity')
}
</script>
</body>
</html>
