美高梅电子游戏 ,本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下

js实现分页功能,js实现分页

本文仅为自己记录下编写过程,如有兴趣,或者疑问,请与我联系。

写前背景:java开发工作经验一年,现项目为SSM框架,使用maven管理项目。需要页面查询实现分页,网上找了很多插件,单独页面实现是好的,可是放到我的页面就没有效果,苦于自己也找不到原因,故写以下代码,很是粗糙,不过懒得整理成js文件了。

效果:第一页时,首页和上一页为不可点击,最后一页时,下一页和尾页不可点击,页数只会显示5个

美高梅电子游戏 1

实现的js:

//分页function
$(document).ready(function(){
 //获取分页数
 var talPage = ${countPage};
 //获取当前页数
 var pageIndex = ${pageIndex};
 var ul = document.getElementById("getPage");
 document.getElementById("getPage").innerHTML="";
 var li_0 = document.createElement("li");
 li_0.innerHTML = "总共:"+${count}+"条,共:"+${countPage }+"页,每页:10条";
 ul.appendChild(li_0);
 if(talPage==1 || pageIndex == 1){//第一页首页和上一页不可操作
  var li_1 = document.createElement("li");
  li_1.setAttribute("class","pageItemDisable bt4");
  li_1.setAttribute("onclick","pageClick(this)")
  li_1.innerHTML = "首页";
  ul.appendChild(li_1);
  var li_2 = document.createElement("li");
  li_2.setAttribute("class","pageItemDisable bt4");
  li_2.setAttribute("onclick","pageClick(this)")
  li_2.innerHTML = "上一页"
  ul.appendChild(li_2);
 }else{
  var li_1 = document.createElement("li");
  li_1.setAttribute("class","pageItem bt4");
  li_1.setAttribute("onclick","pageClick(this)")
  li_1.innerHTML = "首页";
  ul.appendChild(li_1);
  var li_2 = document.createElement("li");
  li_2.setAttribute("class","pageItem bt4");
  li_2.setAttribute("onclick","pageClick(this)")
  li_2.innerHTML = "上一页"
  ul.appendChild(li_2);
 }
 //之前需要将,上一页创建出来
 if(talPage<=5){
  //总页数在0到5之间时,显示实际的页数
  for(var i=0;i<talPage;i++){
   if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
    var li = document.createElement("li");
    li.setAttribute("class","pageItemActive");
    li.setAttribute("onclick","pageClick(this)")
    li.innerHTML = i+1;
    ul.appendChild(li);
   }else{
    var li = document.createElement("li");
    li.setAttribute("class","pageItem");
    li.setAttribute("onclick","pageClick(this)")
    li.innerHTML = i+1;
    ul.appendChild(li);
   }

  }
 }else if(talPage>5){
  //总页数大于5时,只显示五页,多出的隐藏
  //判断当前页的位置
  if(pageIndex<=3){//当前页小于等于3时,显示1-5
   for(var i=0;i<5;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   }
  }else if(pageIndex>talPage-5){//当前页为最后五页时
   for(var i=talPage-5;i<talPage;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   }
  }else{//当前页为中间时
   for(var i=pageIndex-3;i<pageIndex+2;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   } 
  }
 }
 if(pageIndex == talPage){//当前页为最大页时,下一个和尾页不可操作
  var li_3 = document.createElement("li");
  li_3.setAttribute("class","pageItemDisable bt4");
  li_3.setAttribute("onclick","pageClick(this)")
  li_3.innerHTML = "下一页"
  ul.appendChild(li_3);
  var li_4 = document.createElement("li");
  li_4.setAttribute("class","pageItemDisable bt4");
  li_4.setAttribute("onclick","pageClick(this)")
  li_4.innerHTML = "尾页"
  ul.appendChild(li_4);
 }else{
  var li_3 = document.createElement("li");
  li_3.setAttribute("class","pageItem bt4");
  li_3.setAttribute("onclick","pageClick(this)")
  li_3.innerHTML = "下一页"
  ul.appendChild(li_3);
  var li_4 = document.createElement("li");
  li_4.setAttribute("class","pageItem bt4");
  li_4.setAttribute("onclick","pageClick(this)")
  li_4.innerHTML = "尾页"
  ul.appendChild(li_4);
 }
 if(0 == talPage){//一页都没有时,将首页,上一页,下一个,尾页都置为不可操作
   $(".bt4").removeClass("pageItem");
   $(".bt4").addClass("pageItemDisable");
 }

});
//分页的按钮的点击事件
function pageClick(obj){
 var talPage = ${countPage};//总页数
 var pageIndex = ${pageIndex};//当前页数
 var text = obj.innerText;//点击标签的值
 var url = "<%=path%>/service/getServiceList.action";
 //如果为不可操作的直接返回false
  if($(obj).attr("class").indexOf("pageItemDisable")>=0){
  return false;
 } 
 with(document.forms["serviceForm"]){
  if("首页" == text){
   action = url;

  }else if("上一页" == text){
   //计算出上一页到底是第几页
   //第一种方法,获取当前li中class为pageItemActive的标签,取其值
   //第二种方法,直接el ${pageIndex}获取当前页数,然后-1
   //var a = $(obj).parent().children("pageItemActive").html();
   //如果当前页是1,不-,地址和首页相同
   if(pageIndex <= 1){
    action = url;   
   }else{
    action = url+"?pageIndex="+(pageIndex-1);
   }
  }else if("下一页" == text){
   //如果当前页为尾页,则下一页为尾页,url跟当前url一样
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+(pageIndex+1);
   }
  }else if("尾页" == text){
   //如果当前页为尾页,则url不变
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+talPage;
   }
  }else{
   //点击页数时
   action = url+"?pageIndex="+text;

  }
  submit();
 }

}

