JavaScript
UzumakiHan
这个作者很懒,什么都没留下…
展开
-
JavaScript实时更新当前的时间
实现的效果如下:时间会实时更新具体的JS代码如下var dateStart;function start() { dateStart = new Date(); //开始时间 startTime();}function startTime() { set = window.setTimeout("startTime()", 1000); var dt = new Date(); var day = dt.getDay(); var weeks原创 2020-07-14 10:41:24 · 955 阅读 · 0 评论 -
基于防抖和节流的性能优化
介绍:当下网页中的交互越来越多,很多高频事件带来的性能问题,已经是绕不过去的一个坎。怎么去优化这些高频事件,以下来基于防抖和节流的性能优化。1、防抖和节流的概念:防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。节流:就是指连续触发事件,但是在一段时间中只执行一次函数。2、手写防抖函数和节流函数:2.1防抖函数function debounce(fn,wait){ let timmer = null;原创 2020-06-28 14:29:54 · 632 阅读 · 0 评论 -
JavaScript中的作用域
作用域精解[[scope]]:每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个。[[scope]]:指的就是我们所说的作用域,其中存储了运行期上下文的集合。作用域链:[[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链。example...原创 2018-10-06 14:32:18 · 190 阅读 · 0 评论 -
JavaScript中的预编译
JavaScript 预编译JavaScript运行三部曲:1.语法分析:先全部扫一遍 看有没有语法错误.2.预编译(执行前一刻) :函数声明整体提升变量 声明提升函数声明整体提升(相当于提升到程序的最前面)一个变量被声明后,变量声明提升(相当于把变量声明语句放到最前,赋值不变)JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是有定义的,也就是说变量在声明...原创 2018-10-05 11:48:41 · 245 阅读 · 0 评论 -
JavaScript中不改变原数组的方法:
concat:把两个或多个数组拼接,产生一个新的数组var arr = [1,2,3,4,5];var arr1 = [7,8,9];slice:(从该位开始截取,截取到该位),不改变原数组,所以要返回该值。分别有三种情况:两位参数:var arr = [1,2,3,4,5,6];var newArr = arr.slice(1,3);一位参数的情况,var arr = ...原创 2018-10-16 19:55:24 · 20313 阅读 · 1 评论 -
JavaScript评论敏感词过滤
有时候用户在输入框输入字数进行评论时,为了安全起见,一般在开发时,会过滤用户输入的一些敏感词。通过例子来实现过滤敏感词汇<textarea rows='7' cols='20'></textarea><br /> <input id='bt' type='button' value='查看效果'><br /> <textarea rows='7' cols='20'></textarea><br /原创 2020-06-11 17:33:23 · 1219 阅读 · 0 评论 -
手写前端分页效果
需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能。效果图:当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态各个按钮都正常的状态当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态各部分的代码如下:html部分:<!-- 分页 --> <div class="pageBox"> <div class="pageTotal">共<span>88</span>条</div> <原创 2020-05-18 11:00:40 · 638 阅读 · 0 评论 -
jQuery对象与DOM对象
对于才开始接触jQuery库的初学者,我们需要清楚认识一点:jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换。通过一个简单的例子,简单区分下jQuery对象与DOM对象:通过原生DOM模型提供的document.getElementById(“demo1”) 方法获取的DOM元素就是...原创 2018-11-29 09:11:02 · 395 阅读 · 0 评论 -
JavaScript中对象的遍历(对象枚举)
如果要对一个对象遍历的时候,我们可以用到for in循环:举个例子:var obj = { name : 'hehe', age : 28, sex : 'male', wife : { name : 'haha', age : 26, son: { age : 1, sex : 'male' } }}for(var prop in obj){ c...原创 2018-10-13 10:41:15 · 2647 阅读 · 0 评论 -
JS格式化数字
/** * @description 格式化数字 */ formatNumber(val) { const num = parseInt(val); if (num === 0) return ''; if (num > 0 && num < 10000) return num; if (num >= 10000 && num < 100000) return `${(num / 10000).t..原创 2021-08-16 11:08:10 · 501 阅读 · 0 评论 -
JavaScript原型链
js原型链:原型和原型链是js中的难点也是重点,个人觉得这个的确是一个很难的知识点,我也思考了很久,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效。上次我们说了原型的一些知识点,现在来补充一下原型链的知识点,所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)所有函数拥有prototype属性(显式原型)(仅限函数)原型对象:拥有prototype属性...原创 2018-10-11 13:59:15 · 690 阅读 · 0 评论 -
JavaScript中this指向
JavaScript中this的四大判定:1.默认绑定this指向window:example: function test (c){ var a = 123; function b(){ } } test(1);在预编译的过程当中AO{c:1a:undefonedargum...原创 2018-10-14 15:24:17 · 697 阅读 · 0 评论 -
JS数组的方法总结
//some()方法 此方法检查数组至少有一个元素是否满足参数函数检查的条件 var array1 = [2, 5, 8, 1, 4]; var result1 = array1.some(function (ele) { return ele > 5; }) console.log(result1) // true //reduce()方法JavaScript中的数组reduce()方法用于将数组原创 2020-05-29 11:15:45 · 130 阅读 · 0 评论 -
DOM基本操作3
查看滚动条的滚动距离1.window.pageXOffset/pageYOffset2.document.body.scrollLeft/scrollTop3.document.documentElement.scrollLeft/scrollTopIE8及IE8以下不兼容兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值封装兼容性方法,求滚动轮滚动距离getScrollOf...原创 2018-10-25 15:48:21 · 174 阅读 · 0 评论 -
JS数组对象根据两个相同的属性,并累计出现的次数。
如图所示,根据数组对象的id属性值相同,再根据menuTitle这个字段过滤,并统计出现的次数。最后得到的结果是代码如下 /** * @description 统计出现次数 */ formatArrUnique(arr) { let check = {} let newArr = [] for(let i = 0; i < arr.length; i++) { let item = arr[i] let _c...原创 2021-08-16 11:04:21 · 810 阅读 · 0 评论 -
前端input密码输入强度验证
需求:1.需要对用户输入的密码进行验证,验证的级别分为强中弱,如果输入的密码强度少于6时,则不会验证,只有密码强度在6-20时才会进行验证。相关的正则 //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); //密码为七位及以上并且字母、数字、特殊字符三项.原创 2020-06-18 15:59:18 · 3274 阅读 · 0 评论 -
事件冒泡和捕获
事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)example:html:<div class="box1"> <div class="box2"> <div class="box3"></div></div><原创 2018-10-25 20:52:04 · 490 阅读 · 0 评论 -
JavaScript定时器
JavaScript中的定时器分为两种:setInterval()和 setTimeout()它们两个都是window上的方法,内部函数中的this指向windowsetInterval():循环计时器举个例子在html中:div style="width:100px; height:100px; background-color:red;position: absolute;left...原创 2018-10-25 14:36:19 · 187 阅读 · 0 评论 -
Promise封装原生Ajax
function ajaxPromise(method,url,data) { return new Promise((resolve, reject) => { var xhr = null; var method = method || 'GET'; var data...原创 2020-01-16 10:09:22 · 196 阅读 · 0 评论 -
join的应用和类数组
join应用,将字符串拼接在一起var str = "alibaba";var str1 = "baidu";var str2 = "tencent";var str3 = "toutiao";//散列结构var arr = [str,str1,str2,str3];var newArr = arr.join("");newArr = “alibababaidutencentto...原创 2018-10-18 20:28:20 · 309 阅读 · 0 评论 -
jQuery捕获
jQuery - 获取内容和属性jQuery 中非常重要的部分,就是操作 DOM 的能力。获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法:text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值下面就用例子来说明一下:tex...原创 2018-11-29 15:54:42 · 431 阅读 · 0 评论 -
jQuery选择器2
jQuery :first-child 选择器定义和用法:first-child 选择器选取属于其父元素的第一个子元素。因为P的父级元素div的一个元素刚好是P,所以就标注P的背景颜色为黄色jQuery :first-of-type 选择器定义和用法:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。:first-of-type是指选取指...原创 2018-11-29 11:53:49 · 144 阅读 · 0 评论 -
html关于列表的显示和隐藏
实现的效果是点击向下箭头,隐藏列表。点击向上箭头,显示列表主要用到的是jQuery的toggle方法,以及箭头的显示和隐藏的判断,在箭头上添加onclick方法具体实现的函数方法如下:var toggleFlag = false; function toggleHosptial(e){ if(!toggleFlag){ $('.arrow_icon').css({'background-image':'url(' + "../imag原创 2020-06-23 14:33:23 · 3221 阅读 · 0 评论 -
数组去重和封装type,实现判断类型
数组去重var arr = [1,1,1,1,1,2,2,2,2]; Array.prototype.unique = function(){ var obj = {}, arr = [], len = this.length; for(var i = 0;i < len; i++){ i...原创 2018-10-18 20:52:23 · 255 阅读 · 2 评论 -
DOM的基本操作1
DOM树结构:举个例子:html:<div></div>js: var div = document.getElementsByTagName('div')[0]; var span = document.createElement('span');//增 var text = document.createTextNode('123...原创 2018-10-25 12:24:22 · 160 阅读 · 0 评论 -
JS实现公告上线滚动
实现的效果如下,新闻公告上下滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-07-31 16:30:29 · 306 阅读 · 0 评论 -
JS实现canvas简单小画板功能
Html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2020-03-13 16:36:05 · 631 阅读 · 1 评论 -
JS数组数据划分为两条数据为一组
/** * * array Array * subGroupLength Number ---定义为多少条为一组 */handleList(array,subGroupLength){letindex=0;constnewArray=[];while(index<array.length){newArray.push(array.slice(index,...原创 2021-09-01 14:32:15 · 964 阅读 · 0 评论 -
前端浏览器兼容性问题和解决办法
各标签margin padding的问题(不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同)解决方案: css 里增加通配符 * { margin: 0; padding: 0; }块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性表单元素行高不一致解决方案:1.给表单元素添加float:left(左浮动);2.或者是vertic原创 2020-05-27 11:34:48 · 295 阅读 · 0 评论 -
vue实现标签的双向选择
实现的效果如下:未选择时:选择一个或者多选时取消选择时具体代码如下<template> <div class="tagBox"> <div class="tagBox_tabBoxL"> <span :class="[{ active: checkedGroup.indexOf(index) > -1 }]" :key="item.id || index" ...原创 2021-08-25 11:05:13 · 376 阅读 · 0 评论 -
前端开发遇到的问题总结
CSS一行文本超出隐藏 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;CSS多行文本超出隐藏display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;html中使用base64格式图片<img src="data:image/png;base64,iVBORw0KGgoA原创 2020-05-21 11:07:53 · 536 阅读 · 0 评论 -
js克隆
JavaScript中的克隆分为浅层克隆和深层克隆。浅层克隆:var obj = { name : 'abc', age : 123, sex : 'female', card:['visa','unionpay'] } var obj1 = {}function clone (origin,target) { var target = target || {...原创 2018-10-13 22:29:20 · 308 阅读 · 0 评论 -
js的DOM
什么是DOM1.DOM–> Document Object Model2…DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。DOM的基本操作对DOM 进行查看:查看元素结点1.document 代表整个文档2...原创 2018-10-22 21:27:13 · 144 阅读 · 0 评论 -
用checkbox实现多列表的显示和隐藏
由于上一篇存在bug…所以就改用checkbox来实现多列表的显示和隐藏html代码: <header>覆盖医院名单</header> <ul class="cover_list"> <li class="cover_item"> <div class="provice_count" ><span>上海市(4)</span><input type="checkbox"原创 2020-06-23 16:23:22 · 1049 阅读 · 0 评论 -
css滚动条样式修改
/*滚动条样式*/*::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height:4px;}*::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); background:rgba(0,0,0,0.15);}*::-we.原创 2020-06-11 10:37:55 · 138 阅读 · 0 评论 -
jQuery实时统计输入框字数及限制的方法
项目中经常会用到文本输入框,而且需要限制输入的字数。下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法,代码如下:HTML:简单的写一下,能实现功能即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-06-11 10:19:38 · 598 阅读 · 0 评论 -
jQuery选择器4
:eq()选择器、:gt()选择器、:lt()选择器:eq() 选择器选取带有指定 index 值的元素。:gt() 选择器选取 index 值大于指定数字的元素。:lt() 选择器选取 index 值小于指定数字的元素。举个例子jQuery :not() 选择器定义和用法:not() 选择器选取除了指定元素以外的所有元素。语法$(":not(selector)")举个例...原创 2018-11-29 15:09:50 · 138 阅读 · 0 评论 -
事件处理
绑定事件的方法:1.ele.onxxx = function (event) {}兼容性很好,但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上html:&lt;div style="width: 200px; height:200px;background-color:red;position: absolute;top: 100px;left: 100px;"&gt;&l...原创 2018-10-25 17:56:08 · 201 阅读 · 0 评论 -
了解JavaScript正则表达式
正则表达式修饰符:i :执行对大小写不敏感的匹配。g :执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。var reg = /ab/;var str = "ababababab";在没有全局匹配的时候,只返回一个 var reg = /ab/g; var str = "ababababab";g :执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。...原创 2018-10-27 16:45:47 · 725 阅读 · 0 评论 -
String API
String API:1.大小写转换:所有的字母全部转换为大写或者小写(用于验证码)str = str.toUpperCase():转大写str = str.toLowerCase() : 转小写注意:String API 都无法修改原字符串2.获取指定位置的字符:str.charAt(i)获取指定位置字符的unicodestr.charCodeAt(i)3.截取:str...原创 2018-11-26 15:23:17 · 239 阅读 · 0 评论