自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 问答 (2)
  • 收藏
  • 关注

原创 js知识点学习笔记

计算机基础编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,最终得到结果的过程。计算机语言:指人与计算机之间的通讯的语言。计算机语言分为机器语言,汇编语言、高级语言。汇编语言只是指令采用英文缩写和指令符,更容易识别和记忆。高级语言:包括c语言、c++、java、c#、php、javascript等。编程语言有很强的的逻辑和行为能力,是主动的,标记语言(html)不用于向计算机发出指令,常用于格式化链接,是用来被读取的,是被动的。计算机硬件(输入设备

2023-03-14 13:51:02 584 1

原创 浅谈浅克隆和深度克隆复杂数据类型的数据

浅克隆浅克隆可以把源对象上的数据复制到目标对象上去,对于源对象上简单数据类型可以完全复制,对于源对象上的复杂数据类型则复制的是引用地址

2022-05-25 10:18:18 219

原创 前端图片转成base64并压缩的实现方案

图片转base64方案

2022-05-16 18:30:15 2854 3

原创 h5针对移动端适配问题

h5适配移动端

2022-05-16 17:46:41 423

原创 微信小程序里面嵌套的h5使用微信sdk配置踩坑

小程序嵌套h5使用微信sdk接口

2022-05-16 17:25:28 2691

原创 浅谈vue项目的优化

