最近写js发现很多规则跟自己想的不一样,毕竟刚上手不就,所以绕了很多弯弯,这里总结记录下
1,由于file标签上传时:onchange方法在再次上传相同文件不在被触发
想要被触发的方法:
$("#file").on("change", function (evt) {
var fileExtend = fileName.substring(file.value.lastIndexOf('.'));//获取文件后缀 .zip/.png为了方便比较还可以把她转为小写.....
this.value = '';//为了能持续触发onchange 因为当value值相同就不会再触发 特别是点击返回按钮过来的情况
});
- 1
- 2
- 3
- 4
2,读取file上传的文件信息
$("#file").on("change", function () {
var files = $(this).prop('files');
var reader = new FileReader();
reader.readAsText(files[0], "UTF-8");//读取文件
reader.onload = function (evt) {
var fileString = evt.target.result; // 读取文件内容
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3,生成本地文件
<a onfocus="this.blur();" style="display: none" id="createInvoteBtn" class="ipt-todo" href="javascript:void(0)">生成并导出Txt文件</a>
<a onfocus="this.blur();" style="display: none" id="createInvote" class="ipt-todo hide">code</a>
为了兼容IE请把上述标签写上,由于display:none所以不影响网页内容
/**
*fileName 文件名
*fileData 需要写入文件的内容
*/
function generateFile(fileName,fileData){
var isIE = (navigator.userAgent.indexOf('MSIE') >= 0);//是否是IE浏览器
if (isIE) {
var winSave = window.open();
winSave.document.open("text", "utf-8");
winSave.document.write(fileData);
winSave.document.execCommand("SaveAs", true, fileName);
winSave.close();
} else {
var mimeType = 'text/plain';
$('#createInvote').attr('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(fileData));
var btn = document.getElementById('createInvote');
btn.download = fileName;
document.getElementById('createInvote').click();//为了触发createInvote
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
4,根据map(key,value)的value重大到小递归排序map
/**
*map 是需要排序的对象
*newMap 排序后的map对象
*/
var newMap = {};
function orderMapByvalue(map) {
if (JSON.stringify(map) == "{}") {
//doSomething
return newMap;//注意for(key in map)是异步遍历,所以对newMap的操作最好在return前
}
for (key1 in map) {//只是为了获得第一组的key value 遍历一次就会break
var tempKey = key1;
var tempValue = map[key1];
for (key2 in map) {
if (map[key2] - tempValue >= 0) {//这里是排序规则 根据需求改变
tempKey = key2;//接受value最大的key
tempValue = map[tempKey];//最大的value
}
}
newMap[tempKey] =tempValue;//注意如果key是数字无论是你是什么时候插入 1还是"1" 系统会自动根据数字的大小重新排序,我这里的key不是纯数字,所以没问题
delete map[tempKey];
break;//break是为了只for一次,毕竟js我没找到直接获取map第一个元素对的方法,只能这样来获取map里的第一组数据
}
orderMapByvalue(map);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
5 获取当前页面的滚动条纵坐标位置
用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。
documentElement 不常用。这容易在开发中犯错，网上很多例子，用的是 document.body.scrollTop ，实际上是取不到正确值的。
window.onscroll=function () {
//读取内容区域的真实高度（滚动条高）
// console.log(document.documentElement.scrollHeight);
//读取滚动条的位置
// console.log(document.documentElement.scrollTop);
// var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;兼容移动端
//设置滚动到的位置
// document.documentElement.scrollTop=800;
//读取元素的高度
//console.log(document.documentElement.clientHeight);
//意思就是内容总体的高度 - 滚动条的偏移值 === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
if(document.documentElement.scrollHeight-document.documentElement.scrollTop===document.documentElement.clientHeight){
console.log("到达底部");
//移除disabled属性
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
下面转自 https://www.cnblogs.com/momo798/p/5923371.html
client***属性（clientWidth、clientHeight）:
表示元素可以看到内容的可见区域部分，一般是最后一个对象条以下到状况栏以上的这个区域，与页面内容无关。且它会直接返回属性的数值大小，可直接进行计算。分开说的话也可以这样理解：若元素大小小于父元素，大小包括padding、content部分，不包括border；若元素大小大于父元素，则表示可以看到的部分的高或宽。
offset***属性（offsetWidth、offsetHeight、offsetTop、offsetLeft）：
对于offsetWidth和offsetHeight，都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是：若对象的宽度设定值为百分百宽度，无论页面变大或变小，style.width都返回此百分比；而offsetWidth则返回页面中对象的宽度值而不是百分比。
对于offsetTop和offsetLeft，都表示当前元素对象相对于其定位元素的垂直/水平偏移量。
scroll***属性（scrollTop、scrollLeft、scrollHeight、scrollWidth）:
scroll是滚动的意思，也就是scrollWidth、scrollHeight属性代表元素对象真实的宽高，即使有一部分看不到；scrollTop、scrollLeft代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔，也是元素垂直/水平滚动了的距离，或者是元素卷帘卷走的视觉中看不到的部分。
有两个关系式是(当所有元素的margin均初始化设为0时)：
scrollHeight - scrollTop = clientHeight：当这两个条件成立时，也就代表垂直滚动条走到底了
scrollWidth - scrollLeft = clientWidth：当这两个条件成立时，也就代表水平滚动条走到底了