原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS实现分页效果</title>
<style>
body{
margin:100px 200px;
}
#page{
margin:20px 0;
}
#page>#pre,#page>#next{
display:inline-block;
height: 34px;
line-height:34px;
padding: 0 18px;
border: 1px solid #e1e2e3;
text-decoration:none;
}
.list{
display:inline-block;
}
.list a{
text-decoration:none;
padding:0 5px;
}
.list a.current{
color:red;
}
</style>
</head>
<body>
<section id="box"></section>
<div id="page">
<a href="javascript:;" id="pre">上一页</a>
<div class="list"></div>
<a href="javascript:;" id="next">下一页</a>
</div>
</body>
</html>
<script>
'use strict'
// 获取元素
let domBox = document.getElementById("box");
let domPage = document.getElementById("page");
let domPre = document.getElementById("pre");
let domNext = document.getElementById("next");
let domList = document.querySelector(".list");
// 模拟数据
let arrJson = [
'Content_1',
'Content_2',
'Content_3',
'Content_4',
'Content_5',
'Content_6',
'Content_7',
'Content_8',
'Content_9',
'Content_10'
];
let jsonLen = arrJson.length;
// 设置规则
let each = 3;
let page = Math.ceil(jsonLen / each);
// 设置内容
for(let i=0;i<each;i++){
let domP = '<p>'+ arrJson[i] +'</p>';
domBox.innerHTML += domP;
}
// 设置列表页数
for(let i=0;i<page;i++){
let domA = document.createElement('a');
domA.href = 'javascript:;';
domA.innerHTML = i + 1;
domList.insertBefore(domA,null);
}
// 切换页
domList.addEventListener('click',function(e){
let target = e.target;
let targetName = target.nodeName.toLocaleLowerCase();
if(targetName==='a'){
domBox.innerHTML = '';
if(target.innerHTML!=='1'){
if(target.innerHTML==='2'){
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i-1+(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}else if(target.innerHTML==='3'){
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i+(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}else{
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i + (target.innerHTML-each) +(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}
}else{
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}
}
})
</script>
算法
<!-- 2*2-1 2*3 2*4+1 2*5+2 -->
<!-- 3.4.5 6.7.8 9.10.11 12.13.14 -->
原生JS实现分页效果1.0相关推荐
- 原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
- 原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
- 原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
- 原生js漂浮广告效果
原生js漂浮广告效果 静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生js实现分页的效果
想必大家都用过百度查找过我们想要的信息,每次我们查找东西的时候,百度都会返给我们很多很多相似和有关的结果,而这些结果是不可能一页就显示完全的,一般都会分很多很多页,效果图如下.所以我们今天就是要分享一 ...
- html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下 上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
最新文章
- Spring Boot JPA的查询语句
- 运维人员如何最大限度避免误删除文件
- Web ,Servlet,jsp技术
- .net2005底层类
- 电子邮件.NET控件MailBee.NET Objects v11.1发布丨附下载
- oppo包名_常用APP(apk)对应包名总结(持续更新...)
- 蓝桥杯---试题 历届试题 填字母游戏(博弈)
- 【机器学习】基于mnist数据集的手写数字识别
- Redis(六)Java连接Redis
- 机器学习的安全及隐私保护研究
- Intel XEON L/E/X/W 系列的区别
- php编程好学不,PHP编程一般学哪些内容 PHP编程好学吗
- C/C++ 开源库及示例代码
- GitHub学生包申请(学生认证)教程,国内外主流云主机平台对比
- 好用的磁碟重組工具 - UltimateDefrag
- scrollHeight, clientHeight, offsetHeight的区别
- allegro 对齐元器件_Allegro怎么对元器件进行对齐?
- vue自定义指令之防抖函数
- python 命令行参数 parser.add_arguement 中各参数的意思
- Android优秀学习资源列表
热门文章
- 浅谈Oracle Online redo log
- WebGame 客户端 美术资源处理之PNG批量导出SWF
- UIBarButtonItem使用困惑
- WebSphere MQ For AIX和HP-UX安装配置
- Xamarin XAML语言教程使用方法设置进度条进度
- Android 2D游戏引擎AndEngine配置环境
- php 像页面输出html,PHP在页面中原样输出HTML代码的方法介绍
- animate inater插件_C4D R20插件下载 旧版插件C4D R20桥接插件INSYDIUMS Plug-In Bridge Cinema 4D R20 免费版 下载-脚本之家...
- 计算机辅助教育的可行性和存在的问题,论计算机辅助教学存在的问题及解决思路..docx...
- ubuntu14.04 install build-essential 出现错误 unable to loate package build-essential