2016-08-09 200多个js技巧代码(Down) word下载 200多个js技巧代码 目录 1.文本框焦点问题... 6 2.网页按钮的特殊颜色... 6 3.鼠标移入移出时颜色变化... 6 4.平面按钮... 6 5.按钮颜色变化... 6 6.平面输入框... 7 7.使窗口变成指定的大小... 7 8.使文字上下滚动... 7 9.状态栏显示该页状态... 7 10.可以点击文字实现radio选项的选定... 7 11.可以在文字域的font写onclick事件... 7 12…

鱼头总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章. 生成随机UID const genUid = () => {  var length = 20  var soupLength = genUid.soup_.length  var id = []  for (var i = 0; i < length; i++) {    id[i] = genUid.soup_.charAt(Math.random() * soupLength)  }  r…

目录 1. 类型检查小工具 2. 检查是否为空 3. 获取列表最后一项 4. 带有范围的随机数生成器 5. 随机 ID 生成器 6. 创建一个范围内的数字 7. 格式化 JSON 字符串,stringify 任何内容 8. 顺序执行 promise 9. 轮询数据 10. 等待所有 promise 完成 11. 交换数组值的位置 12. 条件对象键 13. 使用变量作为对象键 14. 检查对象里的键 15. 删除数组重复项 16. 在 ArrayforEach 中执行"break"和&…

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开…

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开…

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开…

各种业务开发都离不开对数据的处理,然而遇到的很多数据都是不好处理的.这个时候就需要寻求搜索引擎的帮助.这种方法效率是非常低下的,而且根据作者的个性不能保证其对自己的口味.因此这篇文字包含了一份 JS 常用业务函数手册,例如时间格式的处理.用的是哪个手机浏览器,手机号.邮箱的验证,以此来提高你的开发效率 常用 JS 函数 1.时间格式化 界面展示的时间千变万化, 所以一个处理时间的函数,它的重要性就不言而喻了. export function formatDate (oldDate, fmt) {…

如题: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头:  成长速度为10显示2个箭头:  成长速度为12显示3个箭头:  成长速度为15显示4个箭头:  其他都显示都显示0各箭头.  用代码怎么实现? 差一点的用if else: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step == 12){ add_leve…

就如其他的编程语言一样,JavaScript也具有许多技巧来完成简单和困难的任务. 一些技巧已广为人知,而有一些技巧也会让你耳目一新. 让我们来看看今天可以开始使用的七个JavaScript技巧吧! 数组去重 使用ES6全新的数据结构即可简单实现. var j = [...new Set([1, 2, 3, 3])] 输出: [1, 2, 3] Set的详细用法可以查看ES6入门 数组和布尔值 当数组需要快速过滤掉一些为false的值(0,undefined,false等)使,一般是这样写: m…

今天在reivew部门牙套姐MM的代码的时候,有点小心得,给大家分享.我们常常说到,“学以致用”,但我发现自己却很少能真正做到.<javascript高级程序设计>即大家常说的“红宝书”,我也经常看,可是一些技巧还是要在实战中总结出来的.就比如今天将的这个~不起眼的一元运算符,学名“按位非”,在书的第三章中也有详细的介绍: ~:按位非操作符由一个波浪线(~)表示,执行按位非的结果就是返回数值的反码. var num1 = 3; // 我的幸运数字是3 var num2 = ~(num1); c…

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失…

1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: ? 1 2 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:apple,peaches,oranges,mangoes 其中,valueOf()方法会将Javascr…

具体到实际应用中,this的指向又可以分为以下四种: 作为对象的方法调用 作为普通函数调用 构造器调用 apply和call调用 接下来我们去剖析前3点,至于第4点的apply和call调用,会在call和apply部分详细讲解. 1.作为对象的方法调用 说明:作为对象方法调用时,this指向该对象.举例: //1.作为对象的方法调用 //作为对象方法调用时,this指向该对象. var obj = { a: , getA: function { console.log(this === obj…

近一周在忙着面试,本月第一次更博,甚是想念. 基本上大公司都会要求一些算法或者数据结构类的东西,这方面自己还不是很精通,只能一步一个脚印来积累了. 1.查询字符串获取对象数据,可自行根据需求选择格式,次数以key:value的格式生成 // 这里可以使用正则匹配,但仔细向后,字符串的一些基本方法完全可以解决问题 var str = 'www.test.com/test?str1=aa&str2=bb&str3=cc'; function queryStr (str) { var targe…

from:https://www.infoq.cn/article/eSYzcMZK4PkOzZC_68fv 在这篇文章中,作者将分享 12 个非常有用的 JavaScript 技巧,可以帮助你写出简洁且高性能的代码. 1. 过滤唯一值 ES6 引入了 Set 对象和延展(spread)语法-,我们可以用它们来创建一个只包含唯一值的数组. 复制代码 const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array…

1. 过滤唯一值 ES6 引入了 Set 对象和延展(spread)语法…,我们可以用它们来创建一个只包含唯一值的数组. 复制代码     const array = [1, 1, 2, 3, 5, 5, 1]   const uniqueArray = [...new Set(array)];   console.log(uniqueArray); // Result: [1, 2, 3, 5] 在 ES6 之前,获得同样的数组需要更多的代码! 这个技巧可以支持包含原始类型的数组:undef…

1.js 中  NaN === NaN  值为false; 2.parseInt("abc") === NaN;(不是数字) 3.tab 纯js 实现.可以给当前循环的元素添加.index 属性.当前序号. 4.操作元素时,不要混合操作 style 或者className,交替操纵容易出现费预知情况,因为js 操作改变的是行内样式,优先级高. 5.对象操作属性 可以用点操作符号  ,也可以用中括号操作. obj.name  === obj['name']; 数组和对象中括号 区别是,对…

作者:72妃 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 docume…

JS进阶 说起这个应该算是老生常谈了吧.所谓的高级,其实就是讲了一些我们平常用不到(或许用了不知道),但是非常实在的东西.算是熟练掌握js的一个必经road吧. 检测函数类型 其实检测函数的类型应该算是js的一个痛点,因为js是一门弱类型的语言,对类型的检测不是那么看重.但随着JS的发展,类型变得更加丰富.而检测类型的复杂度,也变得复杂了~ (MD). 大致梳理一下吧.如果你想检测值类型(Number,String,Boolean,undefined,null,Symbol). 使用typeof…

插件解析 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想和分享知识提供更专业的工具. 您可以使用 Cmd Markdown: Placeholdem插件 wow.min.js插件 撰写发布技术文稿(代码支持) 撰写发布学术论文(LaTeX 公式支持) 1. Placeholdem插件解析 1.1 功能说明 Placeholdem is a JavaScript plugin that ani…

3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var collection;     var closeB=false;     function floaters() {     this.items = [];     this.addItem = function(id,x,y,content)     {     document.write('<DI…

广告JS代码效果大全 1.[普通效果]     现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面就是实现效果所需代码: var delta=0.015 var collection;     function floaters() {     this.items = [];     this.addItem = function(…

1. 禁止复制(copy),禁用鼠标右键! <SCRIPT> //加入页面保护 function rf() {return false; } document.oncontextmenu = rf function keydown() {if(event.ctrlKey ==true || event.keyCode ==93 || event.shiftKey ==true){return false;} } document.onkeydown =keydown function drag…

JS代码判断集锦(之二) <INPUT TYPE="button" value="登录"  tabindex="4"> <INPUT TYPE="button" value="注册"  tabindex="4"> ////////////////////////////////////////////// function trim(inputstr) //去处空…

JS代码判断集锦(之一) ~~~~~~~~~~~~~~~~~~ <script language="JavaScript"> function checkid(iden,year,month,day){ if (iden.value.length==15) { if ((iden.value.lastIndexOf(month.value+day.value))==8) { return true; } return false; } if (iden.value.leng…

弹窗代码汇总 [0.超完美弹窗代码] 功能:5小时弹一次+背后弹出+自动适应不同分辩率+准全屏显示 代码: <script> function openwin(){ window.open(http://www.6882.com,"pop1","width="+(window.screen.width-15)+",height="+(window.screen.height-170)+",left=0,top=0,toolb…

JavaScript[对象.属性]集锦 SCRIPT 标记 用于包含javascript代码. 语法 属性 LANGUAGE 定义脚本语言 SRC 定义一个URL用以指定以.JS结尾的文件 windows对象 每个HTML文档的顶层对象. 属性 frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放. feames.length 子桢个数. self 当前窗口. parent 父窗口(当前窗口是中一个子窗口). top 顶层窗口(是所有可见窗口的父窗口). status 浏览器状态窗口…

//设置光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange();   rang.setEndPoint("StartToStart",textbox.createTextRange()) control.focus(); return rang.text.length; } fu…

//删除数组索引方法01 del (index) { this.arr.splice(index ,1); } //删除数组索引方法01 del (index) { this.$delete(this.arr, index); } //获取输入框内容 <input type="text" v-model="message" @focus="$event.target.select()"> //子向父传递参数 this.$emit('h…

问题1:以下代码在浏览器控制台上会打印什么? var a = 10; function foo() { console.log(a); // ?? var a = 20; } foo(); 问题2:如果我们使用 let 或 const 代替 var,输出是否相同 var a = 10; function foo() { console.log(a); // ?? let a = 20; } foo(); 问题3:"newArray"中有哪些元素? var array = []; for…