JS
fifthThirteen
前端菜鸟
展开
-
i++ 与 ++i 的区别
1、首先,单独拿出来说++i和i++,意思都是一样的,就是i=i+1。2、如果当做运算符来说,就是a=i++或者a=++i这样的形式。情况就不一样了。先说a=i++,这个运算的意思是先把i的值赋予a,然后在执行i=i+1;而a=++i,这个的意思是先执行i=i+1,然后在把i的值赋予a;举个例子来说,如果一开始i=4。那么执行a=i++这条语句之后,a=4,i=5;转载 2017-12-09 19:50:28 · 127 阅读 · 0 评论 -
简单说 JavaScript实现雪花飘落效果
说明这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。效果图解释setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。var timerId = setTimeout(func|code, delay)上面代码中...转载 2018-03-20 19:37:41 · 425 阅读 · 0 评论 -
常用js/jquery代码片段(学习更新)
1.吸顶条$(window).on("scroll", function () { var oHeight = $(".fill-box").offset().top; var dTop = $(window).scrollTop(); if (dTop >= oHeight) { ...原创 2018-04-04 13:13:49 · 152 阅读 · 0 评论 -
javascript&&jquery编写插件模板
javascrpt插件编写模板这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理;(function(window,document){ function FnName(options) { //变量定义区 var name = "foo"; //默认参数 var defaults = { ...转载 2018-04-04 13:16:48 · 223 阅读 · 0 评论 -
用ngnix反向代理解决ajax跨域问题
配置: location / { root html; index index.html index.htm; add_header 'Access-Control-Allow-Origin' *; } location /apis { rewrite ^.+a...原创 2018-04-12 17:31:33 · 288 阅读 · 0 评论 -
js对手机软键盘的监听
js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起。比如输入框是否获取焦点等。focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。1234567$(document).on('focus...转载 2018-05-18 11:30:21 · 1289 阅读 · 0 评论 -
常用正则表达式
一、校验数字的表达式1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$8 正数、负数、和小...转载 2018-05-16 09:51:29 · 227 阅读 · 0 评论 -
带参数的函数作为另一个函数的参数
1. 第一种写法 is_orEnglishCharacter = function is_orEnglishCharacter(num) { regex = /^[A-Za-z_]+$/; return regex.test(num); } /** * [checkInput 校验表单] * @param {[type]} elementId [元素ID带#] * @...原创 2018-06-04 09:53:11 · 657 阅读 · 0 评论 -
oninput 正则,只能输入正数
oninput="this.value=this.value.replace(/[^\d.]/g,'')"原创 2018-05-31 19:26:40 · 11341 阅读 · 4 评论 -
上传压缩图片,并转回file对象
* [imgToBase64 压缩图片] * @param {[type]} file [file对象 event.target.files[0]] * @param {[type]} maxWidth [最大宽度] * @param {[type]} maxHeight [最大高度] * @param {[type]} cal...原创 2018-06-07 17:06:14 · 1035 阅读 · 0 评论 -
ajax 上传文件获取进度条
原生JSvar xhr = new XMLHttpRequest(); xhr.open('POST', 'url'); // 上传完成后的回调函数 xhr.onreadystatechange = function() { if (xhr.status === 200) { console.log(xhr.responseTex...原创 2018-06-08 09:29:41 · 675 阅读 · 0 评论 -
游览器user agent 及手机UserAgent库查询工具
火狐浏览器:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0IE浏览器:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5....原创 2018-06-19 12:54:35 · 7495 阅读 · 0 评论 -
正则替换
oninput="this.value=this.value.replace(/[^\d +]/g,'')" 只能输入数字空格和+号,其余不能被键入,会被替换掉oninput="this.value=this.value.replace(/[^\d.]/g,'')" 只能输入数字和.号...原创 2018-06-19 17:23:10 · 189 阅读 · 0 评论 -
javaScript 基础学习篇 之 Array对象
1.静态方法1.1 Array.isArray()Array.isArray方法返回一个布尔值,表示参数是否为数组。它可以弥补typeof运算符的不足。var arr = [1, 2, 3];typeof arr // "object"Array.isArray(arr) // true上面代码中,typeof运算符只能显示数组的类型是Object,而Array.isAr...原创 2018-10-12 10:05:27 · 103 阅读 · 0 评论 -
js获取游览器和屏幕的各种宽度高度
1.游览器窗口可视区域大小,网页可见区域宽高,不包括工具栏和滚动条// IE9+,chrome,firefox,opera,safariwindow.innerHeight // 游览器矿口的内部高度window.innerWidth // 游览器窗口的内部宽度// ie8 ie7 ie6 ie5document.documentElement.clientHeight // 表示...原创 2018-10-30 17:03:29 · 323 阅读 · 0 评论 -
转 js 实现纯前端将数据导出excel的3种方式
由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,参考了好多资料以及很多大佬写的博客终于实现,兼容chrome没问题,其他还没有测试过,这边介绍两种实现方式,并附上代码和gif动图,博主不才还望轻喷方法一将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文...转载 2019-06-18 12:16:31 · 2743 阅读 · 1 评论 -
js定义输入框数字的格式
clearNoNum(val){ val = val.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符 val = val.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的 val = val.replace(".","$#$").replace(/\./g,"").replace...原创 2019-06-26 09:28:20 · 2291 阅读 · 0 评论 -
JavaScript实现 满天星 导航栏
说明分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。解释实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了。 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里。<!doctype html><html lang="en"> <head> <meta chars...转载 2018-03-20 19:35:35 · 244 阅读 · 0 评论 -
js for循环高性能高逼格细节分析
1.for循环相信大家都用很多,还要拿出来讲,这不是搞笑吗?客官别急,给我一首歌的时间一般用for循环的方法:for(var i=0;iconsole.log(i);console.log(arr[i]);}相信大多数人都是这样写的,但是客官请看:每次循环都读取一次arr.length你不累啊,你不累计算机还累呢每次要获取当前遍历的值转载 2018-01-30 17:40:53 · 303 阅读 · 0 评论 -
for in 枚举, 记录判断数组中元素中第一个字符是否包含“*”
var arr = ['*','##',"***","&&","****","##*"];arr[7] = "**";var tmp = new Array(); //存储 排序后的图案;for(var i in arr){if(arr[i][0]=='*'){ // 判断数组第1个字符是否包含 *tmp[i] = arr[i];}}tmp.sort();转载 2017-12-09 20:14:00 · 380 阅读 · 0 评论 -
JS学习篇-设置标记条件解决无限获取焦点问题
光标聚焦事件 var tag = 0; function message(){ if (tag == 0) { alert("请选择,您现在的职业!"); tag = 1; }} 请选择您的职业: 学生 教师 工程师 演原创 2017-12-11 22:21:18 · 141 阅读 · 0 评论 -
Javascript - String对象方法substr,substring,slice区别
String 对象的方法 slice()、substring() 和 substr() (不建议使用,ECMAScript不支持,IE4不支持)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。原创 2017-12-12 15:58:55 · 241 阅读 · 0 评论 -
Javascript - Math 对象 - 某个数字区域之间的随机数(精确度:小数点后两位)toFixed方法原生JS实现
function box(start,end) {var total = end - start;document.write(Math.round((Math.random()*total + start)*100)/100 + "");}box(1,10);function box1(start,end) {var total = end - start;d原创 2017-12-12 18:03:43 · 1910 阅读 · 0 评论 -
window对象
1转载 2017-12-22 11:12:17 · 163 阅读 · 0 评论 -
location对象
location用于获取或设置窗体的URL,并且可以用于解析URL。语法:location.[属性|方法]location对象属性图示:location 对象属性:location 对象方法:转载 2017-12-22 12:22:10 · 128 阅读 · 0 评论 -
navigator对象
Navigator对象Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。对象属性:查看浏览器的名称和版本,代码如下: var browser=navigator.appName; var b_version=navigator.appVersion; document.write("Bro转载 2017-12-22 12:28:04 · 315 阅读 · 0 评论 -
DOM 节点
HTML文档可以说由节点构成的集合,DOM节点有:1. 元素节点:上图中、、等都是元素节点,即标签。2. 文本节点:向用户展示的内容,如...中的JavaScript、DOM、CSS等文本。3. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"。节点属性:遍历节点树:以上图转载 2017-12-22 13:31:29 · 123 阅读 · 0 评论 -
Javascript - Array - sort 方法
sort() 方法用于对数组的元素进行排序。arrayObject.sort(sortby)参数描述sortby可选。规定排序顺序。必须是函数。返回值对数组的引用。请注意,数组在原数组上进行排序,不生成副本。说明如果调用该方法时没有使用参数,将按字母顺序对数组中的元素转载 2017-12-17 13:24:09 · 141 阅读 · 0 评论 -
Javascript - 字符串,数组处理练习
某班的成绩出来了,现在老师要把班级的成绩打印出来。效果图:XXXX年XX月X日 星期X--班级总分为:81格式要求:1、显示打印的日期。 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间。2、计算出该班级的平均分(保留整数)。同学成绩数据如下:"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小原创 2017-12-17 15:00:45 · 218 阅读 · 0 评论 -
彻底弄懂JS的事件冒泡和事件捕获
原文链接:http://www.cnblogs.com/qq9694526/p/5653728.html在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场)。工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(转载 2018-01-01 11:05:00 · 245 阅读 · 0 评论 -
jQuery 插入方法异同
差异无论是内部插入还是外部插入,只有选择器在前的方法可以使用函数来附加内容, 也就是append(),prepend(),before(),after()这四个方法。 以上四个方法支持多参数处理; appendTo(),prependTo(),insertBefore(),insertAfter()不支持多参数处理。DOM内部插入(插在父元素集合内)1. append() 定义和用法 ap原创 2018-01-02 13:11:48 · 183 阅读 · 0 评论 -
Ajax - Http请求
http:是不保留相关信息的一种无状态协议。http请求:1.建立TCP链接2.Web游览器向Web服务器发送请求命令3.Web游览器发送请求头信息4.Web服务器应答5.Web服务器发送应答头信息6.Web服务器向游览器发送数据7.Web服务器关闭TCP连接一个HTTP请求一般由四部分组成:1.HTTP请求的方法或动作,比如是GET或POST请求转载 2017-12-19 15:28:25 · 236 阅读 · 0 评论 -
事件冒泡、事件捕获和事件委托
原文地址:https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件,以便事件发生时执行相应的代码。 事件流的起源:就是在浏览器发展到第四代的时候,浏览器开发团队遇到一个问题:转载 2018-01-03 13:54:18 · 508 阅读 · 0 评论 -
event对象中 target和currentTarget 属性的区别。
原文地址:https://www.cnblogs.com/yewenxiang/p/6171411.html首先本质区别是:event.target返回触发事件的元素event.currentTarget返回绑定事件的元素转载 2018-01-03 13:08:53 · 739 阅读 · 0 评论 -
JS获取子节点、父节点和兄弟节点的若干种方式
一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsByTagName("div");2.通过childNodes获取子节点使用child...转载 2018-01-30 17:40:07 · 625 阅读 · 0 评论 -
textarea 高度随内容增加而自动增加(不能减少)
const textWrap = document.querySelector('.cube-textarea-wrapper') const text = document.querySelector('textarea') const sH = text.scrollHeight + 'px' textWrap.style.heigh...原创 2019-09-18 10:07:22 · 2343 阅读 · 0 评论