js常用效果代码封装

我们在工作中经常需要写很多效果或方法，但是有些效果和方法我们都已经写过无数次了，因此我们会把这些代码给封闭起来，以便以后使用，以下就是我个人在工作中整理出的一些常用代码，以后会不定期更新。

1、时间格式化

                Date.prototype.Format = function(format) { //对所有时间对象加上原型操作format ? format : format = "yyyy-MM-dd hh:mm:ss"; //不传则默认format(最后一个format可以删掉)var o = {//this并不在对象的内部函数,此时this指Date"M+": this.getMonth() + 1, // month"d+": this.getDate(), // day"h+": this.getHours(), // hour"m+": this.getMinutes(), // minute"s+": this.getSeconds(), // second"q+": Math.floor((this.getMonth() + 3) / 3), // quarter"S": this.getMilliseconds()// millisecond};//如果传入format里有y则对y用get的year进行替换if (/(y+)/.test(format)) {//根据传入的y数量截取get的Fullyear并替换掉所有的y,保留下中间的-:等符号format = format.replace(RegExp.$1, (this.getFullYear() + "").slice(4 - RegExp.$1.length));//如果就接一个参数,截到底,slice和substr,substring一样}//遍历剩下的m,h,s等for (var k in o) {//匹配mdh等,如果传入的format里有,则执行下面的替换if (new RegExp("(" + k + ")").test(format)) {//将传入的format的yyyy,MM,mm等替换为获得到mouth,date,hours//补了两个0,如果需要03这样的效果,根据3的长度为1,从003的第2个开始截到最后,即03;如果是33则从0033的第3个开始截取到最后,即33;//''+o[k]将数字转换成字符串然后可以.length计算其长度format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substring(("" + o[k]).length));}}return format; //返回规定格式的date时间};
//          var date = new Date() //创建时间对象
//          alert(date.Format('yyyy-MM-dd hh:mm:ss'))//字母必须大小写一致,空格-等符号无所谓,Mmd等可以根据需要不传(也就不显示了)
//      直接这样用: (new Date()).Format('yyyy-MM-dd hh:mm:ss')

2、ajax

function addUrl(url,type,obj){var arr = [];for(var i in obj){arr.push(i+"="+obj[i]);}if(type == "post"){return arr.join("&");}else{var path = url+"?"+arr.join("&");return path;}
}   function ajaxLogin(obj){obj.type = obj.type || "get";    //不传递时默认为getobj.data = obj.data || {};   //不传递时默认为空if(window.XMLHttpRequest){ajax = new XMLHttpRequest();}else{ajax = new ActiveXObject("Microsoft.XMLHTTP");}if(obj.type.toLowerCase() == "post"){ajax.open("POST",obj.url,true);ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var data = addUrl("任意值","post",obj.data);ajax.send(data);}else if(obj.type.toLowerCase() == "get"){//通过自行封装的函数，将url和data拼接成字符串路径var path = addUrl(obj.url,"get",obj.data);ajax.open("GET",path,true);ajax.send();}ajax.onreadystatechange = function() {if (ajax.readyState==4) { if (ajax.status>=200&&ajax.status<300||ajax.status==304) { if(obj.onsuccess){obj.onsuccess(ajax.responseText);}} else {if(obj.onerror){obj.onerror(ajax.status);}}} }}//使用方法// ajaxLogin({//  url:"login.php",//    type:"get",//     data:{//        user:user.value,//      pass:pass.value//   },//    onsuccess:function(data){//         alert(data);//  },//    onerror:function(data){//       alert("失败了，错误信息为："+data);//    }// });

3、onmousewheel

function MouseWheel(ele,fun){//判断浏览器类型var agent = window.navigator.userAgent;//判断是否是火狐浏览器if(agent.indexOf("Firefox")!=-1){ele.addEventListener("DOMMouseScroll",wheel);}else{ele.onmousewheel = wheel;}//创建一个处理向上向下滚动的函数 事件处理程序function wheel(ev){var down = false;if(ev.detail>0){down = true;}if(ev.wheelDelta < 0){down = true;}fun(down,ele,ev);return false;}
}

4、拖拽

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background: red;position: absolute;}</style></head><body><div></div></body><script type="text/javascript">var div = document.querySelector("div");//求出div的宽高var dw = div.offsetWidth, dh = div.offsetHeight;var maxWidth = document.documentElement.clientWidth - dw,maxHeight = document.documentElement.clientHeight - dh;//当鼠标按下时开始拖拽div.onmousedown = function(e){//获取鼠标按下时所在的位置var cx = e.clientX, cy = e.clientY;//求出鼠标距离元素边框的值var fx = cx - div.offsetLeft, fy = cy - div.offsetTop;//鼠标按下后监听鼠标移动document.documentElement.onmousemove = function(ev){//分别获取鼠标当前所在的位置var x = ev.clientX-fx,y = ev.clientY-fy;if (x>=maxWidth) {x = maxWidth;}if (x<=0) {x = 0;}if (y>=maxHeight) {y = maxHeight;}if (y<=0) {y = 0;}//指定元素的位置为鼠标位置div.style.left = x + 'px';div.style.top = y + 'px';}}//鼠标抬起时，删除鼠标移动事件document.documentElement.onmouseup = function(){document.documentElement.onmousemove = null;}</script>
</html>

5、Tab切换

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}#tabs{list-style: none;}#tabs li{float: left;width: 120px;height: 30px;border: 1px solid gray;text-align: center;line-height: 30px;}#content{clear: both;width: 364px;border: 1px solid gray;height: 300px;}#content div{height: 100%;text-align: center;line-height: 300px;display: none;}.active{background: red;}</style></head><body><div id="wrap"><ul id="tabs"><li>标签一</li><li>标签二</li><li>标签三</li></ul><div id="content"><div>我是标签一的内容</div><div>我是标签二的内容</div><div>我是标签三的内容</div></div></div></body><script type="text/javascript">var lis = document.querySelectorAll("#tabs>li");var divs = document.querySelectorAll("#content>div");var n = 0;for (var i = 0; i < lis.length; i++) {lis[i].index = i;lis[i].onclick = function(){var index = this.index;lis[n].className = '';divs[n].style.display = 'none';
//              var active = document.querySelectorAll(".active")[0];
//              if(active){
//                  var a  = active.index;
//                  lis[a].className = '';
//                  divs[a].style.display = 'none';
//              }divs[index].style.display = 'block';this.className = 'active';n = index;}}</script>
</html>

