原生js仿淘寶手機信息購買選項代碼



86 340 114



特效描述:手機信息購買選項,

代碼結構

1. HTML代碼

		<div id="wrap">
			<div id="top">
				<p id='model'>
					<font>型號</font>
					<span>4.7英寸</span>
					<span>5.5英寸</span>
				</p>
				<p id='color'>
					<font>顏色</font>
					<span>銀色</span>
					<span>金色</span>
					<span>深空灰色</span>
				</p>
				<p id='rom'>
					<font>內存</font>
					<span>16GB</span>
					<span>64GB</span>
					<span>128GB</span>
				</p>
				<p id='banben'>
					<font>版本</font>
					<span>公開版</span>
					<span>移動贈費版</span>
					<span>聯通合約版</span>
				</p>
			</div>
			<div id="bottom">
				<p>價格: <font>¥ <span id='price'>5288</span>.00</font> <a href=''><i>移動贈費版</i>或<i>聯通合約版</i>購機價格計算請點擊這里>.< </a></p>
				<button>立即購買</button>
			</div>
		</div>
		<script type="text/javascript">
			var mSpan = document.getElementById('model').getElementsByTagName('span');
			var cSpan = document.getElementById('color').getElementsByTagName('span');
			var rSpan = document.getElementById('rom').getElementsByTagName('span');
			var bSpan = document.getElementById('banben').getElementsByTagName('span');
			var aSpan = document.getElementsByTagName('span');
			var oModel = document.getElementById('model');
			var oRom = document.getElementById('rom');
			var oPrice = document.getElementById('price');
			mSpan[0].className = 'on';
			cSpan[0].className = 'on';
			rSpan[0].className = 'on';
			bSpan[0].className = 'on';
			for (var i=0;i<aSpan.length;i++ )
			{
				aSpan[i].onclick = function(){
					var siblings = this.parentNode.children;
					for (var j=0;j<siblings.length;j++ )
					{
						siblings[j].className = '';
					}
					this.className = 'on';
					if ( this.parentNode == oModel || this.parentNode == oRom )
					{
						price();
					}
				};
			};
			function price(){
				var p1 = 0;
				var p2 = 0;
				for (var i=0;i<mSpan.length;i++ )
				{
					if ( mSpan[i].className == 'on' )
					{
						p1 = i?6088:5288;
						break;
					};
				};
				for (var i=0;i<rSpan.length;i++ )
				{
					if ( rSpan[i].className == 'on' )
					{
						switch ( i )
						{
							case 0:
								p2 = 0;
								break;
							case 1:
								p2 = 800;
								break;
							case 2:
								p2 = 1600;
								break;
						}
					}
				};
				oPrice.innerHTML = p1+p2;
			};
		</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 選項卡自動切換 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子