<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<em>10.5</em>
总计:<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<em>10.5</em>
总计:<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<em>10.5</em>
总计:<span>0元</span>
</li>
</ul>
<script type="text/javascript">
/*
实现购物车的计算
parseFloat()
* */
var oUl=document.getElementById("list")
var aLi=oUl.getElementsByTagName("li")
for (var i=0;i<aLi.length;i++){
fn(aLi[i])
}
function fn(obj){
var oBtn=obj.getElementsByTagName("input")
var oEm=obj.getElementsByTagName("em")[0]
var oStrong=obj.getElementsByTagName("strong")[0]
var oSpan=obj.getElementsByTagName("span")[0]
var num=0
var oPrice = parseFloat(oEm.innerHTML)
oBtn[1].onclick = function(){
num++
oStrong.innerHTML = num
oSpan.innerHTML = num*oPrice+"元"
}
oBtn[0].onclick = function(){
num--
if(num<0){
num = 0
}
oStrong.innerHTML = num
oSpan.innerHTML = num*oPrice+"元"
}
}
</script>
</body>
</html>
传参实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
var num = 0;
for( var i=0; i<arrUrl.length; i++ ){
oUl.innerHTML += '<li></li>';
}
timer = setInterval(function(){
num++
if(num>arrUrl.length-1){
num=0
}
fnTab()
},4000)
autoPlay()
oImg.onmouseover = function(){
clearInterval(timer)
}
oImg.oonmouseout = function(){
autoPlay()
}
// 初始化
function fnTab(){
oImg.src = arrUrl[num];
oSpan.innerHTML = 1+num+' / '+arrUrl.length;
oP.innerHTML = arrText[num];
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
aLi[num].className = 'active';
}
fnTab();
for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i; // 索引值
aLi[i].onclick = function (){
num = this.index;
fnTab();
};
}
};
</script>
</head>
<body>
<div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div>
</body>
</html>
图片选线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
display: none;
}
.active {
background: orange;
}
</style>
</head>
<body>
<input type="button" value="选项1" class="active" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<div style="display: block;">1</div>
<div>2</div>
<div>3</div>
<script>
//作业3 选项卡切换
var oDiv = document.getElementsByTagName("div")
var oBtn = document.getElementsByTagName("input")
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].index = i
oBtn[i].onclick = function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className = ""
oDiv[i].style.display = "none"
}
this.className = "active"
oDiv[this.index].style.display = "block"
}
}
</script>
</body>
</html>