6、导航滚动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;position: relative;margin: auto;}ul{width: 600px;height: 50px;}li{width: 100px;display: inline-block;list-style: none;text-align: center;      }section{position: absolute;top: 30px;width: 100px;height: 3px;background: red;}section:before{content: "";position: absolute;width: 0px;height: 0px;margin-top: -10px;margin-left: 47px;border-bottom: 5px solid red;border-left: 5px solid white;border-right: 5px solid white;border-top: 5px solid white;}</style></head><body><div class="wrap"><ul><li>首页</li><li>项目</li><li>技术</li><li>首页</li><li>项目</li><li>首页</li></ul><section id="bot"></section></div><div class="wrap"><ul><li>首页</li><li>项目</li><li>技术</li><li>首页</li><li>项目</li><li>首页</li></ul><section id="bot"></section></div><div class="wrap"><ul><li>首页</li><li>项目</li><li>技术</li><li>首页</li><li>项目</li><li>首页</li></ul><section id="bot"></section></div><div class="wrap"><ul><li>首页</li><li>项目</li><li>技术</li><li>首页</li><li>项目</li><li>首页</li></ul><section id="bot"></section></div><div class="wrap"><ul><li>首页</li><li>项目</li><li>技术</li><li>首页</li><li>项目</li><li>首页</li></ul><section id="bot"></section></div></body><script src="js/tween.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var wraps = document.getElementsByClassName("wrap");          //得到wrap数组,for(var i=0;i<wraps.length;i++){                              //wrap下循环move(wraps[i]);}var timer;function move(wrap){                                          //wrap[i]中，再让li循环var ul = wrap.getElementsByTagName("ul");var list = ul[0].children;                                //得到wrap[i]下的li和sectionvar section = wrap.getElementsByTagName("section")[0];for (var i = 0; i < list.length; i++) {               //进行li循环list[i].index = i;list[i].onmouseover = function(){var index = this.index;clearInterval(timer);var a = index*list[0].offsetWidth;var b = section.offsetLeft;                    //2.初始位置var c = a - b;                                 //3.改变量var step = 30;                                 //4.步数var start = 0;                                 //1.初始步数变量var change = c/step;timer = setInterval(function(){                //section位移引入tween.js写法      start++;if(start>=step){clearInterval(timer);}section.style.left = Tween.Back.easeOut(start,b,c,step) + 'px';  //（1.初始步数变量,2.初始位置,3.改变量,4.步数）},30)//                      timer = setInterval(function(){                //section位移原始写法
//                          start++;
//                          var l = change + section.offsetLeft;
//                          if (start>=step) {
//                              l = a;
//                              clearInterval(timer);
//                          }
//                          section.style.left = l + 'px';
//                      },20)                   }}}</script>
</html>

7、json数据读取

