峨M峰-优快云博客

flex实现Sticky Footer布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .container { min-height: 100vh; display: flex; fl

2022-01-10 22:50:36 423

原创 JavaScript新特性

javascript部分常用新特性

2022-01-04 22:28:28 684

原创调用百度地图API获取经纬度(详细步骤)

js调用百度地图API获取经纬度

2021-12-21 23:16:25 19217

webpack5常用配置电脑中需要安装node环境，可以输入node -v指令查看node版本npm install init -y，node项目初始化，生成的默认的package.jsonnpm install webpack webpack-cli --save-dev根目录下创建webpack.config.js配置文件最新版本及详细配置见官网webpack文件目录1. webpack五大核心概念entry：以哪个文件为入口起点开始打包output：指示打包后的资源输出

2021-10-07 11:00:15 608

原创 sesstionStorage简单封装

sesstionStorage存取函数封装由于项目中常需用到本地storage存储，复杂的数组、对象等，每次都需要JSON.stringify()和JSON.parse()进行序列化、反序列化操作。sessionStorage只是简单的key/value形式不断地罗列，当存入的数据变多时显得杂乱无章，可以给数据分不同模块进行存取。const saveSessionStorage = function(key,val){ let person = sessionStorage.getI

2021-09-28 14:27:44 283

原创数组方法reduce的详解与使用场景

数组方法reduce的详解与使用场景语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])参数：callback执行数组中每个值的函数(如果没有提供 initialValue,则从数组的第二个值开始)，函数包含四个参数：accumulator:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或者是initialValuecurrentValue:数组中正在处理的元

2021-09-12 20:39:22 199

原创创建Ajax并用Promise封装

创建Ajax并用Promise封装1. 创建Ajaxlet xhr = new XMLHttpRequest(); xhr.open('get','xxxx',true); //open(请求方法,URL,是否异步) xhr.onreadystatechange = () =>{ //监听readyState值的变化 if(xhr.readyState === 4){ if(xhr.status >= 200 &&

2021-09-09 21:27:07 86

原创 javascript内置对象Date详解

javascript内置对象Date详解1. Date()与new Date()的区别Date()返回一个字符串(string)，内容为当前时间，没有日期对象方法，不支持参数new Date()返回一个日期对象(object)，是JavaScript的内置对象，可以调用内置方法，支持传递参数Date() //Mon Sep 06 2021 16:22:33 GMT+0800 (中国标准时间)new Date() //Mon Sep 06 2021 16:22:33 GMT+0800

2021-09-06 23:45:17 204

原创 javascript事件流详解

javascript事件流一、事件的级别DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。1.DOM0 级处理事件将一个函数赋值给一个事件处理属性<body> <div></div></body><script type="text/

2021-09-05 13:21:35 286

原创 css中background常用属性详解

background常用属性详解background-color为元素设置背景颜色值描述color_name规定颜色值为颜色名称的背景颜色（比如 red）。hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。transparent默认。背景颜色为透明。inherit规定应该从父元素继承 background-color 属性的设

2021-09-04 13:39:27 571

原创 Number parseInt parseFloat之间的区别

Number 、parseInt 、parseFloat之间的区别1. NumberNumber()函数把对象的值转换为数字Number()看的是整体，如果一个参数值不能转换为一个数字将返回 NaN (非数字值)Number('123') // 123Number('12.3') // 12.3Number('12.00') // 12Number('123e3') // 123000Number('') // 0Numbe

2021-09-01 11:09:46 141

原创 null与undefined的区别

null与undefined的区别undefined原始值的初始，即未定义（undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义）经常出现的场景//1.已声明未赋值的变量let str ;console.log(str)//undefined//2.获取对象不存在的属性let str = {};console.log(str.name)//undefined//3.函数没有返回值function func (){}console.log(func())//

2021-08-29 18:10:32 80

原创深挖BFC(BFC是什么？怎么触发？如何解决常见问题？)

2021-08-27 00:12:14 144

原创 vue中.sync的使用详解

vue中.sync的使用详解1. 父子组件传值在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们需要在子组件内部改变props属性值并更新到父组件中，需要用到.$emit来传递属性值代码//===================================父组件<template> <div> &

2021-08-22 12:05:58 3146

原创 javascript实现防抖与节流

JS实现节流与防抖1. 防抖定义：在触发事件后，规定的事件内回调函数只能执行一次，如果在规定事件内又触发了该事件，则会重新开始计算规定事件1.1 非立即执行版事件触发 ->延时->执行回调函数。如果在延时中继续触发事件，则会重新进行延时。在延时结束后执行回调代码及思路function debounce(fn, delay) { let timer = null; return function() { // 清除已存在的定时器

2021-08-21 22:15:42 265

原创 vue项目配置代理解决跨域问题

Vue项目配置代理前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？在vue项目中如何利用代理解决呢？什么是跨域？JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。proxy代理

2021-08-19 09:37:07 648

原创 vue中mixin(混入)的使用方法

Vue中mixin（混入）的使用方法官方介绍概念：可以把多个组件共用的配置提取成一个混入对象官方文档位置定义一个混入对象(mixin/index.js)const myMixin = { data() { return { name: "xxxxx", age: 20 } }, created() { console.log('我是mixin'); },}exp

2021-08-16 15:55:39 196

原创 vue中插槽的使用方法

Vue中插槽的使用方法vue官网插槽介绍默认插槽使用方法：在子组件中使用slot标签进行占位，在父组件中给占位填充内容子组件<template> <div> <h1>我是标题：</h1> <slot></slot> </div></template><script>export default { name: "Son", data() {

2021-08-15 10:49:08 245

原创 vue项目配置路径别名

vue.config.js配置路径别名及具体使用方法配置代码module.exports = { configureWebpack: { resolve: { alias: { // '@': 'src' 内部已经配置了这个 'assets': '@/assets', 'components': '@/components', '

2021-08-13 08:50:21 223

原创 axios的基本使用方法

axios的基本使用方法与配置axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios特点基于promise的异步ajax请求库浏览器端/node端都可以使用支持请求/响应拦截器支持请求取消请求/响应数据转换批量发送多个请求客户端支持防御 XSRF网站地址官方网址中文文档安装方法html中引入：//Using jsDelivr CDN:<script src="https://cdn.jsdelivr.net/np

2021-08-11 21:31:00 1077

原创 css实现二级菜单

css实现二级菜单代码<!DOCTYPE html><html lang="zh"><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"> <style type=

2021-08-09 14:57:54 210

原创纯css绘制三角形

纯css绘制三角形HTML<!DOCTYPE html><html lang="zh"><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"> <style typ

2021-08-09 09:59:14 83

原创 css超出部分省略（单行、多行，多种方法实现）

css超出部分省略效果（单行、多行，多种方法实现）HTML<p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>1.单行.text{ width: 200px; border: 1px solid #000000; white-space: nowrap; /* 控制元素不换行 */ overflow: hidden; /* p标签超出部

2021-08-06 23:26:55 883

原创 css实现扩大选中范围 (三种方法)

css实现扩大选中范围HTML<style type="text/css">  .content{ position: relative; width: 60%; height: 400px; margin: 0 auto; border: 1px solid orange; }  .clo

2021-08-06 11:22:17 1931

原创 vue实现轮播图

vue实现轮播图需求进入页面后开启轮播。左右按钮点击无缝衔接。右下角圆点与当前banner图对应展示,点击可控制图片展示。当前图片对应的圆点为黑色背景鼠标进入图片后轮播停止,移除图片后轮播启动。实现思路需要用到vue的生命周期函数mounted,在界面加载后启动定时轮播。要实现无缝衔接最重要的是做好点击最后一张图片向右和第一张图片向左的判断。currentIndex从0开始，当currentIndex++等于数组的长度时，说明当前在最后一张图片了，那么点击后就使currentI

2021-08-05 22:46:36 42912 30

weixin_46719229的博客

原创微信小程序在线预览PDF文件

原创微信小程序iconfont真机渲染失败

原创百度智能AI平台审核内容

原创 JavaScript实现dom元素转图片

原创微信小程序实现公告横向滚动

原创微信小程序实现堆叠轮播图组件

原创微信小程序地图控件Map的简单配置及使用

原创封装小程序轮播

原创 Git 撤销commit文件

原创 flex实现Sticky Footer布局