几个非常有用的js小函数


 1 function $(v){
2 if(typeof v==="function"){
3 window.onload=v;
4 }else if(typeof v==="string")
5 {
6 return document.getElementById(v);
7 }else if(v==="object")
8 {
9 return v;
10 }
11 }
12

这个小函数模拟jQuery中的$函数做了一些非常简单的事情。用来获取id,模拟window.onload等等;

  function getStyle(obj,str){

return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];
}

用来获取元素的属性,有几个限制,1.不能获取未设定的属性,属性中不能有多余的空格;


function stopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
}

事件冒泡绝对是比较头疼的问题了用上面这个函数吧;把函数导入到你的页面中。然后在你不要执行某操作的的事件里面加个变量e,在底下写上一句

stopBubble(e);就好了;


  function doMove(div,arr,dir,target,endfn){
dir=parseInt(getStyle(div,arr))<target?dir:-dir;
clearInterval(div.timer);
div.timer=setInterval(function(){
var speed =parseInt(getStyle(div,arr))+dir;
if(speed>target&&dir>0||speed<target&&dir<0)
{
speed=target;
}
div.style[arr]=speed+"px";
if(speed==target)
{
clearInterval(div.timer);
endfn&&endfn();
}

},30)

}

这个小函数需要配合上面的getStyle一起使用,作用是对某个对象进行移动。变量分别是,div是要移动的对象,arr是要移动的属性(如left,top等等(但是因为getStyle只能获取定义的属性,所以一定要在css里面定义哦))dir是速度(不用考虑正负),target是你要到达的位置



function doShake(obj,max_length,att){
function getStyle(obj,str){
return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];//获取元素属性
}
var arr=[];
var num=0;
for(var i=max_length;i>=0;i--)
{
arr.push(i,-i)
}
arr.pop();//做一个数组如果max_length=5;数组就是[5,-5,4,-4,3,-3,2,-2,1,-1,0]
clearInterval(obj.timer);//清楚定时器防止多次点击出现异常;

obj.timer=setInterval(function(){obj.style[att]=parseInt(getStyle(obj,att))+arr[num]+"px";//开定时器每个100毫秒改变元素的某个属性等于arr的第num项
num++
if(num==arr.length)
{
clearInterval(obj.timer);
}//判断num等于arr.length停定时器
},100) }

抖动小函数,用来让一个对象轻轻的抖动,max_length是抖动的峰值,att是你想让那个属性抖动,统一配合getStyle使用;一点点问题,/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作,对象就回不到原来的位置。求大神;*/

时间: 2024-11-05 16:31:37

几个非常有用的js小函数的相关文章

js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)

本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座

js小函数

前言 对于项目中常用的一些函数总结. note 阻止F5刷新 $(document).keydown(function(e){ var ev = window.event || e; var code = ev.keyCode || ev.which; if (e.keyCode == 116){ ev.keyCode ? ev.keyCode = 0 : ev.which = 0; cancelBubble = true; return false; } }) Enter键登录 $(docum

根据生日的月份和日期,一行代码计算星座的js小函数(转)

看到了别人写的一个计算星座的js,冗长的有点儿看不过去,就自己写个了.我想,这个函数应该足够精简了:)什么 if 啊 switch 啊 for 啊 通通滚蛋了--传入参数:month [int] 1-12;  day [int] 1-31. // 根据生日的月份和日期,计算星座. http://blog.csdn.net/cuixiping/ function getAstro(month,day){        var s="魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";

React.js小书总结

(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成了我们的页面. react.js 不是一个框架,它只是一个库.它只提供 UI (view)层面的解决方案.在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux.React-router 等来协助提供完整的解决方法. 组件化可以帮助我们解决前端结构的复用性问题,整个页面可以

JS_ECMA基本语法中的几种封装的小函数-2

大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.lastIndexOf('e'):找最后一个e出现的位置;找不到返回-1; str.toUpperCase();转大写 str.toLowerCase();转小写 str.substring(起

JS小插件之2——cycle元素轮播

元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> cycle demo </titl

JS_ECMA基本语法中的几种封装的小函数

先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.lastIndexOf('e'):找最后一个e出现的位置;找不到返回-1; str.toUpperCase();转大写 str.toLowerCase();转小写 str.substring(起始位置,结束位置):字符串截取; str.split('切割的方式');字符串切割;字符串转数组;数组方法:删除

写个js小工具自动生成博文目录

我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下: 下面来介绍一下这个小工具的实现. 一.

Js slice函数整理

今天做项目的时候碰到了,随手整理一下备用. ----slice 把元素从数组中筛选出来的函数,slice(开始位置,结束位置) --------------------------一下摘自W3C-------------------------------- start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end 可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数