原生JavaScript
苏喂苏喂苏喂su
这个作者很懒,什么都没留下…
展开
-
输入框只能输入正整数
<el-input v-model="awardsNum" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')};" />原创 2020-09-04 12:12:54 · 178 阅读 · 0 评论 -
input防止输入负数
使用replace处理一下就可以了<input type="number" oninput="value=value.replace('-', '')" />原创 2020-07-09 15:17:31 · 4694 阅读 · 2 评论 -
js限制输入框只能输入数字,且只能输入11位数
oninput事件加判断<input type="number" oninput="if(value.length>11)value=value.slice(0,11)">原创 2020-06-28 15:13:05 · 3459 阅读 · 0 评论 -
js限制输入框只能输入两位小数点
通过onimput事件和正则实现<input type="number" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)">原创 2020-06-28 15:00:07 · 4944 阅读 · 0 评论 -
前端实现打印页面的指定内容 + 快递面单的模板
原理是利用iframe,原生js写法完整demo。如果需要打印的内容比较多,建议做一个模板。本人在项目中是用vue做的,需要打印的部分在另外一个页面,这样看起来会没有那么乱。记得将打印部分隐藏起来,另外分享一个快递面单的模板。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-.原创 2020-05-29 15:37:11 · 5087 阅读 · 4 评论 -
input的type为number时,maxlength失效的解决办法
<input type="number" oninput="if(value.length>30)value=value.slice(0,30)" placeholder="请输入设备编号" />利用oninput事件,这样可以限制长度原创 2020-05-29 10:10:39 · 1608 阅读 · 1 评论 -
正则表达式限制input输入框只能输入两个小数
<input type="number" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)"/>这样就只能输入数字,并且小数点只能输入2位原创 2020-05-29 10:04:06 · 3152 阅读 · 1 评论 -
80行原生js代码实现省市区选择
html<!-- * @Descripttion: Descripttion * @version: version * @Author: LGQ * @Date: 2020-05-28 09:55:34 * @LastEditors: LGQ * @LastEditTime: 2020-05-28 11:35:30--><!DOCTYPE html><html><head> <meta charset="UTF-8"&g原创 2020-05-28 14:11:05 · 843 阅读 · 0 评论 -
vue监听滚动条到底部
created() { this.$nextTick(() => { // this.initScroll() window.onscroll = function() { //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollT...原创 2020-03-20 14:14:11 · 3504 阅读 · 0 评论 -
setInterval在指定条件下清除自身
this.countDown = 10let intval = setInterval(() => { if(this.countDown === 0) { clearInterval(intval) return } this.countDown --}, 1000)原创 2019-12-17 11:00:27 · 2568 阅读 · 1 评论 -
input change事件获取文件名和文件类型
<input type="file" onchange="changeMethod(this)">function changeMethod(e) { let file = e.files[0] console.log(file) let type = file.type // 获取到文件类型 let name = file.name // 获取到文件...原创 2019-11-05 16:11:25 · 4077 阅读 · 2 评论 -
js阻止事件冒泡和阻止默认事件
阻止事件冒泡:e.stopPropagation();阻止默认事件:e.preventDefault();原创 2019-06-27 23:08:11 · 132 阅读 · 0 评论 -
使用原生js为动态创建的dom元素绑定事件
为动态创建的dom元素绑定事件直接上代码吧,也很简单。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-06-27 23:02:27 · 6478 阅读 · 1 评论 -
创建一个构造函数实例的过程
调用构造函数实际上会经历4个步骤:1、创建一个新对象2、将构造函数的作用域赋值给新对象(因此this就指向了新对象)3、运行构造函数里面的代码(为新对象添加属性或方法)4、返回新对象...原创 2019-06-20 23:43:41 · 1933 阅读 · 0 评论 -
js取消默认回车事件
在日常开发中,有时候回车按键的默认事件不是我们想要的,这时候我们可以通过阻止事件的默认行为来达到我们想要的效果。示例:$("#templateList").on('keydown', 'li', function(e) { if(e.keyCode == 13) { e.preventDefault() }})上面这个是为动态生成的li绑定了一个ke...原创 2019-06-10 14:13:33 · 2723 阅读 · 0 评论 -
如何解决IE11不兼容ES6的模板字符串
IE浏览器再词法分析阶段如果遇到ES6的模板字符串,就会抛出错误,导致程序无法正常运行。这时候需要将ES6的模板字符串改写为普通的单引号或者是双引号来代替,如果只有多行字符串,就需要在换行处使用加号进行连接,在第二行继续使用引号,如:'<li>000/li>'+'<li>111</li>'...原创 2019-06-10 11:43:42 · 11894 阅读 · 4 评论 -
input的onchange事件第二次不执行的解决办法
input的onchange事件第二次不执行,问题的根源在于没有发生任何改变,因为绑定的是onchange事件,如果事件的对象没有发生改变,那么事件是不会执行的。当第二次选择文件和第一次选择的文件相同的时候,input的value值是一样的,在js看来就是没有变化,里面的值跟之前还是一样。所以就出现了问题的出现。要解决这个问题,可以在onchange事件执行完之后,清空input的value值...原创 2019-06-14 11:58:37 · 3829 阅读 · 0 评论 -
js如何让一个元素触发click点击事件
很简单,就一行代码。如下:<div id="div"></div>let div = document.getElementById("div");div.click();重点是:click(),调用该方法时,相应的DOM元素就会执行点击事件。...原创 2019-06-13 15:55:59 · 85536 阅读 · 5 评论 -
js通过ajax读取本地json文件
实例代码:function readJSON(file, callback) { let ajax = new XMLHttpRequest(); ajax.overrideMimeType("application/json"); ajax.open("GET", file, true); ajax.onreadystatechange = ...原创 2019-06-13 15:49:15 · 10246 阅读 · 1 评论 -
创建一个超简单的虚拟DOM实例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>创建一个超简单的虚拟DOM实例</title></head><body><script>function Element({tagName, props, c...原创 2019-06-27 15:54:07 · 1541 阅读 · 0 评论 -
根据数组中对象的某个属性进行排序
根据数组中对象的某个属性进行排序本题根据对象的id来进行降序排序let a = [ { id: 12, name: 'zhangsan' }, { id: 20, name: 'lisa' }, { id: 9, name: 'wangwu' }]// 排序方法1 (封装了,可对任何属性进行排序)function compare(propert...原创 2019-06-28 13:06:18 · 1620 阅读 · 0 评论 -
JavaScript字符串属性和方法
字符串属性:length,prototype,constructor;字符串方法:charAt() ,返回指定位置的字符charCodeAt(),返回指定位置的字符的unicode编码concat(),合并字符串,通常合并字符串也不用这个方法;使用字符串相加的方式更加方便。fromCharCode(),将Unicode编码转为字符indexOf(),返回某个字符在...原创 2019-03-06 23:06:22 · 180 阅读 · 0 评论 -
js三元运算符
基本语法:条件 ? 表达式1 : 表达式2 条件返回true时,执行表达式1,否则执行表达式2在多条件运算中使用条件1 ? 表达式1 : 条件2 ? 表达式2 : 条件3 ? 表达式3 : 表达式4 当条件1返回false,执行条件2,条件2返回false,执行条件3,条件3如果返回true,则执行表达式3,否则执行表达式4,以此类推...原创 2019-09-06 13:04:31 · 3754 阅读 · 0 评论 -
通过计算毫秒数获得两个时间(日期+时间)的相差天数
let d1 = new Date().getTime();let d2 = '2019-08-01 22:06:00'd2 = new Date(d2).getTime()console.log(d1, "d1") // 得到当前时间毫秒console.log(d2, "d2") // 得到2019-08-01 22:06:00这个时间的毫秒/*getTime()...原创 2019-08-27 22:26:58 · 2359 阅读 · 0 评论 -
Object.getOwnPropertyDescriptor
该方法返回指定对象上的一个自有属性对应的属性描述符(自有属性是指:对象自身拥有的属性,并非原型上的)用法示例:let baz = {};Object.defineProperties(baz, { color: { writable: true, value: 'red' }, border: { writabl...原创 2019-08-04 22:01:56 · 127 阅读 · 0 评论 -
JavaScript中0.1+0.2的运算结果
JavaScript中只有一种数值类型:number,是基于IEEE 754标准的64位双精度浮点型实现(64位二进制)。JavaScript没有真正意义上的整数,一般来说,没有小数的数值就可以称为整数。如题,0.1 + 0.2的运算结果,会是什么呢?由于二进制浮点数中0.1和0.2并不是十分精确,所以0.1和0.2的运算结果并不一定会跟预期一样。实际上0.1 + 0.2的结果是一个非...原创 2019-07-29 00:05:25 · 4561 阅读 · 0 评论 -
js判断一个对象是否已经创建
在多个js文件之间,如果需要用到同一个全局变量,在使用之前,需要判断是否已经创建了,如果使用if语句的话,很容易导致错误的发生,所以这里记录一下可用的方法。一:使用typeofif(typeof a === 'undefined') { var a = 'hello world'; console.log(a); // hello world}typeof是...原创 2019-07-16 21:13:48 · 1114 阅读 · 1 评论 -
jQuery的ready和原生js的onload之间的区别
它们的触发时间不同,jQuery的ready方法是在dom元素被解析完成之后,就会触发。也就是说页面还未完全展示,有可能页面上的图片只显示了一半,具体情况视页面的大小来决定。原生js的onload方法是在dom元素都加载完毕之后才会触发,所谓的加载完毕,就是它的所有属性都已经加载完了,页面也已经显示了。还有就是ready方法可以有多个,而onload只能是一个,多了的话也只是按最后写...原创 2019-07-14 23:59:08 · 336 阅读 · 0 评论 -
js冒泡排序和快速排序的区别
1、冒泡排序原理:将数组中紧挨着的两个元素进行比较(比如:第0个和第1个进行比对),如果前一个元素比后一个元素大,那么这两个元素就调换位置,大的在后面,小的在前面;然后再将下一组数据(比如:第1个和第二个进行比对)执行相同的操作。这个方法依靠循环遍历,每一次遍历都会将一个最大数排列好。下面给一个例子:let arr = [22, 1, 3, 23, 99, 65, 112, 32, ...原创 2019-06-30 11:38:10 · 660 阅读 · 0 评论 -
JavaScript正则表达式练习题以及解题思路:一
No.1获取字符串中的数字字符,并以数组形式输出。如:12ak3222ljfl444223ql99kmf678,输出:[12, 3222, 444223, 99, 678]。思路:要求是找字符串的数字,那么正则查找数字的方法是:\d,可是如果只是使用\d的话,输出的结果肯定不如人意。所以必须必须是全局查找,所以此时的正则应该是长这样:/\d/g,但是这样输出的结果还是不如人意啊,因为每...原创 2019-05-21 11:27:57 · 603 阅读 · 0 评论 -
js浅拷贝和深拷贝
一:区别浅拷贝和深拷贝的区别在于当a复制了b之后,b修改会不会影响到a,如果会影响,那么就是浅拷贝,否则是深拷贝。二:浅拷贝let arr = [1, 2, 3];let arr2 = arr;console.log(arr); // 1, 2, 3console.log(arr2); // 1, 2, 3arr2.push(22);console.lo...原创 2019-05-17 15:22:02 · 155 阅读 · 0 评论 -
JavaScript -- 变量的生命周期
全局变量的作用域是全局性的,即在整个JavaScript程序中,全局变量处处都在,在哪里、任何时候都可以调用。所以其生命周期是从打开页面都是一直存在的,直到页面被关闭才会被销毁。那什么变量是全局变量呢?1、直接使用var声明的变量var a;var b = 1;console.log(window);2、未经var声明,直接赋值的变量。a = 0;cons...原创 2019-04-12 20:50:03 · 1003 阅读 · 0 评论 -
JavaScript之作用域scope chain
[[scope]]:每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,也有些不可以访问,这些属性仅供JavaScript引擎存取,[[scope]]就是其中的一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。运行期上下文指的是:当函数执行时,创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的...原创 2019-04-11 00:14:24 · 197 阅读 · 0 评论 -
JavaScript之面向对象 -- 理解对象
面向对象的语言都有一个标志,就是都有类的概念,通过类可以创建多个具有相同属性和方法的实例对象;在ECMAScript中没有类的概念,所以它的对象和其它基于类的语言中的对象有所不同。在JavaScript中把对象定义为:无序属性的集合,其属性可以包含基本的值、对象或者函数。每一个属性都有相应的名字和值(键值对),下面来创建一个最简单的对象。let person = {};这是使用对象字...原创 2019-03-25 23:41:41 · 171 阅读 · 0 评论 -
JavaScript内存管理
内存管理中的内存,指的是系统分配给浏览器的内存。出于安全的考虑,系统分配给web浏览器的内存通常都要比其它桌面程序要少。这也影响了给变量分配内存,同时还会影响调用栈以及在一个线程中能够同时执行的语句数量。因此,确保占用最少的内存,可以让页面获得更好的性能。优化内存最好的方式,就是通过给不再使用的全局变量赋值为null,这样可以释放变量的引用 --------这个方法叫做解除引用。这种做法适用于...原创 2019-04-16 23:54:16 · 258 阅读 · 0 评论 -
js获取URL里面的参数并保存为json格式
获取url里面的参数,主要是使用了字符串方法split的特性,首先将URL“?”的后半部分拿到,然后还是通过split方法对后半部分(参数)进行再次分割,而这一次分割的字符就是等于号“=”,这时候就已经清楚的拿到了key和value,只需要循环一下 push到一个数组里面。下面上代码:<script> let url = "https://www.baidu.com/s?...原创 2019-03-20 23:00:06 · 1562 阅读 · 0 评论 -
自定义js计算两个日期之间相差的天数的函数
function DateDiff(sDate1, sDate2){ //sDate1和sDate2的格式是2019-03-11 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2]...原创 2019-03-17 22:49:35 · 1465 阅读 · 0 评论 -
JavaScript正则表达式 RegExp验证手机号码
直接上代码<div class="phone"> <input type="text" id="phone"> <button onclick="phone()">click</button></div>function phone() { let phone = document.getElemen...原创 2019-02-03 17:44:54 · 3351 阅读 · 0 评论 -
JavaScript 数据类型 以及 判断方法
js有7种内置类型其中:基本数据类型6个:string、number、Boolean、null、undefined、symbol(ES6新的原始数据类型,代表独一无二的值)引用类型1个:object但是引用类型又包含:array、function、object,这三个数据类型陈伟复杂的数据类型判断是否字符串:let a = "123";console.log(t...原创 2019-01-24 23:49:17 · 679 阅读 · 0 评论 -
JavaScript数组方法
对js数组方法做个总结和记录,也是方便日后忘记了好再次查询。在w3c里面,官方给出的数组方法共有30个之多,实际上在开发当中,我们常用的可能也就十多个,下面就把数组的方法写下来:1、concat(),连接两个或者更多的数组,并返回一个新的数组。let arr = [2, 3, 1, 9, 7, 5, 8, 22];let arr2 = ['这是arr2'];console.log...原创 2019-01-13 20:30:42 · 4476 阅读 · 0 评论