JS常見代碼塊，持續(xù)更新......
https://blog.csdn.net/real_bird/article/details/55510296
2017年02月17日 19:18:13 睡在我下鋪的上鋪的胖子 閱讀數(shù) 1095
版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載绑莺。 https://blog.csdn.net/Real_Bird/article/details/55510296
個人使用過程中收集的…弄丟了幾次，現(xiàn)在放到博客惕耕，更新中……
1纺裁、拿到總的offsetLeft
function getOffsetLeft(dom){
var actualLeft = dom.offsetLeft;
var curr = dom.offsetParent;
while(curr){
actualLeft += curr.offsetLeft;
curr = curr.offsetParent;
}
return actualLeft;
}
2、拿到總的offsetTop
function getOffsetTop(dom){
var actualTop = dom.offsetTop;
var curr = dom.offsetParent;
while(curr){
actualTop += curr.offsetTop;
curr = curr.offsetParent;
}
return actualTop;
}
3司澎、添加事件處理程序兼容性寫法 ie8及之前
//Dom0級事件處理程序 動態(tài)綁定 btn.onclinck = function(){this === btn};
/*使用attachEvent方法時欺缘，
1...事件處理程序在全局作用域運行，this等于window挤安；
2...添加多個時谚殊，按相反順序執(zhí)行
3...必須加on
*/
function addHandle(dom,type,handle){
if(dom.addEventListener){
dom.addEventListener(type,handle,false);
}else if(dom.attachEvent){
dom.attachEvent("on"+type,handle);
}else{//DOM0級
dom["on"+type] = handle;
}
}
4、移除事件處理程序
function removeHandle(dom,type,handle){
if(dom.removeEventListener){
dom.removeEventListener(type,handle);
}else if(dom.detachEvent){
dom.detachEvent("on"+type,handle)
}else{
dom["on"+type] = null;
}
}
5蛤铜、拿到事件對象
function getEvent(event){
return event || window.event;
}
6嫩絮、拿到真正的目標而非冒泡目標
function getTarget(event){
return event.target || event.srcElement;//兼容老版本ie
}
7、阻止默認行為
function preventDefault(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;//兼容老版本ie
}
}
8围肥、停止冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
9剿干、設(shè)置光標的位置
function setCaretPosition(ctrl, pos){
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
10、在光標的位置插入值
function insertText(obj,text){
if(document.selection){
var sel = document.selection.createRange();//返回 TextRange 或 ControlRange 對象
sel.text = text;
}else if(typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number'){
var startPos = obj.selectionStart;//選中的開始位置
var endPos = obj.selectionEnd;//選中的結(jié)束位置
var cursorPos = startPos;//光標的開始位置 和選中的開始位置相同
var tempStr = obj.value;//拿到對象的值 textarea中的值
obj.value = tempStr.substring(0,startPos) + text + tempStr.substring(endPos,tempStr.length);//把text插入到光標位置
cursorPos += str.lenth;//更新光標的值
obj.selectionStart = obj.selectionEnd = cursorPos;//將光標放到正確位置
}else{
obj.value += str;
}
}
11虐先、拿到對象的css屬性
function getStyle(dom,cssAttr){
return window.getComputedStyle ? window.getComputedStyle(dom,null)[cssAttr] : dom.currentStyle[cssAttr];
}
12怨愤、move動畫，涉及px的屬性蛹批，包括透明度
function move(dom,json,callback){
clearInterval(dom.timer);//每一次move之前都要清除動畫撰洗。否則一個leave后沒清動畫，下一個無法onmouseover
dom.timer = setInterval(function(){
//每30秒執(zhí)行一遍所有的attr屬性腐芍，和if（mark）
var mark = true;//設(shè)置mark--是因為有多個屬性差导。多個屬性同時滿足條件，才執(zhí)行if（mark）
for(var attr in json){
var cur = 0;
if(attr == "opacity"){
cur = getStyle(dom,attr) * 100;//乘以100是為了方便改變speed
}else{
var cur = parseInt(getStyle(dom,attr)) || 0;//如果沒設(shè)置屬性默認讓它為0
}
var target =json[attr];//move的目標
var speed = (target - cur) * 0.5;//速度的絕對值一直在減小
speed = (speed > 0) ? Math.ceil(speed) : Math.floor(speed);//太小了為+-1
if(target > cur){//從小變到大的時候猪勇，還沒完成
mark = false;//直到三個都相等mark才是true
cur += speed;//cur網(wǎng)target改變
if(cur >= target){//不小心超過了设褐，就等于target
cur = target;
}
}else if(cur > target){//從大變小 json[attr] < cur
mark = false;
cur += speed;
if(cur <= target){
cur = target;
}
}
if(attr == "opacity"){//如果屬性是透明度
dom.style[attr] = cur / 100;
}else{
dom.style[attr] = cur + 'px';
}
}
if(mark){//知道所有的cur == target 時 mark 才為 true
clearInterval(dom.timer);//完成了當前階段，清除定時器
if(callback){//有回調(diào)函數(shù)泣刹，就執(zhí)行回調(diào)函數(shù)
callback.call(dom);
}
}
},30)
}
13助析、混入
function mix(target){
var args = [].slice.call(arguments);
for(var i = 1, len = args.length; i < len; i++){
while(args[i]){
for(var key in args[i]){
if(args[i].hasOwnProperty(key)){
target[key] = args[i][key];
}
}
i++;
}
}
return target;
}
14、獲取鼠標位置
function getMounsePosition(e){
var event = getEvent(e);
var x = 0, y = 0;
if(event.pageX && event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.cientX + document.documentElement.scrollLeft || document.body.scrollLeft;
y = event.cientY + document.documentElement.scrollTop || document.body.scrollTop;
}
return {x:x,y:y};
}
15椅您、獲取滾動條寬度
function getScrollbarWidth() {
var oP = document.createElement('p'),
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll'
}, i, scrollbarWidth;
for (i in styles){
oP.style[i] = styles[i];
}
document.body.appendChild(oP);
scrollbarWidth = oP.offsetWidth - oP.clientWidth;
oP.parentElement.removeChild(oP);
return scrollbarWidth;
}
16外冀、js使一個元素居中
function centerElement(id){
var boxDom = document.getElementById(id);
var sw = boxDom.offsetWidth;
var sh = boxDom.offsetHeight;
var dw = window.innerWidth;
var dh = window.innerHeight
var cleft = (dw - sw) / 2;
var ctop = (dh - sh) / 2;
boxDom.style.left = cleft + "px";
boxDom.style.top = ctop + "px";
}
17、操作兄弟元素（jq是siblings()）
function siblings(obj,callback){
var children = obj.parentElement.children;
var arr = [].slice.call(children);
arr.forEach(function(item,index,arr){
if(item != obj && callback){
callback.call(item)
}
})
}
18掀泳、范圍隨機數(shù)
function randomRange(begin,end){
return Math.floor(Math.random()*(end-begin))+begin;
};
19雪隧、禁用右鍵/修改右鍵菜單
document.oncontextmenu = function(e) {
awesomeMenu(e);
}
function awesomeMenu(e) {
var x = e.clientX;
var y = e.clientY;
// 獲取到鼠標位置后就可以自定義菜單了
}
</article>
