我想用javascript实现下面的效果?

.container input { display:inline-block; margin-top:10px; width:200px; height:20px; text-align:center; }
		.container input[type=button] { width:50px; height:20px; }
		.container .tab { position:relative; padding:10px 58px 0; width:145px; text-align:center; overflow:hidden; }
		.container .tab .list { width:999999px; overflow:hidden; }
		.container .tab .list li { float:left; width:28px; height:28px; line-height:28px; background-color:#fff; cursor:pointer; border-left:1px solid #ddd; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
		.container .tab a { position:absolute; top:10px; z-index:2; width:28px; height:28px; line-height:28px; background-color:#fff; border:1px solid #ddd; }
		.container .tab a.prev { left:0; }
		.container .tab a.hidden-l { left:29px; }
		.container .tab a.next { right:0; }
		.container .tab a.hidden-r { right:29px; }
<div class="text">
		<div class="container">
			<div>
				<input class="js-t1" type="text" value="" />
				<input class="js-btn" type="button" value="button" />
			</div>
			<div>
				<input class="js-t2" type="text" value="" />
			</div>
			<div class="tab">
				<ul class="list">
				</ul>
				<a class="prev" href="#">&lt;&lt;</a>
				<a class="hidden-l" href="#">···</a>
				<a class="next" href="#">&gt;&gt;</a>
				<a class="hidden-r" href="#">···</a>
			</div>
		</div>
	</div>
<script>
		window.onload = function (){
			var oBtn = $('js-btn');
			oBtn.onclick = function (){
				var oT1 = $('js-t1').value;
				var oT2 = $('js-t2').value;
				var ul = $('list');
				
				var n = parseInt(oT1/oT2);
				if(oT1%oT2>0){
					n++;
				}
				for(var i=1; i<=n; i++){
					var li = document.createElement('li');
					var ul = $('list');
					li.innerHTML=i;
					ul.appendChild(li);
					li.onclick=function(){
						alert(li.length);
					}
				}	
			}
		}
		
		function isNum(num){
			if(!isNaN(num)){
				var array = num.split('.');
				var con = array.length;
				if(con == 1){
					return 0;
				}else {
					return 1;
				}
			}else {
				return 1;
			}
		}
		function $(classname){
			return document.getElementsByClassName(classname)[0];
		}
	</script>

我想做的效果是第一个文本框/第二个文本框,得到的数字就是li的个数。 然后如果我点击第四个li,第四个li可以到中间去,数字就显示 23456。

依韵S1
浏览 1206回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript