_小婷子-CSDN博客

原创使用minmap地图缩放

鼠标单击实现以该点为原点进行缩放开发文档中没有找到对应API，有把该点设置为中心点进行缩放的API通过阅读源码（粗略），发现有一个属性around:[lat, lng]使用API：map.easeTo({center: [lat, lng],//把该点设置为中心点around:[lat, lng]//以该点为原点zoom: 14,//缩放比例duration: 2000,});...

2021-11-09 16:07:27 153

sort1.按照一个属性比较大小 let arrOne = [ {id:1,name:'Alice',age:0}, {id:3,name:'Gelol',age:20}, {id:2,name:'Yblh',age:18} ]; //props(要比较的属性名) //rev(true:正序 false:倒序) const sortOne=(props,rev)=>{ if(rev == undefined){ rev = 1;

2021-10-22 10:57:06 288

原创用node安装简易的服务器

执行指令：npm init -ynpm install express --Snpm install -g nodemonnodemon index.jsindex文件里加如下：var express=require('express');var app=new express();/*app.use((req,res,next)=>{ res.append("Access-Control-Allow-Origin","*"); res.append("Access-

2021-07-15 10:36:32 75

原创 React脚手架搭建

搭建脚手架1.全局安装：npm i -g create-react-app2.创建项目：create-react-app hello(项目名)3.进入文件目录：cd hello4.npm start //启动这个项目目录下面的主要文件/public/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>reac

2021-07-14 17:32:14 493

原创学习React

React 基础案例1.先引入三个包：react.development.jsreact-dom.development.jsbabel.min.js2.创建一个容器3.创建虚拟DOM，渲染到容器中<body>  <div id="test"></div></body><script src="https://cdn.stat

2021-07-14 15:51:44 179

原创滚动分页需满足条件

body滚动//滚动离顶部的距离var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动的总高度var documentScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;//浏览器窗口的高度(页面可见高度)var getWindow

2021-06-07 14:22:37 469

原创 CSS变量

一、变量的声明变量前面加：–body{ --bgColor:red}注：变量名大小写敏感，代表不同变量二、读取变量使用var()函数/*根元素全局都可访问*/:root{ --bgColor:red}body{ background:var(--bgColor)}/*如果变量未申明,可在var()的第二个参数加默认值*/div{ color:var(--myColor,red)}注：变量值只能用作属性值，不能用作属性名js操作css变量//设置变量：setP

2021-05-27 17:44:26 401

原创 js实现call，apply，bind

js实现callFunction.prototype.myCall=function(context,...params){ if(context===null || context===undefined){ context=window; }else{ context=Object(context) } const key=Symbol(); context[key]=this; const result=context[key](...params); delete conte

2021-05-10 18:31:43 66

原创 HTTP和HTTPS

HTTP超文本传输协议**HTTP：**通信使用明文，通信内容可能被挟持监听或篡改；无法证明保温的完整性，可能遭遇篡改；不验证通信方身份，可能遭遇伪装，**HTTPS：**保证数据的安全性(加密明文)，完整性，身份验证。HTTPS=HTTP+SSL 在http上建立SSL加密层，并对传输数据进行加密，是http协议的安全版HTTP(应用层)是和TCP(传输层)直接通信的HTTPS先和SSL通信，在由SSL和TCP通信SSL=对称加密(用同一方法进行加密解密)+非对称加密(用私匙加[解]密，数据摘

2021-04-29 10:27:15 141 2

原创网络是怎么连接的

浏览器->网络：将数字信息搬运到指定目的地->web服务器思路：将数字信息分割成一个一个得小块，然后装入一些被称为‘包’的容器中运送浏览器：具备多种客户端功能的综合性客户端软件，根据url不同，访问的服务器,协议也不同，例如http访问Web服务器使用http协议 ftp就访问FTP服务器使用ftp协议URL：https://www.baidu.com/——》https就是协议 //后面的www.baidu.com就是Web服务器名 /后面就是其他路径名，默认index.html或de

2021-04-27 17:05:48 560

原创正则表达式

1.匹配啥匹配a字符，直接是：/a//a/.test("javascript") //true/a/.test("jscript") //false匹配以a开头的，加上元字符^（开始位置标识）,写成：/ ^a //^a/.test("javascript") //false/^a/.test("abc") //true以a结尾的，加上元字符$（结束位置标识），写找：/ a $//a$/.test("javascript") //false/a$/.test("cba")

2021-03-22 18:25:29 420

原创陌生又熟悉的CSS属性

实现三角形 <div class="top-triangle"></div> <style> .top-triangle{ width:0; height:0; border:20px solid transparent;/*边全部设为透明*/ boder-bottom-color:red;/*相反方向设为自己所需颜色*/ } </style>单行文本超出显示省略号 <div class="single.

2021-03-22 16:37:39 375

原创 BFC：块级格式上下文

MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。常见的布局方案Box是CSS的布局基本单位普通流(常规流)浮动流(float)定位流(绝对定位)BFC特性：1.相邻的margin会重叠Box会在垂直方向上依次排序，其中间距由margin决定，如果两个相邻的Box属于同一个BFC，那么相邻的margin会重叠。解决：将每个都变成BFC，即可消除margin坍塌现象。<div class="box">

2021-03-22 14:33:53 73

原创 JSON.stringify()的使用

1.实现数组扁平化const arr=[1,2,3,[4,5,[6,[7,8]]]]//arr.flat(Infinity)//arr.join().split(',')//arr.toString().split(',')

2021-03-22 09:43:35 325

原创 CSS是如何工作的

Level1：CSS属性的默认样式—— 给所有 CSS 属性创建默认值eg:（默认属性） position:static; top:auto; left:auto; right:auto; bottom:auto可查看CSS属性的初始值：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#specificationsCSS属性的继承行为：文本类型：font-family、font-size、color、text-align

2021-03-02 15:07:22 149

原创搭建本地数据接口——JSONPlaceholder使用

JSONPlaceholder官网：http://jsonplaceholder.typicode.com/GitHub网址：https://github.com/typicode/jsonplaceholder全局安装json-server——>npm install -g json-server创建文件夹(jsonserver),并切换到该目录——>npm init 一直回车npm install json-server --save打开jsonserver文件下的packag

2021-02-26 14:41:01 458

原创记一道面试题

2021-02-19 18:25:49 84 1

原创解决小程序用picker-view默认有上下边框

项目场景：小程序用picker-view默认有上下边框解决方案：用伪类 <picker-view indicator-class='picker-selected'></picker-view>.picker-selected{ position: relative;}.picker-selected::before{ content: ''; position: absolute; top: 0px; border: none;}.pick

2021-01-29 18:01:54 1077 2

原创小程序学习

MVVMM:Model->dataV：ViewVM:ViewModel1.view:类比html的div和p2.text类比html的spanselectable:长按选中decode：可以转义字符3.button：type:primary(绿色)/default(灰色)/warn（红色）form-type：submit/reset //在form表单open-type：getUserInfo/getPhoneNumber/contact（联系客服）绑定事件： b

2021-01-27 09:28:46 198

原创全局监听由事件引起的页面高度变化

页面有很多点击事件，导致页面高度发生变化，可以监听到页面的高度变化可用于iframe嵌套页面，父页面获取子页面的高度<div id="hd-main"></div>window.onload = function(){ var dom = document.getElementById("hd-main");//绑定最外面的div var MutationObserver = window.MutationObserver || window.WebKitM

2021-01-08 17:53:55 294

原创 postMessage跨域

子——>父子级：var mes={}window.parent.postMessage(mes, ‘*’)父级：window.addEventListener(‘message’, (event) => {const op = event.dataconsole.log(11,op)})父——>子父：window.οnscrοll=function(){document.getElementById(‘container’).contentWindow.postMe

2021-01-08 17:37:48 84

原创用Echarts画力导向图，节点文字随鼠标缩放而缩放

项目场景：用Echarts画力导向图，节点文字随鼠标缩放而缩放解决方案：用原生函数getZr()或_zr()实现，例子如下:this.nodes=[],//节点数据this.links=[];//边数据let fontSize=12;//初始化字体大小let myForce = echarts.init(document.getElementById('myForce'));let option={ title:{ show : true, text:'

2021-01-08 14:45:43 2014 2

原创后端返回乱码文件流，前端Ajax请求下载

项目场景：后端返回乱码文件流，前端Ajax请求下载问题描述：使用ajax请求加参数xhrFields: {responseType: "blob ",}报错，还没找到原因。。。最后使用原生请求，但是原生请求只能发送字符串，需要向后端传对象解决方案：用FormData把对象参数处理成字符串 let data={id:1,name:2} let formData=new FormData(); for(let k in data){ formData.append(k,da

2021-01-08 10:57:14 1387 2

小婷子的博客

原创 SQL基础