第一篇博客从js通用方法笔记开始(不定期持续更新)
js笔记
//全局变量
/*分页方法全局参数*/
var pageSize = ""; //每页显示的记录条数
var curPage = ""; //当前页
var len = ""; //总行数
var page = ""; //总页数
var begin = ""; //当前显示页起始记录
var end = ""; //当前显示页结束记录
$(function(){
dragPanelMove(downDiv, moveDiv);
unique(arr);
dealSubtraction(arr1,arr2);
pagesJump();
});
//div块的拖拽事件（点击标题部分拖动整个模块在浏览器可视区域内移动，参数：downDiv:鼠标按下触发移动动作的div盒子(例如提示框的标题);moveDiv：移动的盒子）
function dragPanelMove(downDiv, moveDiv) {
$(downDiv).mousedown(function (e) {
var isMove = true;
var disX = e.clientX - $(moveDiv).offset().left; //移动盒子的左边距
var disY = e.clientY - $(moveDiv).offset().top; //移动盒子的上边距
var boxWidth = $(moveDiv).width(); //盒子的宽
var boxHeight = $(moveDiv).height(); //盒子的高
var browserWidth = document.documentElement.clientWidth; //浏览器可视宽
var browserHeight = document.documentElement.clientHeight; //浏览器可视高
var objL = "",objT = ""; //左上边距
$(document).mousemove(function (e) {
if (isMove) {
objL = (e.clientX - disX) + 'px';
if((e.clientX - disX)<=0){
objL = 0;
}else if((boxWidth - disX + e.clientX) >= browserWidth){
objL = browserWidth - boxWidth + "px";
}
objT = (e.clientY - disY) + 'px';
if((e.clientY - disY) <= 0){
objT = 0;
}else if((boxHeight - disY + e.clientY) >= browserHeight){
objT = browserHeight - boxHeight + "px";
}
$(moveDiv).css({"left": objL, "top": objT});
}
}).mouseup(function () {
isMove = false;
});
});
}
//去重
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
},
//求差
function dealSubtraction(arr1,arr2){ //参数标记：arr1:父级数组（和），arr2比较数组（子）；
var arrResult = new Array();
for(var i=0; i < arr1.length; i++){
var flag = true;
for(var j=0; j < arr2.length; j++){
if(arr1[i] == arr2[j])
flag = false;
}
if(flag){
arrResult.push(arr1[i]);
}
}
return arrResult;
},
//获取当前时间 年-月-日 时:分:秒
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
//手动分页--插入
1)html结构部分代码
<!--分页-->
<div class="pagingBox">
<span class="Btn" id="btn1"></span>
<span class="Btn" id="btn2"></span>
<span class="Btn" id="btn0">0</span>
<span class="Btn">/</span>
<span class="Btn" id="btn6">1</span>
<span class="Btn" id="btn3"></span>
<span class="Btn" id="btn4"></span>
<input id="changePage" type="text">
<span class="Btn" id="btn5">跳转</span>
</div>
2)js方法部分
function Paging(){
pageSize = 6;
curPage = 1;
len = $(".lableList").children("div").length;
page = len % pageSize == 0 ? len / pageSize : Math.ceil(len / pageSize);
document.getElementById("btn0").innerHTML = curPage;
document.getElementById("btn6").innerHTML = page;
displayPage(curPage);
}
function displayPage(showPageNum){
if(showPageNum <= 1){
curPage = 1;
}else if(showPageNum >= page){
curPage = page;
}else{
curPage = showPageNum;
}
document.getElementById("btn0").innerHTML = curPage;
document.getElementById("changePage").value = curPage;
begin = (curPage - 1) * pageSize;// 起始记录号
end = begin + 1 * pageSize - 1; // 末尾记录号
if (end > len) end = len;
$(".lableList>div").hide(); // 首先，设置这行隐藏
$(".lableList>hr").hide();
$(".lableList>div").each(function (i) { // 然后，通过条件判断决定本行是否恢复显示
if (i >= begin && i <= end)//显示begin<=x<=end的记录
{
$(this).show();
$(this).next('hr').show();
}
});
}
function pagesJump(){
var jumpPage = "";
//首页
$("#btn1").click(function(){
displayPage(1);
});
//上一页
$("#btn2").click(function(){
if(curPage > 1){
jumpPage = curPage - 1;
}else{
jumpPage = 1;
}
displayPage(jumpPage);
});
//下一页
$("#btn3").click(function(){
if(curPage < page){
jumpPage = curPage + 1;
}else{
jumpPage = page;
}
displayPage(jumpPage);
});
//尾页
$("#btn4").click(function(){
displayPage(page);
});
//跳转到 页
$("#btn5").click(function(){
var jumpPagesNum = $("#changePage").val();
if(jumpPagesNum<1){
alert("请输入正确页码！");
jumpPage = 1;
}else if(jumpPagesNum>page){
alert("当前页码已超出范围");
jumpPage = page;
}else{
jumpPage = jumpPagesNum;
}
displayPage(jumpPage);
});
}
//分页方法修正记录
//分页跳转
function dealPaing(){
$(".pagingBox").children("span").unbind().click(function(obj){
//跳转至首页
if($(obj.currentTarget)[0].className == "firstPage"){
pageNumber = 0;
}else if($(obj.currentTarget)[0].className == "prePage"){
if(currentPage>0){
pageNumber = currentPage -1;
}else{
pageNumber = 0;
yonLink.Main.dealInfoMsgBox("当前页面已是第一页！",false,false);
}
}else if($(obj.currentTarget)[0].className == "nextPage"){
if(currentPage<endPage-1){
pageNumber = currentPage + 1;
}else{
pageNumber = endPage-1;
yonLink.Main.dealInfoMsgBox("当前页面已是最后一页！",false,false);
}
}else if($(obj.currentTarget)[0].className == "lastPage"){
pageNumber = endPage - 1;
}else if($(obj.currentTarget)[0].className == "toJump"){
var toJumpPageNum = $(".jumpPage").val();
if(toJumpPageNum == "") {
pageNumber = 0;
$(".pages").children("b:first-child").html("1");
yonLink.Main.dealInfoMsgBox("请输入跳转页码！",false,false);
}
if(toJumpPageNum<1){
pageNumber = 0;
$(".pages").children("b:first-child").html("1");
// $(".jumpPage").val("1");
yonLink.Main.dealInfoMsgBox("当前跳转页面超出内容列表范围，已显示至列表第一页！",false,false);
}else if(toJumpPageNum>endPage){
pageNumber = endPage - 1;
$(".pages").children("b:first-child").innerText == endPage;
// $(".jumpPage").val(endPage);
yonLink.Main.dealInfoMsgBox("当前跳转页面超出内容列表范围，已显示至列表最后一页！",false,false);
}else{
pageNumber = toJumpPageNum - 1;
$(".pages").children("b:first-child").innerText == toJumpPageNum;
// $(".jumpPage").val(toJumpPageNum);
}
}
$(".jumpPage").val("");
currentPage = pageNumber;
dealPagingSelected(pageNumber,pageSize,"");
});
}
js下载txt文件不再浏览器直接打开
<a :href="fileUrl" class="downloadFile" id="downloadFile" :download="fileName">下载</a>
