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. }

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

  1. function getStyle(obj,str){
  2.  
  3. return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];
  4. }

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

  1. function stopBubble(e){
  2. if(e&&e.stopPropagation){
  3. e.stopPropagation();
  4. }else{
  5. window.event.cancelBubble = true;
  6. }
  7. }

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

stopBubble(e);就好了;

  1. function doMove(div,arr,dir,target,endfn){
  2. dir=parseInt(getStyle(div,arr))<target?dir:-dir;
  3. clearInterval(div.timer);
  4. div.timer=setInterval(function(){
  5. var speed =parseInt(getStyle(div,arr))+dir;
  6. if(speed>target&&dir>0||speed<target&&dir<0)
  7. {
  8. speed=target;
  9. }
  10. div.style[arr]=speed+"px";
  11. if(speed==target)
  12. {
  13. clearInterval(div.timer);
  14. endfn&&endfn();
  15. }
  16.  
  17. },30)
  18.  
  19. }

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

  1. function doShake(obj,max_length,att){
  2. function getStyle(obj,str){
  3. return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];//获取元素属性
  4. }
  5. var arr=[];
  6. var num=0;
  7. for(var i=max_length;i>=0;i--)
  8. {
  9. arr.push(i,-i)
  10. }
  11. arr.pop();//做一个数组如果max_length=5;数组就是[5,-5,4,-4,3,-3,2,-2,1,-1,0]
  12. clearInterval(obj.timer);//清楚定时器防止多次点击出现异常;
  13.  
  14. obj.timer=setInterval(function(){obj.style[att]=parseInt(getStyle(obj,att))+arr[num]+"px";//开定时器每个100毫秒改变元素的某个属性等于arr的第num项
  15. num++
  16. if(num==arr.length)
  17. {
  18. clearInterval(obj.timer);
  19. }//判断num等于arr.length停定时器
  20. },100) }

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

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

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

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

  2. js小函数工具

    突然想到建一片文章关于自己所学到的一些小函数,今后需要的时候可以直接当工具使用. 1.获取当前时间小程序. function showTime(){ var show_day=new Array('星 ...

  3. JS小函数

    join()\toString(): join()函数和toString()函数都是返回字符串类型. 针对一个数组: var arr = ["I","love" ...

  4. 一个模拟"显示桌面.scf"程序的JS小函数

    有时候我们或许有这样的一个需求,用JS模拟这样一个动作,同时按下组合快捷键:Windows旗帜键+D键,下面这个函数就可以帮到我们了. function f_ToggleDesktop() { var ...

  5. js 回调函数小例子

    js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...

  6. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  7. React.js 小书 Lesson25 - 实战分析:评论功能(四)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  8. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

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

    大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...

随机推荐

  1. 【译】RabbitMQ:Topics

    在前面的教程中,我们对日志系统进行了功能强化.我们使用direct类型的交换器并且为之提供了可以选择接收日志的能力,替换了只能傻乎乎的广播消息的fanout类型的交换器.尽管使用direct类型的交换 ...

  2. 16.10.16学到的JAVA知识

    1. 每个字节就是八位,所以每个字节的取值范围是  -128~127,它可以保存一个英文字符,包括字母,数字和英文标点.而汉字的的数量很多,一个字节没法把所有的汉字表达出来,所以汉字就是用两个字节来存 ...

  3. 清除oracle中的缓存(具体细节未知, 慎用)

    oracle中的缓存主要是指SGA中的:1.share pool2.database buffer cache清空命令如下:首先要登录到sqlplus命令下,输入如下命令即可:SQL> alte ...

  4. configparser配置文件操作

    configparser 模块用于对配置操作  官方文档地址https://docs.python.org/3/library/configparser.html 导入configparser模块 i ...

  5. hdu 5877 (dfs+树状数组) Weak Pair

    题目:这里 题意: 给出一个n个结点的树和一个数k,每个结点都有一个权值,问有多少对点(u,v)满足u是v的祖先结点且二者的权值之积小于等于k. 从根结点开始dfs,假设搜的的点的权值是v,我们需要的 ...

  6. WinForm用户自定义控件,在主窗体加载时出现闪烁;调用用户控件出现闪烁,需要鼠标才能够显示

    转载自:http://www.dotblogs.com.tw/rainmaker/archive/2012/02/22/69811.aspx 解决方案: 在调用用户控件的窗体里面添加一下代码: pro ...

  7. Java中四种引用:强、软、弱、虚引用

    这篇文章非常棒:http://alinazh.blog.51cto.com/5459270/1276173 Java中四种引用:强.软.弱.虚引用 1.1.强引用当我们使用new 这个关键字创建对象时 ...

  8. windows 8.1 下蓝屏报错:SYSTEM_SERVICE_EXCEPTION(NETIO.SYS)的解决办法

         大概2周前,电脑突然蓝屏了,我上网查了一下解决办法,因为大部分内容是英文的,所以我只大概看了下,看到这个问题好像是由于软件冲突造成的,于是就把小红伞去掉了,而那天电脑也真的没有再蓝屏(之前大 ...

  9. aa12

    option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: '模拟迁徙', subtex ...

  10. 也说说angularJs里的evalAsync

    虽说angular都快出2.0了,到了2.0这些东东都会被干掉.不过我们眼前的事还是要处理. $evalAsync和$timeout到底什么区别,网上说法很多,最近看到的是说在directive里就怎 ...