JavaScript笔记
2023-06-13 09:18:30 时间
记录了一些常用的JavaScript用法
获得事件
var event = event || window.event;
阻止事件冒泡
var event = event || window.event;
//阻止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
获得点击的某个对象的id
var targetId = event.target ? event.target.id : event.srcElement.id;
阻止事件的默认行为
//除IE浏览器以外的其他浏览器
if(event.preventDefault) {
event.preventDefault();
//如果当前的浏览器是IE浏览器
} else {
event.returnValue = false;
}
获得浏览器的宽度
document.documentElement.clientWidth || document.body.clientWidth;
获得浏览器的高度
document.documentElement.clientHeight || document.body.clientHeight;
获得水平方向上滚动条到浏览器最左端的距离
document.documentElement.scrollLeft || document.body.scrollLeft
获得竖直方向上的滚动条到浏览器顶部的距离
document.documentElement.scrollTop || document.body.scrollTop;
禁止单击鼠标左键并移动鼠标时拖拽图片方法
function imgdragstart() {
return false;
}
//获得所有图片
var imgs = document.getElementsByTagName('img');
//遍历图片
for(var i = 0; i < imgs.length; i++) {
//禁止单击鼠标左键并移动鼠标时拖拽图片
imgs[i].ondragstart = imgdragstart;
}
当浏览器窗口发生变化时,重新加载整个页面
//监听浏览器窗口大小是否发生变化
window.onresize = function () {
//重新加载当前页面
location.reload(true);
}
获得浏览器到显示屏的距离
//获得浏览器左端到显示屏左端的距离
var leftPos = (typeof window.screenLeft == 'number') ?
window.screenLeft : window.screenX;
//获得浏览器上端到显示屏上端的距离
var topPos = (typeof window.screenTop == 'number') ?
window.screenTop : window.screenY;
获得浏览器窗口大小
//获得浏览器窗口的宽度
var pageWidth = window.innerWidth;
//获得浏览器窗口的高度
var pageHeight = window.innerHeight;
if (typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
获得竖直方向上的滚动条到浏览器顶部的距离
getScrollTop: function () {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset;
} else if (document.compatMode && document.compatMode !== 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
} else if (document.body) {
scrollPos = document.body.scrollTop;
}
return scrollPos;
}
将字符串转换成数组
var arr = Array.prototype.slice.call('abc');
判断数据类型
var type = function (o) {
var s = Object.prototype.toString.call(o);
return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"
获得任意范围内数字的随机数
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
getRandomInt(1, 6) // 5
使用 JavaScript 创建二维数组
var array = new Array(15);
for (var x = 0; x < 15; x++) {
array[x] = new Array(15);
for (var y = 0; y < 15; y++) {
array[x][y] = 0;
}
}
任意值转换成 Base64 编码
btoa('hello world')
Base64 编码转成原来的值
atob('aGVsbG8gd29ybGQ=')
使用数组的形式访问对象的属性
let person = {
name: 'meishadevs',
age: 25,
sex: '男'
}
let name = person['name']
let age = person['age']
let sex = person['sex']
console.log('name:', name)
console.log('age:', age)
console.log('sex:', sex)
执行结果
IE浏览器下日期格式化
因为IE浏览器下不支持年月日日之间有横线连接的形式,所以在IE浏览器下做日期格式化时,需要用下面的正则表达式先将 横线转换成斜线,例如将2019-12-31 10:48:30 转成 2019/12/31 10:48:30
var date = "2019-12-31 10:48:30 ";
// 将所有的 '-' 转为 '/' 即可 兼容 IE 浏览器
var date1 = date.replace(new RegExp(/-/gm), '/');
var date2 = date.replace(/-/g, '/');
console.log("date:", date);
console.log("date1:", date1);
console.log("date2:", date2);
执行结果
meishadevs欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果。 转载请注明: 【文章转载自meishadevs:JavaScript笔记】
相关文章
- JavaScript笔记(5)
- JavaScript笔记(7)
- JavaScript笔记(9)
- JavaScript笔记(16)之事件高级
- JavaScript笔记(19)之JS执行机制
- 【说站】JavaScript全局作用域是什么
- Javascript入门学习第四篇js对象和数组
- javascript优先加载笔记代码
- JavaScript中级笔记第四章闭包
- javascript洒脱飘动的文字
- Javascript学习笔记5类和对象
- JavaScript学习笔记(十四)正则表达式
- JQuery操作Javascript对象和数组的工具函数小结
- javascript精粹笔记
- JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
- javascript学习笔记(一)DOM基本操作
- javascript学习笔记(四)倒计时程序代码
- javascript学习笔记(五)正则表达式
- javascript温习的一些笔记基础常用知识小结
- JavaScript高级程序设计错误处理与调试学习笔记
- javascript学习笔记(二)js一些基本概念
- JavaScript与DOM组合动态创建表格实例
- javascript中使用正则表达式进行字符串验证示例
- JavaScript根据数据生成百分比图和柱状图的实例代码
- javascript中的self和this用法小结
- javascript实现数字验证码的简单实例
- Javascript学习笔记之函数篇(六):作用域与命名空间
- javascript工厂方式定义对象
- Javascript与jQuery方法的隐藏与显示
- JavaScript学习笔记之JS事件对象