![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
每日小知识
文章平均质量分 71
今天会下雨吗
多动脑思考吧
展开
-
前端解决跨域问题
前端解决跨域问题1. 为什么会出现跨域问题浏览器的同源策略浏览器规定非同源网站不能相互发送ajax请求假设A、B网站不同源,A向B发送ajax请求,其实请求时发送过去了,只不过浏览器拒绝了B发送过来的响应,然后报错同源:网站拥有相同的:协议、端口号、域名,三者有一个不一样就不是同源2. 解决办法JSONPJSONP只支持GET方法利用script标签的src属性src有发送请求的功能且不是同源策略的影响将非同源服务器端请求的地址写在src属性上<script src原创 2022-05-18 07:37:10 · 428 阅读 · 0 评论 -
每日小知识 - JS中的for...in...和for...of...
for...in...for...in...以任意顺序迭代一个对象(除了Symbol对象)的可枚举属性,包括继承来的可枚举属性for in是ES5标准,遍历key语法for (variable in object){}variable:在每次迭代时,variable会被赋值为不同的属性名object:非Symbol类型的可枚举属性被迭代的对象在Array数组中的使用for...in...不适合用于遍历一个关注索引顺序的数组原因:遍历得到的index索引是字原创 2022-04-13 09:28:45 · 917 阅读 · 0 评论 -
每日小知识(JavaScript+css实战篇)-- 消息动态弹窗
实现效果点击按钮出现带有遮罩层的弹窗弹窗的展开和关闭都带有动画效果实现 实现消息弹窗有三大部分:遮罩层+消息提示框;弹窗展现和关闭时的动画效果;关闭弹窗(或者做其他操作时)跳出的提示框完整代码实现消息提示框+遮罩层<style> /* 添加任务卡片 */ .dialog{ /* 遮罩层 */ width: 100%; height: 100%; background-color: rgba(0,0,0,0.85);原创 2021-12-24 16:39:07 · 962 阅读 · 0 评论 -
每日小知识(JavaScript+css实战篇)-- 消息动态弹窗代码部分
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>后盾人</title> <style> /* 添加任务卡片 */ .dial原创 2021-12-24 16:21:55 · 388 阅读 · 0 评论 -
每日小知识(css篇)-- 心动的感觉(css画会跳动的红心)
实现效果 心型缩小后回到原来大小实现步骤 有两种实现方法方法一:准备四个div,一个div作为容器,一个弄成正方形,另外两个画圆,通过transform: translate();来移动他们的位置,拼接成下面这个样子接下来给容器div设置transform: rotate(45deg),让他旋转45°,再去掉背景颜色设,然后把其他div的背景颜色都设置为red,这样就完成了一个心型。代码<style> * { padding: 0;原创 2021-12-22 15:17:04 · 628 阅读 · 0 评论 -
每日小知识(JavaScript篇)-- 实现instanceof
前言每个函数创建时都会有一个prototype属性,这个属性指向构造函数的原型对象构造函数的实例有一个[[prototype]]指针指向构造函数的原型对象在脚本中没有标准的方式访问[[Prototype]],但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__可以使用__proto__属性代表[[Prototype]]指针原型对象默认有一个constructor属性,指向与该原型对象相关联的构造函数。三者关系示意图:实现原创 2021-12-18 10:39:44 · 351 阅读 · 0 评论 -
每日小知识(css篇)-- 纯css实现响应式导航菜单
1. 实现效果当屏幕宽度小于300px的时候,只显示菜单按钮,点击菜单按钮显示菜单内容当屏幕宽度大于300px的时候,隐藏菜单按钮,显示菜单内容2. 具体实现使用到css的媒体查询@media和input表单的checkbox类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible原创 2021-12-16 14:17:52 · 1336 阅读 · 0 评论 -
每日小知识(JavaScript篇)-- 实现call()、apply()、bind()
前言 使用自己写的call()、apply()函数实现防抖:在input输入框中输入内容后,隔一段时间在进行操作(比如在控制台打印出input的内容),而不是每次输入都触发操作<body> <input type="text" name="" id=""> <script> const input = document.querySelector('input'); // 实现call()函数 Func原创 2021-12-15 16:32:29 · 1118 阅读 · 0 评论 -
每日小知识(JavaScript篇) -- 递归拼接树形结构和将树形结构转换为扁平数组结构
Array.push()会在数组尾部添加元素,并且返回数组长度打印Array.push()会得到数组长度var arr = ['age'];console.log(arr.push('name')); // 2要想打印添加元素后的数组,不能直接连带push()一起输出,直接console.log(arr)就行var data = [ {id: 1, parent: null, text: '菜单1', children:[ {id: 13, par..原创 2021-11-25 17:18:20 · 1184 阅读 · 0 评论 -
每日小知识(vue篇) - vue中的render函数
前言vue绝大多数情况下都是使用<template>模板来创建HTML的,但是也可以使用渲染函数render来生成HTMLrender函数的作用render函数其实就是用来代替<template>来生成html的render函数通过返回一个 createElement()方法生成template模板,这个方法是render函数自带的createElement参数传递给它的createElement()函数有三个参数,分别提供标签名,标签相关属性,标签内部的htm原创 2021-11-17 17:25:34 · 948 阅读 · 0 评论 -
每日小知识(小案例) - 实现输入框字体动态部分
效果图:具体代码首先,定义一个divkeyText用来存放数据在设置一个input输入框,使用绝对定位,把keyText放到input输入框里css<style> .input_box{ position: relative; } input{ height: 24px; border: 1px solid #ccc; } .keyText{ position: abs原创 2021-11-15 14:34:29 · 240 阅读 · 0 评论 -
每日小知识(Vue篇) --- 全局注册组件
前言通常我们要实现这样一个功能:在App.vue中使用<h-button></h-button>App.vue<template> <div id="app"> <h-button></h-button> </div></template>就需要在App.vue中通过import引入h-button的文件路径,在使用components注册这个组件。<script>原创 2021-11-12 10:01:35 · 523 阅读 · 0 评论