- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Vue总结
码农们，在新年即将来临之际，提前祝大家新年快乐！在这里为大家存vue知识干货。vue指令（1）v-on：绑定事件，简写" @ "，例：<span @click="getTotal()"></span>（2）v-bind：绑定属性，简写" : "例：<span :class="c"></span>（3）v-model：绑定表单元素(数据双向...
2020-01-13 20:22:18
291
原创 Vue，swipper手写横向时间轴
在一次需求中，UI交互用是关于时间轴，手写代码如下：HTML代码：HTML：<!-- 时间轴 --> <div class="swiper-container" v-loading="timeLineLoading"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in timeLineList"
2021-09-26 20:24:24
1818
原创 原型对象和this详解
一、原型对象在了解原型之前，我们的指知道，每创建一个函数（普通函数/构造函数），解析器都会向函数中添加一个属性prototype，这个属性对应一个着一个对象，这个对象就是我们称之为“原型对象”；当函数以构造函数形式调用时（含有new关键字），它所创建的对象中含有一个隐含的属性__proto__。创建的对象，我们称之为实例；构造函数也可以成为类。原型对象相当于一个公共的区域，所有同一个类的实例，都可以访问到这个原型对象的属性或方法。function Fun(){}Fun.prototype.a =
2020-09-24 00:31:40
342
原创 原生js写jQuery延迟下拉菜单
<!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"> <title>延迟下拉菜单</
2020-06-21 23:42:59
326
原创 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"> <title>获取文件信息</
2020-05-14 10:06:13
1132
原创 原生JS实现发布-订阅模式
根据vue的发布-监听原理，原生JS手写发布-监听模式。 function eventBus(){ this._events = {} } eventBus.prototype.on = function(eventName,callback){ if(this._events[eventName]){ this._events[eventName].pus...
2020-04-23 23:16:18
538
原创 vue中调用方法时，获取组件data中的变量为undefined，解决：this指向问题
今天为大伙分享，在平时工作中遇见的问题及解决方法。今天主要分享的内容主要是在不同作用域中this指向的问题。不多说直接贴代码；错误示例：<template> <div class="test"> <button @click="getList()">请求数据</button> <button @click="show()...
2020-04-21 10:55:09
18145
5
原创 vue-cli脚手架实现全屏背景图
今天在vue-cli脚手架项目中，遇到实现在某个路由中全屏背景图片。（1）第一次的代码是这样的，问题：图片还是不能实现全屏展示。.login { width: 100%; height: 100%; background-image: url(../../public/images/login_bg.jpg); background-repeat: no-repeat; b...
2020-04-09 22:21:12
927
原创 纯css写时钟效果
前几天面试遇到写动画效果；于是今天就再想写个时钟效果分享。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-04-02 22:46:51
432
原创 原生js编写图片懒加载
今天为伙伴们分享怎么使用原生JavaScript来实现图片懒加载，当鼠标滚动页面时，图片显示在可视区域时，再对图片进行加载。思路：首先在页面元素中找到所有的img元素，并计算出距离屏幕顶部的距离；当鼠标滑动时，直到图片出现在可视区域，则对该图片进行加载，使用自定义属性替代src上的值。有利于首屏的加载速度，同时也可以节省的客户的流量。代码如下：<!DOCTYPE html>&l...
2020-03-08 10:52:46
118
原创 原型对象和实例对象
1、构造函数和普通函数的区别在于首字母大写的规定；例子：function Person(){}const p1 = new Person();const p2 = new Person();p1.__proto__ === Person.prototype //true在所有实现中都无法访问到prototype，但是可以通过一些方法来确定对象之间存在这种关系，instanceof能...
2020-03-01 16:53:42
954
原创 Webpack总结（二）
LoaderLoader是一个打包方案，让Webpack知道对于特定的文件怎么打包。上一节讲的是打包JS文件，如果我们要打包例如jpg、gif等格式的图片，如果按照上一节内容来打包图片是会报错的；报错如下：ERROR in ./src/1.jpg 1:0Module parse failed: Unexpected character '?' (1:0)You may need an a...
2020-02-10 16:06:27
386
原创 Webpack总结（一）
如今三大框架的脚手架都使用Webpack作为底层代码构建；Webpack能将浏览器不能识别的ES语法编译为浏览器可识别的语法，这只是其中的一小部分的功能。确切说Webpack是模块打包工具，具备强大功能！1、查看版本号node -vnpm -v2、使用Webpack需要安装"webpack"和"webpack-cli":（1）全局安装：npm install webpack w...
2020-02-07 11:59:04
172
原创 npm在安装包时，"--save"和"--save-dev"区别
（1）npm install 包名 --save将模块安装到项目目录下，并在package.json文件的dependencies节点写入依赖。【简写" -S “，运行依赖（发布）】（2）npm install 包名 --save-dev将模块安装到项目目录下，并在package.json文件的devDependencies节点写入依赖。【简写” -D "，开发依赖（辅助）】...
2020-01-29 16:03:01
384
原创 JavaScript优化逻辑代码之离散数学的应用
离散数学优化代码：今日看了一篇文章，关于代码的逻辑优化，如下：if(a && d || b && c && !d || (!a || !b) && c){ console.log("pass")} else{ console.log("fail")}面对这种复杂的逻辑，该如何优化呢？有一本书《离散数学》...
2019-12-31 11:48:15
239
原创 原生js写五“星”好评！
嘿，又是晚上时间，才有时间给大家分享，今天写的一个有关于点亮星星评价的小功能；设计的方法有很多种，关键在于思维能力哈。和原先写过的相比，代码量省了许多；思维提高了，代码量减少了，或许这就是技能的提升哈~html代码：<div id="btn"> <span data-num="1">★</span> <span data-num="2"&g...
2019-11-16 21:26:41
139
原创 js原生封装固定下拉框
伙伴们，傍晚好！今天学习jQuery时，好奇心一上头，就自己埋头苦干，写了个原生js控制下拉框；不多说，直接代码（用到了事件委托机制）。html部分代码：<ul class="nav" id="nav"> <li class="ll"> 账号信息 <ul class="nav-hide" style="display: none">...
2019-11-15 19:06:30
477
原创 box-sizing计算方式
box-sizing:content-box(默认值) | border-box计算方式：1.content-box(默认值)：高度/宽度 = “给定的高度/宽度 + padding + border”；设置了padding和border不会减少内容的宽度/高度2.border-box：盒子的宽和高就是“设置的宽度和高度（content）”如果设置了padding和margin，将会...
2019-11-11 23:47:38
443
原创 css样式书写规范
今晚，就来谈谈作为一名合格的Web前端开发程序猿哈，对于代码的书写规范是很重要的·；同时，也从侧面体现出技术水平。先来讲讲CSS样式规范，再稍微提点额外的代码书写规范。CSS样式规范(先后顺序)：位置属性(display,position,top,left,float等)容器大小(width,height,padding,margin等)文字样式系列(font-style,fo...
2019-11-11 23:36:22
227
原创 日常总结之水平垂直居中
1、使用css，让一个div，在任何时候都处于屏幕的正中心多种方法：（a）position: absolute;left: 50%;top: 50%;transform: translate(-100px,-100px);2、文字水平居中text-align：center3、文本垂直居中line-height：100px（数值视情况而定）4、多行文本的垂直居中4.1. dis...
2019-10-29 23:49:52
72
原创 css多种方法画四分之一圆曲线
写这道题是之前面试时碰到的题目，在这给大家分享几种画四分之一圆曲线方法：1、设置上、右边框，然后对右上角设置圆角 width: 100px; height: 100px; border-top:1px solid red; border-right: 1px solid red; border-top-right-radius: 100%;2.使用 clip:rect(0 5...
2019-10-29 23:44:44
3992
原创 二级联动
大家晚上好呀，大半夜的出来分享以前写过的二级联动代码，对于新人来说很有用；对于程序员来说，最注重的应该是培养思维逻辑；好了不多说，直接贴代码，这里写了两种方法：方法一【不推荐，仅供参考】 <select id="province" onchange="changeP()"> <option value="0">请选择省/城市</option>...
2019-10-25 00:50:12
152
原创 : 与 :: 区别
:与::区别（1）::存在浏览器兼容性，而:不存在兼容性（2）::是HTML5添加的，:是HTML4版本新增的；（3）::是针对Dom元素操作，:针对的是逻辑结构；（4）伪类使用 : 伪元素使用 :: (除特殊外，如::selected。w3c标准保留其样式，未做修改)~...
2019-10-22 23:59:09
393
原创 ::before与::after区别
相同点：用于内容生成，都默认为display:inline元素；不同点：(1)::before 防止外边距溢出方法一：父元素设置 ::before{display:table; content:’’}方法二：在父元素与子元素之间设置空的 (2)::after 清楚浮动。...
2019-10-22 23:53:10
153
原创 readonly与disabled区别：
区别：1.readonly：只读，不影响提交问题；2.disabled：阻止对元素的一切操作，表单元素的值是无法被提交；3.disabled属性可以用于所有表单元素；而readonly属性只针对input、textarea有效！！！...
2019-10-14 23:09:57
230
原创 外边距溢出问题及解决的几种方法
大家晚上好，最近一直忙于工作与学习，时间越来越少来写写博客，今天写这篇博客，解决以前踩过的坑。【其中第4、5点无瑕疵，也是常用的必备良药~】解决方法：1.给父元素的上边框设置宽度（border-top-width）；弊端：如果设置父元素的上边框，有样式的瑕疵，对于强迫症的人，这是万万不可取得；2.给父元素设置内边距（padding-top）解决；弊端：会影响到元素的实际占地高度；3.给父元...
2019-10-14 23:04:10
2050
原创 Uncaught TypeError:Cannot set property 'checked' of null...
今天在写一段代码时，遇见的小错误；代码能够正确的执行，到时每次正确执行输出后，控制台总是多出这一条代码错误。于是在网上搜了许多的解决方法，但还是解决不了，网上的说法有：报错的原因是js执行时在元素渲染之前，从而导致报错，建议使用addEventListener()方法解决，可是我试过后无效。最后排查，发现是自己写的代码错误（获取元素的id值写错），才导致这种低级错误！【以下代码备注改过的出错地方】...
2019-10-11 23:52:02
3583
原创 NodeList和Array数组的区别
首先，什么是NodeList集合呢？如果你不懂的话，可以先参考如下代码（这里是我截取的代码块）：<ul id="list"> <li><input type="checkbox"/>1</li> <li><input type="checkbox"/>2</li> <li>&l...
2019-10-11 23:30:19
1388
原创 JavaScript编码程序解决计算题
求出：有多少种方法能使一元、两元、五元，凑齐20元？思路：首先，设置 ：一元：x，，两元：y，五元：z。 x<=20张，y<=10张，z<=4张；之后运用for循环嵌套，来求出分别有几种方法能凑齐20元整。var x, y, z; for(var x=1; x<=20; x++){ for(var y=1; y<=10; y++){ for(var z=...
2019-09-16 22:45:28
213
1
原创 JavaScript常见的计算题--思路讲解！！！
有1、2、3、4个数字，能组成多少个种互不相同且无重复数字的三位数？都是多少？思路：对于读过高中的朋友们，遇见这种题目，第一想法会是高中学过的组合方法问题。用高中学的公式来解决：4×4×4。为什么呢？因为该数为三位数，每个位数有4种不同的值，所以4×4×4=64种方式。对于刚入门的码农来说，在思路清晰后，那么该何如将它运用到程序中呢？列出组合例子：111、112、113、114、121、122、...
2019-09-05 23:59:07
171
原创 三目运算符的底层原理及处理问题
三目运算符的底层原理及处理问题欢迎各位朋友的到来（最后一条，求底层原理）~三目运算符的格式不走寻常路的三目运算使用三目运算求出三个数的最大值，及其拼接的问题三目运算求最大值得拼接问题三目运算求最大值得拼接，式子最外层不加括号问题欢迎各位朋友的到来（最后一条，求底层原理）~码农们，晚上好！今天在学习JavaScript过程中，对于三目运算符突发灵感，便对其原理由浅入深的解析。若有错误地方，请指示...
2019-08-27 22:49:35
1328
newFinance.zip
2020-03-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人