常见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. EJS学习(二)之语法规则上

    标签含义 <% %> :'脚本' 标签,用于流程控制,无输出即直接使用JavaScript语言. <%= %>:转义输出数据到模板(输出是转义 HTML 标签)即在后端定义的变 ...

  2. 爬取YY评级信息

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @File : 爬取YY评级基本信息.py # @Author: lattesea # @Date : ...

  3. css复杂动画(animation属性)

    1.声明:@keyframes name{   }: 2.涉及到的属性 animation-name:动画名称 animation-duration:单次动画总时长 animation-timing- ...

  4. 【版本控制工具】 Git基础

    一.Git简介 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.于是Git 成了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件. (Git目前使用率非常 ...

  5. redis一键部署脚本

    1.新建一个名为 auto_install_redis.sh的文件 2.将下面脚本拷贝到文件中,具体步骤在注释里面 #环境 linux #一键安装redis,在linux环境中使用脚本运行该文件(sh ...

  6. linux命令详解——lsof

    lsof全名list opened files,也就是列举系统中已经被打开的文件.我们都知道,linux环境中,任何事物都是文件, 设备是文件,目录是文件,甚至sockets也是文件.所以,用好lso ...

  7. 谷歌对Intel 10nm进度不满

    Intel 在 10nm 处理器上的节奏可谓是“龟速”,一拖三年,且目前大规模发货的 10nm Ice Lake 处理器仅仅是移动平台低电压,桌面要到明年. 表面波澜不惊,实际上却暗流涌动. 首先是 ...

  8. oracle监听启动很慢

    TNS-12531: TNS:cannot allocate memory 首先查看内存,free -m 发现当前的空闲内存还有很多,那就不是内存不足的问题 想到之前重启过数据库服务器,查看主机名ho ...

  9. jvm中的新生代Eden和survivor区

    1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...

  10. cmd命令行显示中文乱码

    cmd命令行显示中文乱码多数是由于字符编码不匹配导致. 1.查看cmd编码方式 方法一.打开cmd,输入chcp命令回车(显示默认编码:活动代码页:936指GBK) 方法二.打开cmd在标题栏单击鼠标 ...