原生js仿淘宝手机信息购买选项代码



84 332 111



特效描述:手机信息购买选项,

代码结构

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

加群请备注:从官网了解到