前端js
文章平均质量分 66
beichen3997
每一天都是一个进步
展开
-
promise源码分析(三)
promise剖析原创 2022-11-23 11:34:19 · 298 阅读 · 1 评论 -
promise使用与源码封装(二)
promise源码原创 2022-11-23 11:15:11 · 329 阅读 · 0 评论 -
关于我对axios的源码理解
axios源码剖析原创 2022-11-23 10:52:40 · 277 阅读 · 0 评论 -
promise使用与源码封装(一)
promise原理原创 2022-11-17 14:38:19 · 153 阅读 · 0 评论 -
实时调试线上js
Chrome的开发者工具在source选项卡下,可以看到js源代码,但是不能编辑。利用Chrome的Overides功能可以实现js代码的重载或者调试。第一步,选择要修改的js文件,记住它的位置。如下图中的标红的文件名称要一样。第二步,在本地电脑任意位置建立如下文件:文件目录要一样,js文件名需要与上面要替换的报纸一致,第三步,点击source选项卡下面的Overides,选中你刚才建立的top文件夹。如下图所示。重新刷新浏览器,即可实现js代码的重置。rer...原创 2021-11-02 15:00:38 · 1003 阅读 · 0 评论 -
JavaScript实现鼠标拖拽调整div大小
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { width: 100%; height: 100%; margin: 0; } #container { width: 200px; height: 200px; .原创 2021-11-02 14:48:50 · 4178 阅读 · 0 评论 -
浅谈XSS跨站脚本攻击
浅谈 跨站脚本攻击(XSS)一、概述1、什么是跨站脚本攻击跨站脚本攻击(Cross Site Scripting),简称XSS, 是指:由于网站程序对用户输入过滤不足,致使攻击者利用输入可以显示在页面上对其他用户造成影响的代码来盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。直白点:恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。不同于大多数攻击(一般只涉及攻击..转载 2021-04-16 17:11:07 · 414 阅读 · 0 评论 -
模拟搜索变色查询
<section class="search-area" v-if="selectOption.length > 1" ref="scrollTree"> <h-select v-model="selectedValue" style="margin: 0px 6px; width:90%; margin-bottom: 10px;" > <h-option v-for="opt in selectOption" ...原创 2021-04-15 13:47:18 · 158 阅读 · 0 评论 -
汇总整理了96个常用的JavaScript工具函数
1、为元素添加on方法Element.prototype.on = Element.prototype.addEventListener;NodeList.prototype.on = function (event, fn) {、 []['forEach'].call(this, function (el) { el.on(event, fn); }); return this;};2、为元素添加trigger方法Element.prototype.tri转载 2021-02-19 16:39:15 · 330 阅读 · 0 评论 -
怎么让Chrome支持小于12px 的文字?
这个我们在做移动端的时候,设计师图片上的文字假如是10px,我们实现在网页上之后。往往设计师回来找我们,这个字体能小一些吗?我设计的是10px?为啥是12px?其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,在浏览器中只会显示12px,那么如何解决这个坑爹的问题呢?我们的做法是:针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性<style>pspan{font-size:10px;-webkit-transfo原创 2020-11-05 15:22:53 · 279 阅读 · 0 评论 -
不定宽溢出文本适配滚动
上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap { position: relative; width: 10vw; height: 100vh; background: #ddd; overflow: hidden; ..原创 2020-09-28 10:24:06 · 242 阅读 · 0 评论 -
基准测试js
console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){ items.push({index: i});}console.timeEnd('Timer1');结果Timer1: 13.076904296875ms原创 2020-09-24 17:05:11 · 163 阅读 · 0 评论 -
js获取数组对象中某个属性的最大值或最小值
近的开发中经常会遇到前端自己生成唯一id,然后在数组中增加删除插入对象,这样一来就要的要当前使用的id的最大值。总结一下,有两种比较简便的方法可以做到:1. 将属性值通过map生成一个数组,再使用Math.max取最大值2. 使用排序sort,先对数组的项排序,再取排序后的对应的项的值代码实现数组对象如下,求id的最大值和最小值list: [ { id:...原创 2020-04-08 14:04:57 · 6794 阅读 · 0 评论 -
中文排序
var arr = ['南京', '北京','-','','', '上海','北京', '杭州', '北京','深圳','-']; function sortChinese (arr) { // 参数: 排序的数组 arr.sort(function (item1, item2) { console.log(item1.localeCompare(item2, 'zh-CN'))...原创 2020-04-03 11:19:39 · 114 阅读 · 0 评论 -
echarts legend自定义
legend: [ { itemWidth: 33, data: [ { name: "蒸发量", icon: "rect" } ], bottom: ...原创 2020-03-20 16:32:39 · 1394 阅读 · 0 评论 -
ECharts 柱状图 改变柱子颜色+柱子上方显示文字与图标
var option = { // title: { // text: '资源总览', // left:'20px', // textStyle: { // color: "#436EEE", ...原创 2020-03-06 09:50:06 · 2879 阅读 · 0 评论 -
ECharts 柱状图 改变柱子颜色+柱子上方显示文字与图标
option = { // tooltip: { // trigger: 'axis', // axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' // } ...原创 2020-03-05 23:32:36 · 2317 阅读 · 0 评论 -
让超出DIV宽度范围的文字自动显示省略号...
div.jieshao{ padding:1rem 0.2rem; font-size: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}div.jieshao{ padding:1rem 0.2rem; font-size: 1.5re...原创 2017-12-16 14:44:59 · 2837 阅读 · 0 评论 -
JS深拷贝,进行方法拷贝
深拷贝的另一个简单的方法直接使用JSON.parse(JSON.stringify(Object))来进行缺点: 如果对象或者数组里有函数什么的, 就会出问题啦image当然对于函数可以使用JSON.stringify()和JSON.parse()的第二个参数进行转换function stringifyRep(key, value) { if (typeof...原创 2019-12-18 15:09:54 · 108 阅读 · 0 评论 -
页面加载后自动运行
$(function () { });2 $(document).ready(function () { });3 window.onload = function () { }原创 2017-12-19 16:54:07 · 249 阅读 · 0 评论 -
前端实现在线预览pdf、word、xls、ppt等文件
最近在做一个公司的资源管理系统,一些知识小记一下。1、前端实现pdf文件在线预览功能方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览<a href="文档地址"></a>方式二、通过jquery插件jquery.media.js实现这个插件可以实现pd...转载 2019-03-29 15:21:04 · 1837 阅读 · 0 评论 -
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _),本文基于谷歌浏览器(版本 72.0.3626.1...原创 2019-04-28 10:04:19 · 118 阅读 · 0 评论 -
理解JavaScript中的堆和栈
这里先说两个概念:1、堆(heap)2、栈(stack)堆是堆内存的简称。栈是栈内存的简称。说到堆栈,我们讲的就是内存的使用和分配了,没有寄存器的事,也没有硬盘的事。各种语言在处理堆栈的原理上都大同小异。堆是动态分配内存,内存大小不一,也不会自动释放。栈是自动分配相对固定大小的内存空间,并由系统自动释放。javascript的基本类型就5种:Undefined、Null、Boolean...转载 2019-04-29 11:06:29 · 150 阅读 · 0 评论 -
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念。懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。懒加载的意义及实现方式有: 意...转载 2019-04-30 11:18:04 · 560 阅读 · 0 评论 -
原生js获取scrollTop
1、各浏览器下 scrollTop的差异IE6/7/8:对于没有doctype声明的页面里可以使用document.body.scrollTop来获取 scrollTop高度;对于有doctype声明的页面则可以使用document.documentElement.scrollTop;Safari:safari 比较特别,有自己获取scrollTop的函数 :win...转载 2019-05-16 10:52:51 · 738 阅读 · 0 评论 -
数组中是否含有对象
this.ones.map(item=>{ for(let ite of this.twos){ // console.log(ite,'ite') if(ite.parentId==item.id){ ...原创 2019-07-05 13:33:10 · 109 阅读 · 0 评论 -
js 怎样表示正负无穷大
正无穷大:1.7976931348623157E+10308 负无穷大: - (1.7976931348623157E+10308) ,也可以使用log(0)表示转载 2019-07-10 18:31:26 · 7035 阅读 · 0 评论 -
js 实现纯前端将数据导出excel两种方式,亲测有效
由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,参考了好多资料以及很多大佬写的博客终于实现,兼容chrome没问题,其他还没有测试过,这边介绍两种实现方式,并附上代码和gif动图,博主不才还望轻喷方法一将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件...转载 2019-07-05 14:32:03 · 323 阅读 · 0 评论 -
h5拖拽文件上传及进度条
html5实现拖拽的几个事件绑定在拖拽元素上的事件ondragstart 开始拖拽元素触发ondrag 拖拽时触发ondragend 拖拽完成触发绑定在指定区域元素上的事件这里需要注意的是,如果dragover事件中不阻止默认事件,drop事件就不会触发var box = document.querySelect...原创 2019-08-01 18:40:28 · 510 阅读 · 0 评论 -
使用js让数字的千分位用,分隔
<script> var a = 33333333333333.6754;var b = a.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');//使用正则替换,每隔三个数加一个',' </script>原创 2019-08-08 18:34:23 · 499 阅读 · 0 评论 -
input只能输入数字以及小数点后两位
watch: { 'query.amount' (n, o) { this.$nextTick(() => { this.trimQuery('amount') this.filterHandle(/[^\d.]/g, 'amount') ...原创 2019-08-13 18:44:31 · 698 阅读 · 0 评论 -
详解Object.defineProperty方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。参见Object.defineProperty语法。在vue.js是通过它实现双向绑定的。俗称属性拦截器。1、语法:Object.defineProperty(obj, prop, descriptor)参数说明:// obj:必需。目标对象// p...转载 2019-08-23 18:35:27 · 164 阅读 · 0 评论 -
js查找树形结构递归方法
1.利用递归map循环,再用外层过滤注意return的作用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> let arr=[...原创 2019-08-23 12:02:16 · 3195 阅读 · 0 评论 -
Object.defineProperty 数据双向绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="model"><br/> <div ...原创 2019-08-26 17:04:56 · 85 阅读 · 0 评论 -
用JS添加和删除class类名
面介绍一下如何给一个节点添加和删除类名添加:节点.classList.add( “类名”);删除:节点.classList.remove( “类名”); 以选项卡切换为例:在写标签切换的时候,通常我们会给选中的标签设置不同的样式,常用的方法是给被选中的选项卡新增一个类名,然后改这个类名的样式。 比如起一个班名叫“活跃”设置样式.active{ colo...原创 2018-12-20 14:41:59 · 3327 阅读 · 0 评论 -
js实时监测页面的fontSize
(function(doc, win) { setRem(); var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { setRem(); }; if (!doc.add...原创 2018-11-08 15:37:32 · 198 阅读 · 0 评论 -
关于JavaScript的浅拷贝和深拷贝
在 JS 中有一些基本类型像是Number、String、Boolean,而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' },对象跟基本类型最大的不同就在于他们的传值方式。基本类型是按值传递,像是这样:在修改a时并不会改到bvar a = 25;var b = a;b = 18;console.log(a);//25console.log...转载 2018-08-22 21:50:00 · 74 阅读 · 0 评论 -
js常见兼容性问题
JavaScript1.HTML对象获取问题FireFox:document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法:统一使用document.getElementById(“idName”);2.const问题说明:Firefox下,可以使用const关键字或var关键...转载 2018-03-12 17:57:22 · 209 阅读 · 0 评论 -
近期app问题
最近遇到的3个不容易解决的问题1 手机app的问题打开app页面,两个手指按着手机屏幕,一个手指向左滑,一个手指向右滑,滑动一定距离后,app卡住,不能滑动?2app页面遮盖头部状态栏(标时栏)3当网速不好时,app页面中头部出现white原创 2018-02-07 16:10:04 · 141 阅读 · 0 评论 -
浅谈js中子页面父页面方法 变量相互调用
(1)子页面调用父页面的方法或者变量:window.parent.方法()或者变量名window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写window.parent.aa();//调取aa函数window.parent.bb;//调取bb变量例如:想在子页面中得到id为aaa的文本框的值window.parent.$("#aaa").val()转载 2018-02-07 15:08:47 · 198 阅读 · 0 评论