![](https://img-blog.csdnimg.cn/a1ab30d472a74d7783b7ef8f6c041eec.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端
文章平均质量分 82
持续更新前端笔记及相关知识点、开发遇到的问题及解决方案
乐玩程序
这个作者很懒,什么都没留下…
展开
-
什么是跨域?如何解决?跨域的产生原因、解决方法以及vue解决跨域问题
跨域,一个老生常谈的问题,但在此之前并没有实际遇到过这个问题,也就没怎么放在心上,然最近本地开发的时候遇到了,和想象中不一样,以为很快解决,还是花费了一定的时间去解决,现在把自己解决的方案进行总结,也避免大家之后采坑。原创 2021-12-06 14:57:28 · 2795 阅读 · 0 评论 -
利用 box-reflect、 conic-gradient 实现光影按钮
前言webkit-box-reflect 是一个美妙的属性,它让 CSS 有能力像镜子一样,反射我们元素原本绘制的内容。语法简介box-reflect:none | <direction> <offset> <mask-box-image>below可以是 below | above | left | right 代表下上左右,也就是有 4 个方向可以选。offset可以用长度值来定义倒影与对象之间的间隔。可以为负值;可以用百分比来定义倒影与对象原创 2021-11-18 15:09:37 · 201 阅读 · 0 评论 -
HTTP状态码详解-网络请求
前言当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。常见状态码200 - 请求成功301 - 资源(网页等)被永久转移到其它URL404 - 请求的资源(网页等)不存在500 - 内部服务器错误HTTP状态码分类状态码类别描述理解1XXInformation(信息性状态码)信息,服务器收到请求,需要请求者继续执行原创 2021-11-12 10:19:37 · 223 阅读 · 0 评论 -
input输入框,css3样式添加,伪类的应用,border-image属性的应用实例
input输入框属性值on 默认。规定启用自动完成功能。off 规定禁用自动完成功能。<input autocomplete="on|off">数组操作,css样式添加<ul class="user-name" v-if="detail.name"> <li class="alone-name" v-for="(name,index)...原创 2020-05-07 17:27:27 · 670 阅读 · 0 评论 -
矢量图,动态不规则的图像,svg路径填充动画效果
这个效果类似svg路径填充动画效果,之前项目需要实现这个效果,写了一个小demo,供大家参考借鉴直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg矢量图</title> <style> *{ padding: 0; margin:原创 2020-05-13 14:54:55 · 661 阅读 · 0 评论 -
日常开发遇到的小问题,JavaScript Array 对象,Es6,canvas等问题总结以及解决方案
日常开发遇到的小问题,总结以及解决方案常见JavaScript Array 对象Array.includes()和Array.indexOf()的异同常见JavaScript Array 对象Array.includes()和Array.indexOf()的异同Array.includes(searchElement,fromIndex)函数的用法...原创 2020-06-12 13:53:56 · 150 阅读 · 0 评论 -
window编码 解码;计时器;判断地址栏URL中是否包含某个参数this.$route.query; 判断机型; this.$refs['upload-input'].setAttribute,
1. 判断机型 <input ref="upload-input" name="upload-image" id="upload-image" type="file" accept="image/*" v-show="false">// window.navigator.userAgent.match(/Mi/)=='Mi' 判断是否是小米手机// this.$refs[...原创 2020-04-22 20:28:09 · 791 阅读 · 0 评论 -
Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的 汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/**具体实现**在 script 标签加载 Hanzi Writer只需将以下内容放入你的网页的头部,自己的,或者从官网查看js vue应用 watch: { form (val) { this.username = this.form.name.r...原创 2020-04-10 20:32:56 · 1365 阅读 · 3 评论 -
前端用css3使用:before和:after伪类元素实现loading效果,旋转的圆动画
css3部分<style>/*旋转loading*/ b:not(:required) { border-right-color: transparent; border-radius: 1.7rem; box-sizing: border-box; display: inline-block; position: relative;...原创 2020-04-08 20:47:35 · 1338 阅读 · 0 评论 -
节流和防抖函数 ---- 阻止事件持续触发的过程中那么频繁地去执行函数。
防抖函数(debounce)就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 这是debounce的基本思想对防抖进行了封装/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 */export function debounce(func,wait) { //触发事原创 2020-06-12 20:08:03 · 443 阅读 · 0 评论 -
canvas画圆,canvas圆环进度条效果,vue
代码如下<template> <section class="container"> <div class="canvas-box"> <canvas id="canvas" width="200" height="200"></canvas> <div class="firstname">...原创 2020-04-07 20:23:30 · 1501 阅读 · 0 评论 -
日常笔记二(对数据进行一些简单的操作,css3下滑动画)
**1. 对请求的数据加一个属性及属性值**getQuestions().then(res => { const data = res.data; let keyId = this.questionsList[key]; data.forEach(qs => { this.$set(qs, 'leave', false);//方法一 // qs[...原创 2020-04-29 14:39:07 · 150 阅读 · 0 评论