Javascript選項卡與傳參例項
阿新 • • 發佈：2018-12-11
<!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>