一、静态图片压缩通过配置webpack,安装image-webpack-loader插件来压缩图片 chainWebpack: config => { //开启图片压缩 config.module.rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader')

2022-05-16 16:44:54 341

原创 解决嵌套在小程序中h5页面的缓存问题

针对微信小程序中嵌套的web-view页面缓存清除方案框架技术: vue2方案一(1)方案:动态的给项目中的js和css资源文件加版本号或者时间戳,,在每次更新代码时更新js、css文件名,用户在加载页面时在引入文件名称变化时都会重新请求资源。这样就能实现清除缓存的目的。(2)实现:在vue.config.js文件中增加相关配置,在打包时给生成的js和css文件加上时间戳代码如下:const Timestamp = new Date().getTime()module.exports .

2022-05-16 14:56:32 5442

原创 前端生成pdf和word

生成pdf引入html2canvas和jsPDF插件调用html2canvaspdfdom是导出的页面最外成元素,a4纸的大小592.28*841.89px html2canvas(pdfdom, { padding: 0, width: 592.28 * 2, dpi: 192, scale: 2, // 页面缩放

2021-12-22 10:10:38 1153

原创 es6的promise语法理解学习

function getNum(num) { return new Promise((resolve,reject) => { setTimeout(() => { if(num < 10) { resolve(num * 2) }else { reject('数字大于10') } },100) })}f

2021-12-09 16:53:06 316

原创 用js实现百度热搜榜的动态的效果

实现效果html代码如下 <div class="box"> <ul> <li> <div class="imgbox"> <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/704d02b8f97781861dce050a22f8f970?x-bce-process=i..

2021-12-09 11:48:08 2011 1

原创 利用css3的3d旋转透视加动画做的一个骰子动态效果

实现效果代码 <div class="father"> <div class="son son1">1</div> <div class="son son2">2</div> <div class="son son3">3</div> <div class="son son4">4</div> <d..

2021-12-08 14:05:41 855

原创 canvas学习做一些记录

标签canvas标签用来初始出来一块画布,可以用来绘制处理图形getContext(“2d”)用来绘制2d图形var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');常用的api绘制矩形绘制填充一个矩形fillRect(x, y, width, height)绘制一个矩形的边框 strokeRect(x, y, width, height)清除指定矩形区域,

2021-12-06 15:07:52 298

原创 webpack打包学习

webpack安装`npm install webpack webpack-cli`webpack配置创建webpack.config.js配置文件 const path = require('path') module.exports = { mode: 'development', // 打包模式,生产模式压缩,开发模式不压缩代码 entry: './main.js', // 入口文件 o

2021-12-03 11:34:43 111

原创 数组的一些操作方法学习概括

数组的基本操作创建数组字面量创建let arr = []new 一个数组 let arr = new Array()数组常用方法isArraylet arr = []let isArr = Array.isArray(arr)console.log(isArr) // trueinstanceof let istrue = arr instanceof Array console.log(istrue); // truejoin()将数组转化

2021-11-18 14:44:15 200

原创 通过定位和css3里的transform实现鼠标经过卡片动态滑动的效果

实现效果html页面<body> <div class="box"> <div class="item"> <div class="hover"> hello </div> </div> <div class="item"> <div class..

2021-11-17 11:23:52 538

原创 使用es6的class类写的todos小案例

案例只有添加和删除以及本地存储功能,利用es6class封装了一个功能类<div class="box"> <button class="deleteBtn">删除</button> <input type="text"> <button class="addBtn">添加</button> <ul class="todos"> .

2021-11-10 17:09:46 742

原创 实现h5的拖放盒子的功能并且交换元素的位置

<div id="box1" ondragover="allowDrop(event)" ondrop="drop(event)"> <!-- draggable设置可拖放 ondragstart拖动什么 --> <img src="video/school.gif" alt="" draggable="true" id="img1" ondragstart="drag(event)"> </div> <!-- ondragover

2021-11-10 13:36:53 662

原创 实现vue大数据全屏和退出全屏操作

一、封装设置全屏和退出全屏的函数:设置全屏setFullScreen() { let el = document.documentElement; let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen if (rfs) { // typeof rfs !=

2021-11-10 10:22:48 492

原创 实现图片上传和预览以及多图上传

前言关于图片上传方法采用的是创建FormData对象处理文件数据和表单数据预览图片 function upload(th) { var file = th.currentTarget.files[0] // 创建文件读取对象 var reader = new FileReader() reader.readAsDataURL(file) // 图片预览 reader.onload = function (res)

2021-08-26 15:11:23 671

原创 关于数据可视化的大小屏自适应和缩放的问题

方案一通过设计图的尺寸来写页面,按大屏为宽度1920的设计图来说,页面的宽高完全按照设计图的尺寸来写,通过设置盒子的zoom值来实现大小屏自适应。html页面:<body> <div id="container"> <div class="item"> <div class="left"> </div> <div class="middle"&

2021-08-26 14:38:55 1895

原创 js基础知识总结

JsJS语法数组 字符串函数 作用域对象内置对象DOMBOM本地存储JS高级正则表达式​闭包递归ES6新增JS语法1.基础数据类型变量就是装数据的容器,是在内存中申请存放数据的空间,变量的数据类型只有程序在运行过程中,根据等号右边的值来确定的。js是动态语言,变量的数据类型是可以变化的。js数据类型分为简单数据类型,字符型。布尔型。isNaN()用来判断变量是否是非数字。字符串string单引号 ;通过length属性检测字符串长度;变量和字符串相连引引加加bo

2021-08-22 14:25:27 215 1

原创 mongodb数据库的使用方法

数据库下载下载地址:https://www.mongodb.com/download-center/community开启数据库在命令行工具中运行net start mongodb即可启动MongoDB,否则MongoDB将无法连接数据库的连接const mongoose = require('mongoose');// 数据库连接 27017是mongodb数据库的默认端口mongoose.connect('mongodb://localhost/playground', {.

2021-08-17 11:38:28 196 1

原创 NodeJs基础知识的学习笔记

服务器基础1.网站组成:客户端和服务器端。2. 客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。3. 创建web服务器: // 引用系统模块 const http = require('http'); // 创建web服务器 const app = http.createServer(); // 当客户端发送请求的时候 app.on('request', (r

2021-07-30 15:02:19 419

原创 gulp基于node的前端构建工具

gulp插件:gulp-htmlminhtml文件压缩gulp-csso 压缩cssgulp-lessless语法转换gulp-file-include 公共文件包含gulp-babel javascript语法转换es6转换为es5gulp-uglify压缩混淆javascriptbrowsersyncl浏览器实时同步const gulp = require('gulp');const htmlmin = require('gulp-htmlmin');const csso = r

2021-06-10 11:15:38 150 1

原创 记录vue生命周期函数created、mounted和使用$nextTick区别

<body> <div id="app"> <div class="box" v-cloak>{{text}}</div> <div class="box1"> box1 </div> </div> <script src="./vue.min.js"></script> <script> var vm = new Vue({ el: '#app',

2021-06-03 08:15:50 1588 3

原创 前端实现文件流和json数据的导出功能

// 实现导出功能 $(".excelOut").click(function () { var xhr = new XMLHttpRequest() var params = "" for (var key in info) { if (info[key] instanceof Array) { if (info[key].length) { info[key].forEach((item) =&gt.

2021-03-16 11:37:17 485

原创 关于element-ui的table合并单元格的问题

第一列中第二行以后的行是需要合并的,el-table 提供了一个 span-method 属性,用于传入合并单元格方法,在里面可以根据 rowspan、colspan 合并行或列第 2、3、4 列需要改变表格 border,需要使用 /deep/ 修改 element 默认的颜色,使用 nth-child、first-child 等找到对应的行或列,修改border<template> <div class="table-test"> <el-table..

2020-12-29 20:36:57 1270

原创 解决css头部导航栏固定,主体内容铺满屏幕,左侧侧边栏固定高度,右侧内容高度自适应

头部固定高度,主体内容高度设置100%,是根据父元素实际高度决定的,这样会多出一部分高度,解决代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t

2020-11-30 11:18:22 5382

原创 CSS实现需求的重要知识点

1.文本下划线text-decoration: nono 无underline 下划线overline 上划线line-through 贯穿线2.子盒子在父盒子中水平垂直居中水平垂直居中:使用定位加边偏移和margin实现。使用定位加transform实现。使用display:flex,justify-content:center,align-items:center实现。3.溢出文字省略号显示溢出的文字省略号/1. 先强制一行内显示文本/white-space:

2020-10-16 14:58:03 1908

原创 React学习笔记记录

React特点:声明式编码组件化编码支持客户端和服务器端的渲染高效单向数据流高效原因:操作虚拟DOM.DOM Diff算法,最小化页面重绘。导入的相关库文件:react.js, react-dom.js, babel.min.jsjsx全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法: XML+JS作用: 用来创建react虚拟DOM(元素)对象js中直接可以套标签, 但标签要套js需要放在{}中在解析显示j.

2020-10-10 16:58:25 189

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除