.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="#"><<</a> <a class="hidden-l" href="#">···</a> <a class="next" href="#">>></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。
相关分类