페이징 효과를 얻기 위해 네이티브 자바스크립트를 사용하는 코드 예제

이 글에서는 페이징 효과를 구현하기 위한 기본 javascript를 주로 소개합니다. 관심 있는 친구들은

을 참조할 수 있습니다. 최근 프론트엔드 산업의 급속한 발전과 함께 다양한 새로운 프레임워크가 속속 등장하고, 새로운 방식이 우리를 좀 놀라게 했습니다.

요즘 시간이 많이 남아서 프론트엔드의 기본 자바스크립트를 배울 준비가 되었습니다. 그냥 연습용으로 페이징을 작성해서 공유하겠습니다. .

function pageFunc(conf){
 this.myFunc = conf.click //用户点击要执行的方法
 this.total = conf.total; //总页数
 this.currentPage = 1; //当前页码
 this.init()  //初始化 
}

pageFunc.prototype.init = function(){
 var total = this.total,
 currentPage = this.currentPage,
 _this = this;

 listeners = {
 'setWhat' : function(opts) {
  _this.aClick(opts.src)
  return false;
 }
 };

 listenersPre = {
 'lmw-pre' : function(opts) {
  _this.prevClick()
  return false;
 }
 };

 listenersAdd = {
 'lmw-add' : function(opts) {
  _this.addClick()
  return false;
 }
 };

 var rootele = this.createPage(1,total);
 document.getElementById('page-coat').innerHTML = rootele

 $on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签
 $on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页
 $on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页

}
//创建HTML分页结构字符串
pageFunc.prototype.createPage = function(page,total){
 var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>`
 for(var i=1;i<=3;i++){
 if(page-i>1){
  str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
   rel="external nofollow" >${page-i}</a>`+str
 }
 if(page+i<total){
  str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>`
 }
 };
 if(page-4>1){
 str = &#39;<span>...</span>&#39;+str
 };
 if(page+4<total){
 str = str+&#39;<span>...</span>&#39;
 };
 if(page>1){
 str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
 <a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str
 };
 if(page<total){
 str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" >下一页</a>`
 };
 return str
}
//上一页方法
pageFunc.prototype.prevClick = function(){
 var total = this.total
 var va = --this.currentPage 
 var newret = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = newret
 this.myFunc(va) 
}
//下一页方法
pageFunc.prototype.addClick = function(){
 var total = this.total
 var va = ++this.currentPage
 var newret = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = newret 
 this.myFunc(va) 
};
//点击方法
pageFunc.prototype.aClick = function(_this){
 var total = this.total
 var va = parseInt(_this.innerText);
 this.currentPage = va
 var rootele = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = rootele
 this.myFunc(va) 
};


//二：封装事件代理方法
function $on(dom, event, listeners) {
 $addEvent(dom, event, function(e) {
 var e = e || window.event,
 src = e.target || e.srcElement,
 action,
 returnVal;
 
 while (src && src !== dom) {
 action = src.getAttribute(&#39;attr-action&#39;) || src.getAttribute(&#39;class&#39;) ;
 if (listeners[action]) {
 returnVal = listeners[action]({
 src : src,
 e : e,
 action : action
 });

 if (returnVal === false) {
 break;
 }
 }
 src = src.parentNode;
 }
 });
};
//1、封装跨浏览器事件绑定方法
function $addEvent(obj, type, handle) {
 if(!obj || !type || !handle) {
 return;
 }

 if( obj instanceof Array) {
 for(var i = 0, l = obj.length; i < l; i++) {
 $addEvent(obj[i], type, handle);
 }
 return;
 }

 if( type instanceof Array) {
 for(var i = 0, l = type.length; i < l; i++) {
 $addEvent(obj, type[i], handle);
 }
 return;
 }
//2、解决IE中this指向window的问题
 function createDelegate(handle, context) {
 return function() {
 return handle.apply(context, arguments);
 };
 }
 
 if(window.addEventListener) {
 var wrapper = createDelegate(handle, obj);
 obj.addEventListener(type, wrapper, false);
 }
 else if(window.attachEvent) {
 var wrapper = createDelegate(handle, obj);
 obj.attachEvent("on" + type, wrapper);
 }
 else {
 obj["on" + type] = handle;
 }
};

사용 방법:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>分页效果</title>
 <style type="text/css">
 #page-coat a{
  text-decoration:none; 
  display: inline;
  float: left;
  padding: 3px 10px 3px 10px; 
  overflow: hidden; 
  border:1px solid #ccc;
  color:#999;
  margin-right: 5px;
  cursor: pointer;
  background: #fff;
  
 }
 #page-coat a:hover{
  border: 1px solid #FF6600;
  background-color: #FF6600;
  color: #fff; 
 }
 #page-coat span{
  display: inline;
  float: left;
  color:#999;
  background: #fff;
 }
 #page-coat a.lmw-current{
  color: #FF6600;
  border: 1px solid #FF6600;
  background-color: #FFEEE5;
 }
 </style>
</head>
<body class="l-bg2">
 <p id="page-coat">
 
 </p> 
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
 &#39;total&#39;:100,
 &#39;click&#39;:function(e){ //e为当前页码
/* $.get(&#39;/php&#39;,{"page":e},function(data){
  console.log(&#39;ok&#39;)
 })*/
 }
}
var page = new pageFunc(conf);
</script>
</html>

네이티브를 사용하는 것은 여전히 ​​번거롭습니다. 비즈니스를 구현하려면 JQ를 모방한 .on 이벤트 바인딩 방법을 캡슐화해야 합니다. 작성은 비교적 간단하며 일부 구성 인터페이스가 노출되지 않아 추상적으로 노출될 수 있습니다.

위 내용은 페이징 효과를 얻기 위해 네이티브 자바스크립트를 사용하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!