<!DOCTYPE html>
<html><head><title></title></head><body></body><script type="text/javascript">var obj = {name: "1",value: "1",sub: [{name: "1-1",value: "2"}, {name: "1-2",value: "2",sub: [{name: "2-1",value: "2",sub: [{name: "2-1-1",value: "2"}, {name: "2-1-2",value: "2"}]}, {name: "2-2",value: "2"}]}]}test(obj.sub);function test(arr){for(var i=0;i<arr.length;i++){if(arr[i].sub && arr[i].sub.length>0){test(arr[i].sub);}else{alert(arr[i].name)}}}</script>
</html>

8、瀑布流

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"/>window.οnlοad=function(){waterfall('main','pin');var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};window.οnscrοll=function(){if(checkscrollside()){var oParent = document.getElementById('main');// 父级对象for(var i=0;i<dataInt.data.length;i++){var oPin=document.createElement('div'); //添加 元素节点oPin.className='pin';                   //添加 类名 name属性oParent.appendChild(oPin);              //添加 子节点var oBox=document.createElement('div');oBox.className='box';oPin.appendChild(oBox);var oImg=document.createElement('img');oImg.src='./images/'+dataInt.data[i].src;oBox.appendChild(oImg);}waterfall('main','pin');};}
}/*parend 父级idpin 元素id
*/
function waterfall(parent,pin){var oParent=document.getElementById(parent);// 父级对象var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPinvar iPinW=aPin[0].offsetWidth;// 一个块框pin的宽var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距var pinHArr=[];//用于存储 每列中的所有块框相加的高度。for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素var pinH=aPin[i].offsetHeight;if(i<num){pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr}else{var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minHvar minHIndex=getminHIndex(pinHArr,minH);aPin[i].style.position='absolute';//设置绝对位移aPin[i].style.top=minH+'px';aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';//数组 最小高元素的高 + 添加上的aPin[i]块框高pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高}}
}/*****通过父级和子元素的class类 获取该同类子元素的数组*/
function getClassObj(parent,className){var obj=parent.getElementsByTagName('*');//获取 父级的所有子集var pinS=[];//创建一个数组 用于收集子元素for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组if (obj[i].className==className){pinS.push(obj[i]);}};return pinS;
}
/*****获取 pin高度 最小值的索引index*/
function getminHIndex(arr,minH){for(var i in arr){if(arr[i]==minH){return i;}}
}function checkscrollside(){var oParent=document.getElementById('main');var aPin=getClassObj(oParent,'pin');var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性var documentH=document.documentElement.clientHeight;//页面高度return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
</script><title></title>
<style type="text/css">*{padding: 0;margin:0;}#main{position: relative;}.pin{padding: 15px 0 0 15px;float:left;}.box{padding: 10px;border:1px solid #ccc;box-shadow: 0 0 6px #ccc;border-radius: 5px;}.box img{width:162px;height:auto;}
</style>
</head>
<body>
<div id="main"><div class="pin"><div class="box"><img src="./images/1.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/2.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/3.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/4.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/5.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/6.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/7.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/8.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/9.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/10.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/11.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/12.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/13.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/14.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/15.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/16.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/17.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/18.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/19.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/20.jpg"/></div></div><div class="pin"><div class="box"><img src="./images/21.jpg"/></div></div>
</div>
</body>
</html>

js常用效果代码封装相关推荐

uni-app H5兼容ios问题+微信扫一扫、微信支付等常用api代码封装
最近公司需要用uni开发一个项目,项目中遇到的问题记录一下,方便下次不采坑场景: 使用wx自带sdk完成,扫一扫.微信登录.微信支付引用方式: // index.html引入 &l ...
Flutter - 一个fultter练习项目(仿写微信UI、实现一些常用效果、封装通用组件和工具类)
demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新,请前往github查看最新代码 pwd:123456 代码不定期更新注:Flut ...
【酷炫雪花飞舞特效】（HTML+JS+CSS+效果+代码）
效果如下其中红色的"线条精灵"所实现的是根据鼠标的移动轨迹,可以"滚动追随".整体的效果还是十分酷炫的,大家可以自己去尝试一下哦! 代码 index.html ...
JS 伸缩效果代码 (上下伸缩)
代码 function toMinBox(obj) { var speed = 10; function strechH() { var h = obj.offsetHeight; if (h - s ...
JS常用脚本+html代码大全+对联广告代码效果大全
JS常用脚本 1. on_contextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border on_co ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
php和jquery ui弹出框,JavaScript_jQuery弹出框代码封装DialogHelper，看了jQueryUI Dialog的例子，效果 - phpStudy...
jQuery弹出框代码封装DialogHelper 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的Dialog ...
js常用插件(九)之移动端翻书效果turn.js
js常用插件之turn.js-modernizr翻书效果欢迎点击: 个人官网博客首先引入必要的三个文件 <link rel="stylesheet" href=" ...
JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

js常用效果代码封装

js常用效果代码封装相关推荐

最新文章

热门文章