- $.ajax()获取后台数据中，在IE浏览器的兼容问题
crossDomain: true == !(document.all)
- 字体超出省略号显示
//一行显示超出
overflow:hidden；
text-overflow:ellipsis；
white-space：nowrap；
//多行超多显示
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
- 时间戳转换为日期
//根据时间戳转化为日期格式
function timestamp(ele) {
var date = new Date(ele);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
}
//根据时间戳转化为时分秒
function formatDuring(mss) {
var days = parseInt(mss / (1000 * 60 * 60 * 24));
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (mss % (1000 * 60)) / 1000;
return hours + " 小时 " + minutes + " 分钟 ";
}
//根据时间判断星期几
function getWeek(timedat) { //timedat参数格式： getWeek（new Date("2017-10-27" )）
var week;
if (timedat.getDay() == 0) week = "星期日";
if (timedat.getDay() == 1) week = "星期一";
if (timedat.getDay() == 2) week = "星期二";
if (timedat.getDay() == 3) week = "星期三";
if (timedat.getDay() == 4) week = "星期四";
if (timedat.getDay() == 5) week = "星期五";
if (timedat.getDay() == 6) week = "星期六";
return week;
}
//获取星期几
function date() {
//时间格式转换
var newDate = dateToStr(new Date());
//获取当天是星期几
var ji = "日一二三四五六".charAt(new Date().getDay());
var xingqi = " 星期" + ji + ' ' + newDate;
return xingqi;
}
function dateToStr(datetime) {
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1; //js从0开始取
var date = datetime.getDate();
var hour = datetime.getHours();
var minutes = datetime.getMinutes();
var second = datetime.getSeconds();
if (month < 10) {
month = "0" + month;
}
if (date < 10) {
date = "0" + date;
}
if (hour < 10) {
hour = "0" + hour;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (second < 10) {
second = "0" + second;
}
// var time = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + second;
var times = hour + ":" + minutes + ":" + second; //返回时分秒
return times;
}
- art-template模板中的多条件判断
html代码：
<td id="orderStatus" width="25%">{{if obj.orderStatus==0}} 取消订单 {{else if obj.orderStatus==1}} 等待报价 {{else if obj.orderStatus==2}} 报价完成 {{else if obj.orderStatus==3}} 确认定制 {{else if obj.orderStatus==4}} 平台受理 {{else if obj.orderStatus==5}} 已付定金 {{else if obj.orderStatus==6}}
定制中 {{else if obj.orderStatus==7}} 已发货 {{else if obj.orderStatus==8}} 已付尾款 {{else if obj.orderStatus==9}} 完成订单 {{/if}}</td>
-
库和框架的区别
库：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；
框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。 -
JavaScript中的find（）方法不能再IE12以下的浏览器中使用，如何解决
在代码中加入即可
if(!Array.prototype.find){
Array.prototype.find = function(callback) {
return callback && (this.filter(callback)|| [])[0];
};
}
- JavaScript中的fill（）方法不能再IE12以下的浏览器中使用，如何解决
放在fill（）方法前
if (!Array.prototype.fill) {
Object.defineProperty(Array.prototype, 'fill', {
value: function(value) {
// Steps 1-2.
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
// Steps 3-5.
var len = O.length >>> 0;
// Steps 6-7.
var start = arguments[1];
var relativeStart = start >> 0;
// Step 8.
var k = relativeStart < 0 ?
Math.max(len + relativeStart, 0) :
Math.min(relativeStart, len);
// Steps 9-10.
var end = arguments[2];
var relativeEnd = end === undefined ?
len : end >> 0;
// Step 11.
var final = relativeEnd < 0 ?
Math.max(len + relativeEnd, 0) :
Math.min(relativeEnd, len);
// Step 12.
while (k < final) {
O[k] = value;
k++;
}
// Step 13.
return O;
}
});
}
比如（放在后面的时候没生效，依旧报错，我不知道为什么）
8. json数组对象，如何取出其中一部分，组成新数组对象
方法一：
方法二：
9.怎么处理多层Json数据循环遍历的问题
链接：https://blog.csdn.net/qq_41485414/article/details/82318964添加链接描述
10.关于后端返回文件内容，前端下载文件问题
我这里使用创建a标签的形式去下载文件
url地址：web_cer_down.cgi 需要传三个参数order（请求方式），sessionid（特别标识，跟token相似），file（文件名）
var _a =document.createElement("a");
_a.setAttribute("href","../../cgi-bin/web_cer_down.cgi?order="+order+"&sessionid="+sessionid+"&file="+name);
_a.setAttribute('download', name);
anchorEl.appendChild(_a);
_a.click();
在 HTML5 中，download 属性是 a 标签的新属性。
<a download="filename"> (filename 规定作为文件名来使用的文本)
download 属性规定被下载的超链接目标。在 a 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
只有 Firefox 和 Chrome 支持 download 属性
解决方法：
const uA = window.navigator.userAgent//判断浏览器内核
const isIE = /msie\s|trident\/|edge\//i.test(uA) && !!("uniqueID" in document || "documentMode" in document || ("ActiveXObject" in window) || "MSInputMethodContext" in window);
var anchorEl = document.getElementById("anchor");//我的页面中的结构由来放创建的a标签
anchorEl.innerHTML = "";
var _a = document.createElement("a");
_a.href = "../../cgi-bin/web_cer_down.cgi?order=" + order + "&sessionid=" + sessionid + "&file=" + name;
_a.download = name;
anchorEl.appendChild(_a);
if (isIE) {
// 兼容IE11无法触发下载的问题
navigator.msSaveBlob(new Blob([resp]),_a.download);
} else {
_a.click();
}
loadingEffect('remove');
_a.addEventListener('click', function() {
URL.revokeObjectURL(_a.href);
anchorEl.removeChild(_a);
});
11.获取鼠标坐标
- PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
- clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
- screenX/screenY：鼠标在屏幕上的位置,从屏幕左上角开始（w3c标准）
- offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
12.多文件下载功能
rows为后台返回的数组，使用闭包来实现所有文件的下载，不然会因为速度太快只下载几个文件
for (var i = 0; i < rows.length; i++) {
(function (a) {
setTimeout(function () {
console.log(rows[a].substring(rows[a].indexOf("2")));
const anchorEl = document.getElementById("downRoom");
anchorEl.innerHTML = "";
const _a = document.createElement("a");
_a.setAttribute("href", rows[a]);
_a.setAttribute("download", rows[a].substring(rows[a].indexOf("2")));
anchorEl.appendChild(_a);
_a.click();
$(_a).remove();
}, a *1000);
})(i)
}
13.我用到的弹框插件
（1）SweetAlert
swal({
title: "导出成功!",
confirmButtonText: "确定",
});
还有很多参数可以设置：
title：提示框标题。
text：提示内容。
type：提示类型，有：success（成功），error（错误），warning（警告），input（输入）。
showCancelButton：是否显示“取消”按钮。
animation：提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等。
html：是否支持html内容。
timer：设置自动关闭提示框时间（毫秒）。
showConfirmButton：是否显示确定按钮。
confirmButtonText：定义确定按钮文本内容。
imageUrl：定义弹出框中的图片地址。
SweetAlert插件的更多信息可以访问github项目网址：https://github.com/t4t5/sweetalert
（2）jQuery BlockUI
$.blockUI(); // 打开
$.unblockUI(); // 关闭
具体用法，例如：
$.blockUI({
message: '<div>下载中...</div>',
css: {
width: '300px',
height: '150px',
lineHeight: '150px',
fontSize: '24px',
left: ($(window).width() - 300) / 2 + 'px',
top: ($(window).height() - 300) / 2 + 'px',
border: 'none',
borderRadius: '5px'
},
overlayColor: "#67809F",
overlayCSS: {
backgroundColor: '#555',
opacity: 0.5,
cursor: 'wait'
}
});
参数设置及用法：
message : 弹出框的信息，可以为html，默认为：<h1>Please wait...</h1>
如：$.blockUI({message:'这是测评'});
$.blockUI({message:$("#test")});
title : 弹窗标题，默认 null ，只能在 theme 为true 的时候使用
theme : 默认 false ,设置为 true 时将使用jqueryUI的 theme
draggable : 是否可拖动，默认 true
css : 弹窗的css样式
overlayCSS : 遮罩层的样式，可以设置背景颜色，透明度，鼠标样式
cursorReset : 等待消息返回是鼠标样式重置，默认为Default
growlCSS : 使用$.growlUI完成弹窗时的样式
baseZ: 弹窗的z-index，默认1000，一般不需要修改，越大越在上面
centerX: 水平居中，默认为 true
centerY: 竖直居中，默认为 true
bindEvents: 遮罩时是否禁用键盘和鼠标事件，默认为 true
constrainTabKey: 遮罩内容的Tab导航是否可用，默认为 true
fadeIn : 淡入时间，默认为 200
fadeOut : 淡出时间，默认为 400
timeout : 自动淡出时间 默认为 0，不自动淡出
showOverlay : 是否自动遮罩 默认为 true
focusInput : 弹窗后自动获得焦点 默认为 true
onBlock : 弹窗完成后的回调，可自行定义function，默认为 null
onUnblock : 弹窗解锁后的回调，可自行定义function，默认为 null
14.将数组合并为新的数组
var obj = {
"1": [111, 222],
"2": [333],
"3": [444, 555]
};
改为obj = [111,222,333,444,555]
方法1：使用es6语法中的...扩展运算符
var obj = {
"1": [111, 222],
"2": [333],
"3": [444, 555]
};
var arr = [];
for(var i in obj){
arr.push(...obj[i]);
}
console.log(arr);
方法2：双层循环
var obj = {
"1": [111, 222],
"2": [333],
"3": [444, 555]
};
var arr = [];
for(var i in obj){
for(var j in obj[i]){
arr.push(obj[i][j]);
}
}
console.log(arr);
方法3：使用concat（）方法
var arr = [];
for(var i in obj){
arr=arr.concat(obj[i]);
}
console.log(arr);
15.bootstrap-table中新增一行数据
/**
* 新增一行数据
*/
function addRow(){
var count = $('#table_add').bootstrapTable('getData').length;
// newFlag == 1的数据为新规的数据
$('#table_add').bootstrapTable('insertRow',{index:count,row:{newFlag:"1"}});
}
注：index:count，其中count是新增行的位置，上就是在表格末尾处新增一行
16.bootstrap-table中实现添加条数，删除条数，同时又能修改的功能
beforeData1 = [];
resdata.data.forEach((item, index) => {
beforeData1.push({
"cslbm": item.cslbm, //场所类型
"cslcm": item.cslcm, //场所楼层
"csfjm": item.csfjm, //场所房间号
"cszwbjfsm": item.cszwbjfsm, //座位布局方式
"cszwqswzm": item.cszwqswzm, //座位起始位置
"cszwplfsm": item.cszwplfsm, //座位排列方式
"csfjrl": item.csfjrl, //房间容量
"uuid": item.uuid,
"csmc": item.csmc//场所名称
});
for (let i = 0; i < beforeData1.length; i++) {
if (beforeData1[i].csuuid == '') {
beforeData1[i].method = "new";
} else {
beforeData1[i].method = "modify";
}
}
});
var rows = $('#sbgltable').bootstrapTable("getData");
// console.log(rows);
// console.log(rows, 'rows', beforeData1, 'beforedata1');
var jsont = [];
rows.forEach(function (item) {
jsont.push({
"cslbm": item.cslbm, //场所类型
"cslcm": item.cslcm, //场所楼层
"csfjm": item.csfjm, //场所房间号
"cszwbjfsm": item.cszwbjfsm, //座位布局方式
"cszwqswzm": item.cszwqswzm, //座位起始位置
"cszwplfsm": item.cszwplfsm, //座位排列方式
"csfjrl": item.csfjrl, //房间容量
"uuid": item.uuid,
"csmc": item.csmc//场所名称
});
})
console.log(jsont,"jsont")
for (let i = 0; i < jsont.length; i++) {
if (jsont[i].uuid == '' || jsont[i].uuid == undefined) {
jsont[i].method = "new";
jsont[i].uuid = '';
} else {
jsont[i].method = "modify";
}
}
var result = [];
var flag = false;
while (beforeData1.length > jsont.length) {
// 删除
for (var i = beforeData1.length - 1; i > -1; i--) {
jsont.forEach((item, j) => {
if (item.uuid == beforeData1[i].uuid) {
flag = true
// console.log(2222)
}
})
if (!flag) {
console.log(111111);
beforeData1[i].method = "delete"
result.push(beforeData1[i]);
beforeData1.splice(i, 1)
}
flag = false
}
}
console.log(beforeData1, 'before')
while (beforeData1.length < jsont.length) {
// 新增
for (var i = jsont.length - 1; i > -1; i--) {
beforeData1.forEach((item, j) => {
if (item.uuid == jsont[i].uuid) {
flag = true
}
})
if (!flag) {
result.push(jsont[i])
jsont.splice(i, 1)
}
flag = false
}
}
beforeData1.forEach((item, i) => {
Object.keys(item).forEach(k => {
// 修改
if (item[k] !== jsont[i][k]) {
flag = true;
}
})
if (flag) {
result.push(jsont[i])
}
flag = false
})
console.log(result, 'result')
16.给数组对象中新增属性，类型如下
arr = [{a:1,jarr_zbrys:[{b:1,c:1},{b:1,c:1}]},{a:2,jarr_zbrys:[{b:2,c:2},{b:2,c:2}]},{a:3,jarr_zbrys:[{b:3,c:3},{b:3,c:3}]}];
改为：arr1 = [{b:1,c:1,a:1},{b:1,c:1,a:1},{b:2,c:2,a:2},{b:2,c:2,a:2},{b:3,c:3,a:3},{b:3,c:3,a:3}]
var zbsj = [{a:1,jarr_zbrys:[{b:1,c:1},{b:1,c:1}]},{a:2,jarr_zbrys:[{b:2,c:2},{b:2,c:2}]},{a:3,jarr_zbrys:[{b:3,c:3},{b:3,c:3}]}];
var jarr = [];
var newData = [];
var data=[];
//将a写进jarr_zbrys的对象中
for (var i = 0; i < zbsj.length; i++) {
jarr = zbsj[i].jarr_zbrys
for (var j = 0; j < jarr.length; j++) {
jarr[j]["a"] = zbsj[i].a;
}
data.push(jarr)
}
console.log(data); //[[],[],[]] 这种形式，还需要拆分 [Array(2), Array(2), Array(2)]
// 第一种（遍历两次，麻烦）
data.forEach((item, index, arr) => {
item.forEach((j, i, row) => {
newData.push(j)
})
})
//第二种 （这个时候用到上面14条的多种方法了）
for(var i in data){
newData=newData.concat(data[i]);
}
//第三种
console.log(newData); // [{…}, {…}, {…}, {…}, {…}, {…}]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
