使用原生javascript实现分页效果的代码实例

来源：懂视网责编：小OO 时间：2020-11-27 20:23:02

使用原生javascript实现分页效果的代码实例

随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让有点眼花缭乱。最近刚好比较清闲，所以没事准备撸撸前端的根基javascript，纯属练练手，写个分页，顺便跟大家分享一下。使用方法。

推荐度：

点击下载本文 文档为doc格式

导读随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让有点眼花缭乱。最近刚好比较清闲，所以没事准备撸撸前端的根基javascript，纯属练练手，写个分页，顺便跟大家分享一下。使用方法。

这篇文章主要为大家详细介绍了原生javascript实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让我们有点眼花缭乱。

最近刚好比较清闲，所以没事准备撸撸前端的根基javascript,纯属练练手，写个分页，顺便跟大家分享一下

使用方法：

<!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 = {
 'total':100,
 'click':function(e){ //e为当前页码
/* $.get('/php',{"page":e},function(data){
 console.log('ok')
 })*/
 }
}
var page = new pageFunc(conf);
</script>
</html>

用原生还是比较麻烦的，为了实现业务，还得去封装一个模仿JQ的.on事件绑定方法。写的比较简陋，一些配置接口没有暴露出来，还可以再抽象暴露。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用原生javascript实现分页效果的代码实例

推荐度：

点击下载本文 文档为doc格式

标签：实现 js 代码

热门焦点

使用原生javascript实现分页效果的代码实例

使用原生javascript实现分页效果的代码实例

使用原生javascript实现分页效果的代码实例

最新推荐

猜你喜欢

热门推荐