页面元素:

<ul id="getPage" class="page" style="list-style-type:none;"></ul>

所用到的css样式:

<style type="text/css">
 <!-- 分页处的样式 -->
 .page{
 list-style: none;
}
.page>li{
 float: left;
 padding: 5px 10px;
 cursor: pointer;
}
.page .pageItem{
 border: solid thin #DDDDDD;
 margin: 5px;
}
.page .pageItemActive{
 border: solid thin #0099FF;
 margin: 5px;
 background-color: #0099FF;
 color:white;
}
.page .pageItem:hover{
 border: solid thin #0099FF;
 background-color: #0099FF;
 color:white;
}
.page .pageItemDisable{
 border: solid thin #DDDDDD;
 margin: 5px;
 background-color: #DDDDDD;
}

</style>

java中处理:

//获取当前页
   String pageIndex = "1";//默认为第一页
   if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){
    pageIndex = (String)request.getParameter("pageIndex");
   }
   //最后需要将当前页返回给前台,用于样式的展示
   request.setAttribute("pageIndex", pageIndex);
   //一顿计算。。。。,取得startNum,endNum
   String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1);
   String endNum = Integer.toString(Integer.parseInt(startNum)+9);
   //根据条件查询
   List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum);
   //查询出总数,用作分页
   Integer serviceCount = serviceServiceImpl.getServiceCount(service);
   request.setAttribute("count",serviceCount);//总数
   Integer countPage = serviceCount/10;
   if((serviceCount/10.0-serviceCount/10)>0){//有小数,总页数+1
    countPage = countPage+1;
   }
   request.setAttribute("countPage",countPage);//总页数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

本文仅为自己记录下编写过程,如有兴趣,或者疑问,请与我联系。
写前背景:java开发工作经验一年,现项目…

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
  </head> 
  <body> 
    <div id="name1"></div> 
    <button id="btn">stop</button> 

  </body> 
  <script type="text/javascript"> 
    var flag = true; 
    var str = "张三,李四,王五,马六"; 
    var arr = str.split(","); 
    var interId = setInterval("randName()",100); 
    function randName(){ 
      var rand = Math.floor(Math.random() * arr.length); 
      name1.innerHTML = arr[rand]; 
    }   
    btn.onclick = function (){ 
      if (flag) { 
        btn.innerHTML = "start"; 
        clearInterval(interId); 
        flag = false; 
      } else{ 


btn.innerHTML = "stop"; 
        interId = setInterval("randName()",100); 
        flag = true; 
      } 
    } 
  </script> 
</html> 

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章