![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript工具方法封装
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
js封装背景颜色变换方法
背景色变换一、实现一、实现var bg = document.getElementsByClassName('bg')[0];var dg = 0, timer = null;function changeColor(clear){ timer = setInterval(function(){ if(dg < 360){ bg.style.background = "linear-gradient("+dg+"deg,rgb(255,1原创 2020-06-01 10:51:26 · 678 阅读 · 0 评论 -
js模封装仿重力场方法
重力场一、实现一、实现var timer;function gravity(dom){ clearInterval(dom.timer); var g = 10,//重力加速度 speedX = 5,//初速度 speedY = 10; dom.timer = setInterval(function(){ speedY +=g; var newTop = dom.offsetTop + speedY;//计算当前位置原创 2020-05-22 16:42:55 · 420 阅读 · 0 评论 -
js封装物体弹性运动方法
弹性运动一、实现一、实现var timer;function sprmove(dom,target){ clearInterval(timer); var a;//加速度 var speed = 0; var uf = 0.9;//摩擦系数 timer = setInterval(function (){ a = (target - dom.offsetLeft)/6; speed +=a; speed *=uf;原创 2020-05-21 22:40:50 · 408 阅读 · 0 评论 -
js封装物体加速运动方法
加速运动一、实现一、实现var timer;function speedup(dom){ clearInterval(timer); var a = 2;//加速度 var speed = 20; timer = setInterval(function(){ speed = speed + a; div.style.left = div.offsetLeft + speed + 'px'; },50)};...原创 2020-05-21 22:36:05 · 626 阅读 · 0 评论 -
js封装多物体多属性运动+回调执行方法
属性运动+回调执行一、执行一、执行var div1 = document.getElementsByTagName('div')[0];var div2 = document.getElementsByTagName('div')[1];div1.onclick = function(){ movetion(this,{width: 400,height: 400,opacity: 70,top: 300,left: 300},function(){ movetion(div2,{原创 2020-05-21 20:35:09 · 459 阅读 · 0 评论 -
js封装多物体运动方法
多物体运动一、实现一、实现var div = document.getElementsByTagName('div');for(var i = 0;i < div.length;i ++){ div[i].onmouseenter = function(){ cushion(this,800);//利用this,防止形成闭包 }; div[i].onmouseleave = function(){ cushion(this,100);原创 2020-05-21 11:39:38 · 396 阅读 · 0 评论 -
js封装物体透明度变换方法
物体透明度变换一、实现一、实现var div = document.getElementsByTagName('div')[0];var btn = document.getElementsByTagName('button')[0];btn.onclick = function(){ cushion(div,0.8)}function getStyle(dom,attr){ if(window.getComputedStyle){ return window.g原创 2020-05-21 11:32:15 · 443 阅读 · 0 评论 -
js封装物体缓冲运动方法
缓冲运动一、实现一、实现var timer;//起开关作用function cushion(dom,target){ clearInterval(timer);//防止多次点击 var speed; timer = setInterval(function(){ speed = (target - dom.offsetLeft)/7;//控制速度大小 speed = speed > 0 ? Math.ceil(speed) : Math.floor(s原创 2020-05-21 10:01:04 · 428 阅读 · 0 评论 -
js封装物体匀速运动方法
匀速运动一、实现一、实现var timer;//起开关作用function nuition(dom,target){//运动的元素,运动的距离 clearInterval(timer);//防止多次点击变成加速运动 var speed = target - dom.offsetLeft > 0 ? 7 : -7; //判断物体当前位置,决定运动方向 timer = setInterval(function(){ if(Math.abs(target原创 2020-05-20 22:09:18 · 515 阅读 · 0 评论 -
js封装获取节点class类名方法
getElementsByClassName一、方法封装一、方法封装Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(name){ var allDomArray = document.getElementsByTagName('*'); //获取所有标签名 var lastDomArray = []; //声明数组保存符合条件的类原创 2020-05-19 22:26:32 · 2471 阅读 · 0 评论 -
js求字符串字节长度方法封装
字符串字节长度一、求字符串字节一、求字符串字节var str = 'jg78*笑笑';//只有中文的Unicode编码大于255function getByteLength(str){ var count = 0; for(var i = 0;i < str.length;i ++){ if(str.charCodeAt(i) > 255){//charCodeAt返回参数Unicode编码 count +=2;//中文为2Byte }else{ count ++;原创 2020-05-11 16:10:24 · 1155 阅读 · 0 评论 -
js返回对象的类型方法封装
type方法封装,返回对象类型问题引出问题引出我们有时会遇到下面的问题:那么我们怎样准确判断一个对象的准确类型呢,特别是遇到类数组时,这里我们介绍三种常见方法:1.第一种: [ ].constructor / { }.constructor2.第二种:[ ] instanceof Array / { } instanceof ArrayA instanceof B,看A对象原型链上,有没有B的原型3.第三种:Object.prototype.toString.call([ ])原创 2020-05-11 10:37:09 · 2104 阅读 · 0 评论