几个非常有用的js小函数
- function $(v){
- if(typeof v==="function"){
- window.onload=v;
- }else if(typeof v==="string")
- {
- return document.getElementById(v);
- }else if(v==="object")
- {
- return v;
- }
- }
这个小函数模拟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使用;一点点问题,/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作,对象就回不到原来的位置。求大神;*/
几个非常有用的js小函数的更多相关文章
- js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)
本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座
- js小函数工具
突然想到建一片文章关于自己所学到的一些小函数,今后需要的时候可以直接当工具使用. 1.获取当前时间小程序. function showTime(){ var show_day=new Array('星 ...
- JS小函数
join()\toString(): join()函数和toString()函数都是返回字符串类型. 针对一个数组: var arr = ["I","love" ...
- 一个模拟"显示桌面.scf"程序的JS小函数
有时候我们或许有这样的一个需求,用JS模拟这样一个动作,同时按下组合快捷键:Windows旗帜键+D键,下面这个函数就可以帮到我们了. function f_ToggleDesktop() { var ...
- js 回调函数小例子
js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson25 - 实战分析:评论功能(四)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- JS_ECMA基本语法中的几种封装的小函数-2
大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...
随机推荐
- 【译】RabbitMQ:Topics
在前面的教程中,我们对日志系统进行了功能强化.我们使用direct类型的交换器并且为之提供了可以选择接收日志的能力,替换了只能傻乎乎的广播消息的fanout类型的交换器.尽管使用direct类型的交换 ...
- 16.10.16学到的JAVA知识
1. 每个字节就是八位,所以每个字节的取值范围是 -128~127,它可以保存一个英文字符,包括字母,数字和英文标点.而汉字的的数量很多,一个字节没法把所有的汉字表达出来,所以汉字就是用两个字节来存 ...
- 清除oracle中的缓存(具体细节未知, 慎用)
oracle中的缓存主要是指SGA中的:1.share pool2.database buffer cache清空命令如下:首先要登录到sqlplus命令下,输入如下命令即可:SQL> alte ...
- configparser配置文件操作
configparser 模块用于对配置操作 官方文档地址https://docs.python.org/3/library/configparser.html 导入configparser模块 i ...
- hdu 5877 (dfs+树状数组) Weak Pair
题目:这里 题意: 给出一个n个结点的树和一个数k,每个结点都有一个权值,问有多少对点(u,v)满足u是v的祖先结点且二者的权值之积小于等于k. 从根结点开始dfs,假设搜的的点的权值是v,我们需要的 ...
- WinForm用户自定义控件,在主窗体加载时出现闪烁;调用用户控件出现闪烁,需要鼠标才能够显示
转载自:http://www.dotblogs.com.tw/rainmaker/archive/2012/02/22/69811.aspx 解决方案: 在调用用户控件的窗体里面添加一下代码: pro ...
- Java中四种引用:强、软、弱、虚引用
这篇文章非常棒:http://alinazh.blog.51cto.com/5459270/1276173 Java中四种引用:强.软.弱.虚引用 1.1.强引用当我们使用new 这个关键字创建对象时 ...
- windows 8.1 下蓝屏报错:SYSTEM_SERVICE_EXCEPTION(NETIO.SYS)的解决办法
大概2周前,电脑突然蓝屏了,我上网查了一下解决办法,因为大部分内容是英文的,所以我只大概看了下,看到这个问题好像是由于软件冲突造成的,于是就把小红伞去掉了,而那天电脑也真的没有再蓝屏(之前大 ...
- aa12
option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: '模拟迁徙', subtex ...
- 也说说angularJs里的evalAsync
虽说angular都快出2.0了,到了2.0这些东东都会被干掉.不过我们眼前的事还是要处理. $evalAsync和$timeout到底什么区别,网上说法很多,最近看到的是说在directive里就怎 ...