![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 57
ZXH0122
越努力越幸运,加油!
展开
-
头部进度条随滚动轴变化而变化
【代码】头部进度条随滚动轴变化而变化。原创 2023-08-28 09:35:15 · 80 阅读 · 0 评论 -
查找多层数组对象中是否存在某项值(key)
查找多层数组对象中是否存在某项值(key)原创 2023-02-17 09:41:31 · 716 阅读 · 0 评论 -
10 个很棒的 JavaScript 字符串技巧
js字符串 小技巧原创 2023-02-15 14:22:03 · 323 阅读 · 0 评论 -
一些常见的移动端适配方案,你了解吗?
长健的移动端适配方案原创 2023-02-03 15:05:38 · 1828 阅读 · 1 评论 -
网站快速变黑白灰色的方法,沉痛悼念!
一般在全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天小编就说说,通过几行简单的代码,来实现这个功能。原创 2022-12-26 10:56:09 · 262 阅读 · 0 评论 -
设置button的loading属性且使用定时器2秒后移除
设置button的loading属性且使用定时器2秒后移除原创 2022-11-02 10:23:17 · 853 阅读 · 0 评论 -
汇总——前端UI框架
前端UI框架转载 2022-09-02 11:27:57 · 5808 阅读 · 2 评论 -
return的用法是什么?若用在for循环中,还会执行下一次循环吗?
return的用法是什么?若用在for循环中,还会执行下一次循环吗?原创 2022-07-04 10:26:27 · 9982 阅读 · 0 评论 -
循环tab且下面的数据(修改)不相互影响
循环出来的tab,且修改tab下的内容不会相互影响原创 2022-06-30 10:55:22 · 239 阅读 · 0 评论 -
10 个web前端开发者都应该知道的提升工作效率的网站
开发应该知道的 提升效率的网站原创 2021-12-15 14:54:07 · 163 阅读 · 0 评论 -
vue2.0 开发一定用得着的
1、$nextTick: 用于延迟执行一段代码,当你需要操作dom时,将dom操作的js放在this.nextTick()的回调函数中。// $refs this.$nextTick(() => { this.$refs['form'].resetFields()})2、watch 监听watch: { currentCode(val, oldVal){//普通的watch监听-一般用于字符串、数值、布尔 console.log("currentCode:原创 2024-05-23 14:00:00 · 359 阅读 · 1 评论 -
localStorage和sessionStorage之间的区别
1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。3、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。4、sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。原创 2021-02-23 21:00:00 · 304 阅读 · 0 评论 -
web前端学习资源清单(持续更新)
1.推荐团队博客推荐团队w3schoolw3cplus前端观察腾讯Web前端Alloy团队qq前端月报淘宝前端团队fed推荐博客汤姆大叔博客张鑫旭博客阮一峰博客廖雪峰官网牧云云博客前端小智小胡子哥的个人网站Jerry Qufouber github木易杨 github(前端进阶系列)xiaozhi github (小智GitHub博客)境枫博客(语雀)2.推荐文章教程资源清单守候:个人分享–web前端学习资源分享前端学习笔记总结清单,应有尽有前端最实用书签【转载 2021-02-22 20:38:57 · 998 阅读 · 0 评论 -
git拉取其他分支代码
git clone -b 分支名称 git@gitee.com:Lu-Sc/Travel.git就是这样操作的啦,你学会了吗?原创 2020-12-22 14:29:14 · 643 阅读 · 0 评论 -
javascript计算1-10000中0出现的次数,怎么写?
一个小算法题:用javascript计算1-10000中0出现的次数,我用循环写了一个方案,代码如下:function getZeroCount(num) { let count=0; let regObj=/0/g; for (let i=1;i<=num;i++){ let str=''+i; let match=str.match(regObj); count+=match==null?0:match.length;原创 2020-12-18 11:18:52 · 686 阅读 · 2 评论 -
vue同级组件间传值
1,1,在main.js同级 目录下新建eventBus.js文件import Vue from "vue"export default new Vue()2,在组件a中传出值首先我们需要引入我们新创建的eventBus.js文件,通过$emit传值<template> <div class="A" @click="gotoB()"> <h1>AAA</h1> <p>我是A中的a:【 {{ a }} 】</p&原创 2020-12-15 20:31:29 · 1556 阅读 · 3 评论 -
两个页面传参实现的几种方法
1.使用window.name:a页面:<script>window.name='123';</script>b页面:<script>console.log(window.name);</script>2.使用h5中的localStorage:a页面:<body><a href="22.html">defsdfg</a> <script> window.localStorage.n原创 2020-12-07 19:56:51 · 866 阅读 · 0 评论 -
v-model的原理+使用方法
一:什么是v-model?v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。二:原理v-model其实是一个语法糖背后包含两个操作v-bind动态绑定一个value属性v-on给当前元素绑定input事件也就是说以下两段代码等价<input type="text" v-model="message"><!--等同于下面--><input type="tex原创 2020-12-05 16:31:32 · 3310 阅读 · 0 评论 -
Vue的路由实现:hash模式 和 history模式的区别
区别:hash模式:1.采用的是window.onhashchange事件实现。2.可以实现前进 后退 刷新。3.比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中, 对后端完全没有影响,因此改变hash不会重新加载页面history模式:1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法原创 2020-12-02 20:12:34 · 168 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles" @click="getDescribe(article.id)">methods:方案一:通过路径 getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`原创 2020-11-24 18:38:30 · 538 阅读 · 0 评论 -
params传参和query传参
转载于:潇潇雨歇https://blog.csdn.net/lan128lan/article/details/81126470写下前面:当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。 注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失转载 2020-11-19 14:54:00 · 1658 阅读 · 0 评论 -
vue 全家桶
Vue全家桶:vue + vue - router + vuex +axiosVue是一套用于构建用户界面的渐进式框架,和React,都自称自己只关注视图层在文件中引入vue如:<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script>可在 https://www.bootcdn.cn/vue 中找到相关版本的 js看一个Demo:此时,如果页面显示了 Hello Vue原创 2020-11-12 16:30:28 · 182 阅读 · 0 评论 -
vue子传父、父传子
子传父vue子传父使用$emit传值子组件:<template> <div> <button @click="toParent">点击传到父级</button> </div></template><script>export default { name: 'child', methods: { toParent () { t原创 2020-11-10 18:57:00 · 398 阅读 · 0 评论 -
http和https有什么区别?
http协议和https协议的区别:传输信息安全性du不同、连接方zhi式不同、端口不同、证书申请方式不同。一、传输信息安全性不同1、http协议:是超文本传输协议,信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息。2、https协议:是具有安全性的ssl加密传输协议,为浏览器和服务器之间的通信加密,确保数据传输的安全。二、连接方式不同1、http协议:http的连接很简单,是无状态的。2、https协议:是由SSL+HTTP协议构建的可进行加原创 2020-10-29 20:08:15 · 429 阅读 · 0 评论 -
js里的那些常见的面试题
嗨喽码农们:又见面了,继上次分享的面试题,今天再为大家分享一些关于js 那些面试常见的问题。希望对大家有帮助,喜欢的可以点赞收藏起来。五、小心javascript自动插入分号机制在《JavaScript语言精粹》这本书里,这个“自动插入分号”机制被划入到了JavaScript的毒瘤里面,与之并列的前面的全局变量。有些时候,不合时宜地插入分号,会导致严重的后果。 比如一个return语句要正确返回一个值,这个值的表达式的开始部分必须和return位于同一行。今天,我们就来聊聊这个知识点,看下面的代码原创 2020-09-17 09:19:42 · 150 阅读 · 0 评论 -
页面小于640时,切换另一个页面
var qwid=screen.width;if(qwid<640){ window.location="http://m.baidu.com";}原创 2020-09-15 09:50:13 · 151 阅读 · 0 评论 -
今天分享一些 js 面试题
一、问:使用 typeof bar === “object” 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个陷阱?尽管 typeof bar === “object” 是检查 bar 是否对象的可靠方法,令人惊讶的是在JavaScript中 null 也被认为是对象!因此,令大多数开发人员惊讶的是,下面的代码将输出 true 控制台:var bar = null;console.log(typeof bar === "object"); // logs true!只要清楚这一点,原创 2020-09-13 16:06:13 · 153 阅读 · 0 评论 -
jQuery 效果 - stop() 方法
定义和用法stop() 方法停止当前正在运行的动画。语法$(selector).stop(stopAll,goToEnd)参数描述stopAll可选。规定是否停止被选元素的所有加入队列的动画。goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2020-09-08 19:39:36 · 592 阅读 · 0 评论 -
jQuery函数attr和prop的区别
相比baiattr,prop是1.6.1才新出来的,两者从中文意思理解,都是获du取/设置属性的zhi方法(attributes和properties)。只是,window或daodocument中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes。prop应运而生了。attr:描述: 获取匹配的元素集合中的第一个元素的属性的值。attr( attributeName )attributeName类型: String要获取的原创 2020-09-03 16:09:03 · 208 阅读 · 1 评论 -
阻止默认行为
$(function () { $("#aaa").click(function (event) { event.stopPropagation(); //1.停止事件冒泡,但是不会阻止默认行为 return false; // 2.阻止事件冒泡,也阻止了默认行为 event.preventDefault(); // 3.阻止默认行为,不阻止事件冒泡原创 2020-08-31 10:32:20 · 101 阅读 · 0 评论 -
最详细完整的flex弹性布局
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{ display: flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将原创 2020-08-26 16:20:20 · 319 阅读 · 2 评论 -
【开发小技巧】用HTML与CSS如何创建悬停折角纸叠效果?
折角折叠效果,在网站实际运用中也是非常多,当你将鼠标悬停在上面时,就会在某些网站上看到它的折角。在这里,我们仅用HTML与CSS来实现折角效果。以下内容将具体讲解如何创建这个效果。在本文中,我们将文章分为两部分,在第一部分中,我们将创建基本结构。在第二部分中,我们将装饰结构。首先,我们先使用HTML来创建一个转角折叠效果的结构。在HTML代码中,我们将使用div标记创建一个基本div,并为其指定一个类名。HTML代码如下:<!DOCTYPE html> <html lang="原创 2020-08-19 11:16:40 · 215 阅读 · 0 评论 -
雪花漫天飞——createDocumentFragment()方法
<!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" /> <titl原创 2020-08-18 14:41:39 · 143 阅读 · 0 评论 -
es6 扩展运算符 剩余运算符 ...
1 扩展运算符在ES6中。 三个点(…) 有2个含义。分别表示 扩展运算符 和 剩余运算符。数组展开function test(a,b,c){ console.log(a); console.log(b); console.log(c); } var arr = [1, 2, 3]; test(...arr); // 打印结果 // 1 // 2 // 3将一个数组插入到另一个数据中 var arr1 = [1, 2, 3]; var arr2原创 2020-08-17 15:06:49 · 135 阅读 · 0 评论 -
理解DOM事件流的三个阶段
流的概念,在现今的JavaScript中随处可见。比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流,都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说,流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种,分别是事件冒泡和事件捕获。在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型,即事件处理过程的三个阶段:捕获,目标,冒泡;(1)捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标原创 2020-08-14 16:47:33 · 648 阅读 · 0 评论 -
json的标准格式
现在越来越多的项目和开发插件等默认都会支持和使用json数据格式,作为数据保持、传输的一种方式。说是其中一种,就标示还有好多其他格式。比如:最多是xml。webservice的标准数据格式。不过由于json是JavaScript 对象表示法(JavaScript Object Notation),天生就对js支持很好,所以现在很多的ajax等都使用json,反而会更好处理一些。1、定义什么是 JSON ?1.JSON 指的是 JavaScript 对象表示法(JavaScript Object原创 2020-08-13 19:53:35 · 720 阅读 · 0 评论 -
JQ AJAX 超时问题 timeout
超时原因:1.网络不通畅。 2.后台运行比较慢(服务器第一次运行时,容易出现)超时结果:JQ中 timeout设置请求超时时间。如果服务器响应时间超过了 设置的时间,则进入 ERROR (错误处理)timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。超时解决方案:1.默认的timeout为0,代表永不超时2.尽量把timeout设置的大一点。坏处:使数据的加载变慢(貌似。呵呵)。3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如,可以原创 2020-08-12 20:05:29 · 643 阅读 · 0 评论 -
JS方式实现隐藏手机号码中间4位数
在前端开发中,遇到如下需求:隐藏手机号码,将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢?下面整理几种实现方式:1、使用正则:function geTel(tel){ var reg = /^(\d{3})\d{4}(\d{4})$/; return tel.replace(reg, "$1****$2");}//测试var tel = "17326453333"; console.log(geTel(tel));//173****33332、通过长度截取fu原创 2020-08-11 16:06:04 · 3322 阅读 · 0 评论 -
实用的 ES6 特性——九个
1、展开操作符顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。演示一下:let firstHalf = [ one , two ]; let secondHalf = [ three , four , ...firstHalf]; 这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写:let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i <fir转载 2020-08-09 13:38:42 · 110 阅读 · 0 评论 -
Vue::is特性详解和示例
今天在阅读Vue教程的时候,读到“解析DOM模板时的注意事项”这一节,看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签,这时候就要用is代替一下,让html语法符合规则验证。is属于指定要在内部使用的标签。文档链接:https://cn.vuejs.org/v2/guide/components.html教程里面是这么解释的:看完之后能感觉到就是想要把blog-post-row的内容放在table中的tr标签中,是通过:is特性来进行使用的。但是感觉不知道具原创 2020-07-28 10:05:59 · 384 阅读 · 0 评论