Javascript选项卡与传参实例

<!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>

Javascript选项卡与传参实例

猜你喜欢