javascript通用代码合集
1.逐一绑定操作到window.onload上
//func:新函数
function addLoadEvent(func){
//把现有的window.onload事件处理函数的值存入变量oldonload
var oldload = window.onload;
//如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它
if(typeof oldload !== 'function'){
window.onload = func;
} else {
//如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾
window.onload = function(){
oldload();
func();
}
}
}
2.插入一个元素到另一个元素的后面
虽然dom没有提供直接的方法,但是提供了这一操作的所有“原材料”
//首先,这个函数有两个参数:一个是将被插入的新元素,另一个是目标元素。
function insertAfter(newElement, targetElement){
//把目标元素的parentNode属性值保存到变量parent里
var parent = targetElement.parentNode;
//检查目标元素是不是parent的最后一个元素
if(parent.lastChild === targetElement){
//如果是,则追加
parent.appendChild(newElement);
} else {
//如果不是,则把新元素插入到目标元素和目标元素的下一个兄弟元素之间。
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
3.获取一个元素的下一个元素(不是节点,节点包括:文本节点,属性节点,元素节点)
//把当前元素的nextSibling节点作为参数传递给getNextElement函数
function getNextElement(node){
if(node.nodeType === 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
4.为一个元素添加className
//参数一:需要添加新class的元素
//参数二:新的class设置值
function addClass(element,value){
//检查className属性的值是否为null
if(element.className === null){
//如果是,把新的class设置值直接赋值给className属性
element.className = value;
} else {
//如果不是,把一个空格和新的class设置值追加到className属性上去
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
5.移动页面元素:前提是元素能够移动,比如postion:absolute,父元素为postion:relative
//移动元素到指定位置
//参数:
//elementID 元素ID
//final_x 目标位置横坐标
//final_y 目标位置纵坐标
//interval 计时器timeout时长
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID);
//清除掉元素下所有计时器,重新开始,防止多个计时器混乱
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos,ypos;
//如果属性值为null,设置为0
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
xpos = parseInt(elem.style.left);
ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y){
return true;
}
/*if(xpos < final_x){
xpos ++;
}*/
var dist;
if(xpos < final_x){
//实现由快到慢的动画效果
dist = Math.ceil((final_x - xpos)/10);
xpos += dist;
}
/*if(xpos > final_x){
xpos --;
}*/
if(xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos -= dist;
}
/*if(ypos < final_y){
ypos ++;
}*/
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
}
/*if(ypos > final_y){
ypos --;
}*/
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos -= dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat,interval);
}
6.创建XMLHttpRequest对象
function getHTTPObject(){
//检测浏览器是否存在XMLHttpRequest对象
if(typeof window.XMLHttpRequest === "undefined"){
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
return false;
}
}
return new XMLHttpRequest();
}
7.获取一个元素的样式
function getStyle(obj,target){
if(obj.currentStyle){
return obj.currentStyle[target];
} else {
return getComputedStyle(obj,null)[target];
}
}
8.基于html4+css2的完美运动框架
//获取元素样式
function getStyle(obj,target){
if(obj.currentStyle){
return obj.currentStyle[target];
} else {
return getComputedStyle(obj,null)[target];
}
} /**
obj:要操作的对象
json:格式如下
var json={
width:300,
height:300
}
fnEnd:回调函数
*/
function startMove(obj,json,fnEnd){
if(obj.timer){clearInterval(obj.timer);} obj.timer = setInterval(function(){
var bStop = true; //假设:所有的操作都执行完毕(测试所有属性都设置好的解决方案有很多,这里取其中一种比较巧的方式)
for(var v in json){
var attr = v;
var iTarget = json[v];
bStop = oper(obj,attr,iTarget,bStop);//执行缓冲运动
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){fnEnd();}
}
},30);
} function oper(obj,attr,iTarget,bStop){
var cur = 0;
if(attr === 'opacity'){
cur = Math.round(parseFloat(getStyle(obj,'opacity'))*100);
} else {
cur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-cur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur !== iTarget){
bStop = false; //没达到目标设置为否
if(attr === 'opacity'){
obj.style.opacity = parseFloat((cur + speed)/100);
obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';
} else {
obj.style[attr] = cur + speed + 'px';
}
} return bStop;
}
9 获取鼠标位置
function getPos(ev){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY};
}
10 添加绑定事件
/*不用加on,例如:onclick写成click即可*/
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
return;
}
if(obj.addEventListener){
obj.addEventListener(ev,fn,false);
return;
}
}
11 ajax调用方法
function ajax(url,succFn,failedFn){
//1.创建XMLHttpRequest对象
var oAjax = null;
if(window.ActiveXObject){
oAjax = new ActiveXObject('MicrosoftHTTP');
} else {
oAjax = new XMLHttpRequest();
} //2.连接服务器
oAjax.open('GET',url,true); //3.发送数据
oAjax.send(); //4.接收数据
oAjax.onreadystatechange = function(){
//解析完毕
if(oAjax.readyState === 4){
if(oAjax.status === 200){//状态码为200
succFn(oAjax.responseText);
} else {
if(failedFn){
failedFn(oAjax.status);//返回http状态码
}
}
}
}
}
11.javascript继承示例
function Drag(id){
var _this = this;
this.id = id;
this.disX = null;
this.disY = null;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function(ev){
_this.fnDown(ev); return false;//阻止浏览器默认事件
};
}; Drag.prototype.fnDown = function(ev){
var oEvent = ev||event;
var _this = this;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove = function(ev){
_this.fnMove(ev);
};
document.onmouseup = function(){
_this.fnUp();
};
} Drag.prototype.fnMove = function(ev){
var oEvent = ev||event;
this.oDiv.style.left = oEvent.clientX-this.disX + 'px';
this.oDiv.style.top = oEvent.clientY-this.disY + 'px';
} Drag.prototype.fnUp = function(){
document.onmousemove = null;
document.onmouseout = null;
} function LimitDrag(id){
Drag.call(this,id);//继承属性
} //继承方法
for(var v in Drag.prototype){
LimitDrag.prototype[v] = Drag.prototype[v];
} LimitDrag.prototype.fnMove = function(ev){//重写方法
var oEvent = ev||event;
var l = oEvent.clientX-this.disX;
var t = oEvent.clientY-this.disY; if(l<0){
l=0;
} else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) {
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
if(t<0){
t=0;
} else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
} this.oDiv.style.left = l + 'px';
this.oDiv.style.top = t + 'px'; }
javascript通用代码合集的更多相关文章
- 计算机视觉与模式识别代码合集第二版two
Topic Name Reference code Image Segmentation Segmentation by Minimum Code Length AY Yang, J. Wright, ...
- 计算机视觉与模式识别代码合集第二版three
计算机视觉与模式识别代码合集第二版three Topic Name Reference code Optical Flow Horn and Schunck's Optical Flow ...
- [ZZ] UIUC同学Jia-Bin Huang收集的计算机视觉代码合集
UIUC同学Jia-Bin Huang收集的计算机视觉代码合集 http://blog.sina.com.cn/s/blog_4a1853330100zwgm.htmlv UIUC的Jia-Bin H ...
- WooCommerce代码合集整理
本文整理了一些WooCommerce代码合集,方便查阅和使用,更是为了理清思路,提高自己.以下WooCommerce简称WC,代码放在主题的functions.php中即可. 修改首页和分类页面每页产 ...
- 【转载】GitHub 标星 1.2w+,超全 Python 常用代码合集,值得收藏!
本文转自逆袭的二胖,作者二胖 今天给大家介绍一个由一个国外小哥用好几年时间维护的 Python 代码合集.简单来说就是,这个程序员小哥在几年前开始保存自己写过的 Python 代码,同时把一些自己比较 ...
- git常用代码合集
git常用代码合集 1. Git init:初始化一个仓库 2. Git add 文件名称:添加文件到Git暂存区 3. Git commit -m “message”:将Git暂存区的代码提交到Gi ...
- JavaScript推荐资料合集(前端必看)
这份合集覆盖了所有的JavaScript基本知识,从基本网络编程技巧,如变量.函数和循环语句,到高级一些的专题,如表单验证.DOM操作.客户端对象.脚本程序调试.学习前端的你不容错过! 资料名称 下载 ...
- 常用的js代码合集
!function(util){ window.Utils = util(); }( function(){ //document_event_attributes var DEA = "d ...
- JavaScript常用API合集汇总(一)
今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...
随机推荐
- HTTP传输数据压缩
一.基础 1.HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少网络传 ...
- OGNL取Map,List,Set的值
用到的类有: 相应代码: public class Dog { private String name; public Dog(){ } public Dog(String name){ this.n ...
- Getway网关管理ZUUL
1.ZUUL微服务网关 微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService.ProductService.UserService...,为了让调用更简单,一般会在这些服 ...
- Java 正则表达式 中的 任意字符
原来正则表达式中的"."代表的是除换行以外的任意字符,如果要真正代表任意字符,需要把换行符也加进去,但是经过测试"[.\\n]"不生效,可以使用"\\ ...
- FocusBI: 微软商业智能教程目录介绍(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...
- [PY3]——Python的函数
Python函数总结图 1.调用 1.1 如何调用 1.1.1 函数名(传参) # 函数使用函数名来调用,函数名后紧跟一对小括号,小括号里传入函数定义时要求的参数 add(9,9) #9+9=18 ...
- vscode 安装插件,和相关配置
安装插件,配置对应的用户设置,进行替换,实现插件功能的生效 { // 控制是否在搜索中跟踪符号链接. "search.followSymlinks": false, "e ...
- [PHP] 从PHP 5.6.x 移植到 PHP 7.0.x不兼容点
1.错误和异常处理 1.1 set_exception_handler()函数申明的类型 function handler($e){ var_dump($e); } set_exception_han ...
- 用户登录注册(安全)(常规、FB、google、paypal) 实战
/* 用户登录界面 */elseif ($action == 'login'){ if($_SESSION['user_id']) { ecs_header("Lo ...
- [LeetCode]Generate Parentheses题解
Generate Parentheses: Given n pairs of parentheses, write a function to generate all combinations of ...