常见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. O003、准备 KVM 实验环境

    参考https://www.cnblogs.com/CloudMan6/p/5240770.html   KVM 是 OpenStack 使用的最广泛的Hypervisor,本节介绍如何搭建 KVM  ...

  2. 10 Scrapy框架持久化存储

    一.基于终端指令的持久化存储 保证parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 执行输出指定格式进行存储:将爬取到的 ...

  3. vue高亮一级、二级导航

    使用vue开发过程中有的项目会存在多级导航的情况,如下图,这种就存在了两层,那么该如何高亮一级导航,又该如何高亮二级导航这就是今天我要记录的内容. 1.高亮一级导航很简单,代码如下: // 点击一级导 ...

  4. fiddler抓包小技巧之自动保存抓包数据(可根据需求过滤)

    首先 选择 如果有别的提示的话,你就按着提示走,就会安装一个编辑器,叫Fiddler Script. 正常情况下,你按着上面操作之后就会出现如下界面: 完事了之后,按下Ctrl+F来查找OnBefor ...

  5. Django 数据库模块 单独使用

    pip install django pip install psycopg2 pip install mysqlclient Entity.py from django.db import mode ...

  6. Dubbo 03 Restful风格的API

    目录 Dubbo03 restful风格的API 根路径 协议 版本 用HTTP协议里的动词来实现资源的增删改查 用例 swagger(丝袜哥) OpenAPI 资源 编写API文档 整合Spring ...

  7. Python基础:元组

    元组(tuple)特点: 1.元组是以圆括号“()”包围的数据集合,不同成员以“,”分隔.通过下标进行访问 2.不可变序列,可以看做不可变的列表,与列表不同:元组中数据一旦确立就不能改变(所以没有类似 ...

  8. 模拟赛小结:2017 China Collegiate Programming Contest Final (CCPC-Final 2017)

    比赛链接:传送门 前期大顺风,2:30金区中游.后期开题乏力,掉到银尾.4:59绝杀I,但罚时太高卡在银首. Problem A - Dogs and Cages 00:09:45 (+) Solve ...

  9. 08ServletContext

    1. 概念 代表整个web应用,可以和程序的容器(服务器)来通信 2. 获取 1. 通过request对象获取 request.getServletContext();2. 通过HttpServlet ...

  10. mysql向表中某字段前后追加一段字符串 concat(), trim(), ltrim(), rtrim(), repeat()

    1.mysql向表中某字段后面追加一段字符串:update table_name set field=CONCAT(field, '分隔符', str);//'分隔符',可以为空,也可以省略updat ...