常见js函数收集:

转自:http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html

	//运动框架
function animate(obj,targetJson,time,callback){
if(window.navigator.userAgent.indexOf("MSIE") != -1){
var interval = 50;
}else{
var interval = 10;
}
//得到现在的状态当作信号量;这个信号量是所有要变化属性的集合;
var nowJson = {};//信号量对象;
//给信号量对象添加属性,添加什么属性,目标对象中有什么属性,这里就添加什么属性
//值就是当前的计算样式
for(var k in targetJson)
{
nowJson[k] = parseFloat(fetchComputedStyle(obj,k));
}
console.log(nowJson);
//我们思考一下,我们的动画是10毫秒执行一次,而用户让我们time毫秒执行完毕动画
//也就是说,总执行函数次数:
var maxcount = time/interval;
var count = 0;
//继续深入思考,动画总次数是maxcount次,那么每一次动画变化的步长就有了啊!
//所以我们现在要再来一个JSON,放置所有属性的步长
var stepJson = {};
for(var k in targetJson)
{ //捎带脚,把每个targetJSON中的值都去掉px
targetJson[k] = parseFloat(targetJson[k]);
stepJson[k] = (targetJson[k] - nowJson[k])/maxcount;
}
//至此,三个非常重要的JSON整理完毕。分别是:
//信号量JSON : nowJson
//终点JSON : targetJson
//步长JSON : stepJson
//这三个JSON所有的k都一样。
// console.log(semaphoreJson);
// console.log(targetJson);
// console.log(stepJson);
//总体思路就是nowJson每一帧都在变
var timer = null;
timer = setInterval(function (){
for(var k in targetJson)
{
nowJson[k] +=stepJson[k];
if(k!='opacity')
{
obj.style[k] = nowJson[k] + 'px';
}else{
obj.style[k] = nowJson[k];
obj.style.filter = "alpha(opacity=" + (nowJson[k] * 100) + ")";
}
}
//console.log(nowJson);
//计数器;
count++;
if(count == maxcount)
{
//次数够了,所以停表。
//这里抖一个小机灵,我们强行让obj跑到targetJSON那个位置
/*for(var k in targetJson)
{
if(k!='opacity'){
obj.style[k] =parseFloat( targetJson[k]) +'px';
}else{
obj.style[k] = targetJson[k];
obj.style.filter = "alpha(opacity=" + (targetJson[k] * 100) + ")";
}
}*/ //停表
clearInterval(timer);
callback&&callback(); //调用回调函数
}
},interval)
function fetchComputedStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
}
/*
说明:获得元素相应属性值;不能获取未定义属性值
@obj ----->元素本身
@attr ------>要获取元素的属性值的属性
*/
function getStyle(obj,attr){
return obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj)[attr];
}
/*
说明:抖函数;使一个元素上下左右抖动
@obj ---->元素本身
@attr ----->抖动方向("top"和"left")
@endFn---->回调函数(可有可无)
*/
function shake(obj,attr,endFn){
if (obj.onoff) {return};//加开关修复抖函数
obj.onoff=true;
var arr = [];
var num = 0;
var k=null;
for(var i=20;i>0;i-=2)
{
arr.push(i,-i);
}
arr.push(0)
clearInterval(shake.timer)
shake.timer=setInterval(function(){
obj.style[attr]=parseInt(getStyle(obj,attr))+arr[num]+"px";
num++
if (num==arr.length)
{
clearInterval(shake.timer)
obj.onoff = false;
endFn&&endFn();
}
},100)
}
/*
说明:传入一个数num,如果该数小于10,返回其前面加0的字符串,如果大于10则返回该数的字符串;
@num----->传入的数。
*/
function twoNum(num){
if(num<10)
{
return "0"+num;
}
else{
return ""+num;
}
}
/*
说明:传入x和y两数,返回在x-y之间的随机数;
*/
function getRandom(x,y){
return Math.round(Math.random()*(y-x)+x);
}
/*
说明:控制元素的透明度渐变效果
@obj------>要传入的元素
@dir------->透明度渐变的速度
@target----->透明度变化的目标
@endFn----->回调函数(可有可无);
*/
function Opacity(obj,dir,target,endFn){
if(target>100||target<0)
{
alert('输入范围不对');
return
}
dir=getStyle( obj, 'opacity')*100 < target?dir:-dir;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed = getStyle(obj,'opacity')*100+dir;
if(dir<0&&speed<target||dir>0&&speed>target)
{
speed=target;
}
obj.style.opacity=speed/100;
if(speed==target)
{
clearInterval(obj.timer);
endFn&&endFn();
}
},14)
}
/*
说明:数组去重函数;传入一个数组,返回去重过后的数组;
@arr----->需要去重的数组;
*/
function arrQc(arr){
for(var i=0;i<arr.length;i++)
{
for(var j=i+1;j<arr.length;j++)
{
if(arr[i]==arr[j])
{
arr.splice(j,1);
j--;
}
}
}
return arr;
}
/*
说明:获取元素的位置;
@obj------->要获取位置的元素;
*/
function getPos(obj){
var pos = {left:0,top:0} while(obj)
{
pos.left+= obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
/*
说明:通过类名获得元素;
@parent------->父级元素;
@TagName------->要通过类名获得的元素标签名;
@className------->类名;
*/
function getElementsByClassName(parent,TagName,className){
var oAll = parent.getElementsByTagName(TagName);
var arr=[];
for(var i=0;i<oAll.length;i++)
{
/*if(oAll[i].className=='div1')
{
arr.push(oAll[i]);
}*/
var arr1 = oAll[i].className.split(" ");
for(var j=0;j<arr1.length;j++)
{
if(arr1[j]==className)
{
arr.push(oAll[i]);
break;
}
}
}
return arr
}
/*
说明:为元素添加class
@obj------->要添加class的元素
@className--------->为元素添加的className;
*/
function addClass(obj,className){
var arr = obj.className.split(" ");
for(var i=0;i<arr.length;i++){
if(arr[i]==className)
{ alert('ok');
return
}
}
arr.push(className);
obj.className=arr.join(" ");
}
/*
说明:数组的indexOf()方法,找到数组中的元素,并返回该元素在数组中的位置;
@arr---->传入的数组
@v------>需在数组中返回位置的元素
*/
function arrIndexOf(arr,v){
for(var i=0;i<arr.length;i++)
{
if(arr[i]===v)
{
return i;
}
}
return -1;
}
/*
说明:删除元素class;
@obj------->要删除class的元素;
@className-------->要删除的class值;
*/
function removeClass (obj,className){
var arr1= obj.className.split(" ");
var _index = arrIndexOf(arr1,className);
if(_index != -1){
arr1.splice(_index,1);
obj.className=arr1.join(" ");
}
}
/*
说明:事件绑定的第二种方式,可以让一个元素的一个事件同时触发2个事件函数
@obj------>要绑定事件的元素
@evname-------->事件名称
@fn----------->事件函数
*/
function bind(obj,evname,fn){
obj.addEventListener?obj.addEventListener(evname,fn,false):obj.attachEvent('on'+evname,function(){
fn.call(obj);
})
}
/*
说明:拖曳函数
@obj-------->要拖曳的元素
*/
function drag (obj){
obj.onmousedown = function (ev){
var ev = ev || event;
//获取鼠标点击位置与元素的左右距离;
var disX = ev.clientX-obj.offsetLeft;
var disY = ev.clientY-obj.offsetTop;
if(obj.setCapture)
{
obj.setCapture();
}
document.onmousemove = function (ev)
{
var ev = ev || event;
var L = ev.clientX-disX;
var T = ev.clientY-disY;
/*if(L<100)//改变该值可以实现磁性吸附效果;
{
L = 0;
}else if(L>document.documentElement.clientWidth - oDiv.offsetWidth)
{
L = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(T<0)
{
T = 0;
}else if(T>document.documentElement.clientHeight - oDiv.offsetHeight)
{
T = document.documentElement.clientHeight- oDiv.offsetHeight;
}
oDiv.style.left = L+'px';
oDiv.style.top = T+'px';
//该段代码可限制拖曳范围;
*/
obj.style.left = L+'px';
obj.style.top = T+'px';
}
document.onmouseup = function (){
document.onmouseup =document.onmousemove = null;
if(obj.releaseCapture)
{
obj.releaseCapture();
}
}
return false;
}
} //得到cookie;
function getCookie(key){
var arr1 = document.cookie.split('; ');
for(var i = 0;i<arr1.length;i++)
{
var arr2 = arr1[i].split('=');
if(arr2[0]==key)
{
return decodeURI(arr2[1]);
}
}
}
//设置cookie;
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
oDate.toGMTString();
document.cookie = key+'='+encodeURI(value)+';expires='+oDate;
}
//删除cookie;
function removeCookie(key){
setCookie(key,'',-1);
}

  

js函数收集的更多相关文章

  1. 实用js函数收集

    1. 全选复选框: //复选框全选函数 function SelectAll() { var checkAll = document.getElementsByName("checkAll& ...

  2. 原生JS研究:学习jquery源码,收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  3. 3.3 js函数

    1.函数语法: 函数声明的方式:function 函数名(参数1,参数2-){//函数体;}函数调用:函数名(参数1,参数2-); 函数内不一定都指定返回值. 如果需要指定返回值,可用 return ...

  4. Js函数function基础理解

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...

  5. js函数表达式和函数声明的区别

    我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function ...

  6. 通用js函数集锦<来源于网络> 【二】

    通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...

  7. 通用js函数集锦<来源于网络/自己> 【一】

    通用js函数集锦<来源于网络/自己>[一] 1.返回一个全地址2.cookie3.验证用户浏览器是否是微信浏览器4.验证用户浏览器是否是微博内置浏览器5.query string6.验证用 ...

  8. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  9. Javascript常用方法函数收集(二)

    Javascript常用方法函数收集(二) 31.判断是否Touch屏幕 function isTouchScreen(){ return (('ontouchstart' in window) || ...

随机推荐

  1. docker中centos7安装ssh服务

    来源:https://blog.csdn.net/qq_32969313/article/details/64919735 docker安装好后,自己动手做个自己的docker镜像,首先需要从服务器p ...

  2. psutil:系统、进程,信息都在我的掌握之中

    获取cpu的逻辑数量 import psutil print(psutil.cpu_count()) # 12 获取CPU的物理核心数 import psutil print(psutil.cpu_c ...

  3. re:正则表达式,字符串处理的杀手锏

    介绍 正则表达式是一种用形式化语法描述的文本匹配模式,可以进行复杂的字符串匹配. Python中的正则表达式通过re模块提供,功能比Python内置的str更强,但是速度没有str提供的方法快. 因此 ...

  4. 模拟赛小结:2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018)

    比赛链接:传送门 两个半小时的时候横扫了铜.银区的所有题,签到成功混进金区.奈何后面没能开出新的题. 最后一个小时的时候xk灵机一动想出了D题的做法,讨论了一波感觉可行,赶紧去敲.结束前2分钟终于过了 ...

  5. 文件操作相关函数(POSIX 标准 open,read,write,lseek,close)

    POSIX标准 open函数属于Linux中系统IO,用于“打开”文件,代码打开一个文件意味着获得了这个文件的访问句柄. int fd = open(参数1,参数2,参数3): int fd = op ...

  6. tp5中的return

    return 可以输出对象,但是不可以输出数组 class Index { public function index(Student $student) { $data = $student-> ...

  7. React native 在mac下安裝 环境

    前言 春节回来上班第一天,配了mac ,然后在去年就有要弄mac 配置RN教程,好勒一上午,其中有遇到一些问题,都解决 了 当然你可以看官网的步骤啦 https://reactnative.cn/do ...

  8. mybatis之联表查询

    今天碰到了一个问题,就是要在三张表里面各取一部分数据然后组成一个list传到前台页面显示.但是并不想在后台做太多判断,(因为涉及到for循环)会拉慢运行速度.正好用的框架是spring+springM ...

  9. Java——静态代理、动态代理

    https://blog.csdn.net/giserstone/article/details/17199755 代理的作用:业务类只需要关注业务逻辑本身,保证了业务类的重用性 一 静态代理 特点: ...

  10. CSS 的伪元素是什么?

    CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...