技术交流
关注
分享
扫一扫
ヽ错落不堪的年华。
这个作者很懒，什么都没留下…
展开
-
js处理时间日期函数
处理日期原创 2022-07-12 17:31:09 · 220 阅读 · 0 评论 -
解决H5在移动端软键盘弹出时底部fixed定位被顶上去的问题
vue解决方法<!--html部分--><div class="footer" v-show="hideshow"></div>// js 部分data(){ return { docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度 hideshow原创 2021-07-01 15:58:05 · 1508 阅读 · 0 评论 -
jsonp跨域封装
function jsonp(setting) { setting.data = setting.data || {} setting.key = setting.key || 'callback' setting.callback = setting.callback || function () { } setting.data[setting.key] = '__onGetData__' window.__onGetData__ = function (data) { s原创 2021-04-08 17:11:19 · 185 阅读 · 0 评论 -
css画三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-04-01 10:23:58 · 127 阅读 · 0 评论 -
截图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-02-26 14:24:43 · 118 阅读 · 0 评论 -
js操作Cookie
//设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + exp.原创 2021-02-19 11:05:55 · 124 阅读 · 0 评论 -
切片上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>upload</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body> <input t原创 2021-01-26 16:05:06 · 150 阅读 · 2 评论 -
日历数据
Document原创 2021-01-14 17:01:49 · 183 阅读 · 0 评论 -
移动端手指事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pa原创 2021-01-12 15:34:31 · 158 阅读 · 0 评论 -
实现div元素拖放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-原创 2021-01-12 09:22:59 · 206 阅读 · 0 评论 -
pc端拖拽图片上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m原创 2021-01-05 15:55:39 · 255 阅读 · 0 评论 -
pc端html5拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m原创 2021-01-05 15:19:22 · 192 阅读 · 0 评论 -
express框架内使用socket.io监控多个端口号
服务端app.js// 引入模块var express = require('express');// 实例化express对象var app = express();// app.js页面挂载socketrequire('./websocket/index');require('./websocket/ske');app.listen(5000, () => console.log('服务器正在5000端口号运行...'));socket监控多个端口配置./websock原创 2020-12-24 15:36:44 · 1104 阅读 · 0 评论 -
canvas图片压缩
<!DOCTYPE html><html> <head> </head> <body> <input type="file" id="upload"> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg']; // 限定图片文件类型 const MAXSIZE = 1024 * 1024 * 3;原创 2020-12-22 09:17:40 · 275 阅读 · 0 评论 -
一盏茶的时间，快速捕获JS中常用的方法
Arraynew Set（）用来对数组进行去重。const arr = [3,4,4,5,4,6,5,7];console.log(new Set(arr)); // {3,4,5,6,7}const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]sort（）对数组元素进行排序（改变原数组）。const arr = [3,4,4,5,4,6,5,7];console.log(arr.sort()) // [3, 4, 4, 4, 5, 5,原创 2020-09-27 17:04:45 · 151 阅读 · 0 评论 -
图片懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head>原创 2020-09-27 16:16:04 · 166 阅读 · 0 评论 -
那些你总是记不住但又总是要用的css
一、设置input 的placeholder的字体样式input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder原创 2020-09-27 16:09:52 · 163 阅读 · 0 评论 -
防抖和节流的封装
防抖对于频繁触发操作，只识别一次/* * @Params * func[function]: 触发的函数 * wait：识别频率 * immedate：默认多次操作，我们识别的是最后一次，但是immedate = true，让其识别第一次 */function debounce(func, wait = 1000, immedate = false) { let timer = null return function anonymouse(...params) {.原创 2020-09-05 16:31:44 · 231 阅读 · 0 评论 -
GIT的使用
版本控制系统理论知识GIT:分布式版本控制系统1.版本控制系统开发中我们把每一次修改都有效的进行记录（记录成一个版本），后期如果需要回退到原有的有个版本或者是用当前的和某一个版本进行比较，都可以有效的进行管理。常用的版本控制系统：SVN（集中式）/ GIT（分布式）2.分布式和集中式管理系统的特点分布式分布式就是把每个开发者的本地客户端都是一个完整的创库，都能记录历史版本信息，这样不需要联网，我们也能 生成历史记录，也可以快速回退到某个版本集中式所有的历史版本都是在原创 2020-08-22 19:13:25 · 181 阅读 · 0 评论 -
axios的封装
import axios from 'axios';import qs from 'qs'// 1.根据环境变量配置不同的地址switch (process.env.NODE_ENV) { case production: // 生产环境 axios.defaults.baseURL = 'http://api/xianwnag.cn'; break; case test: // 测试环境 axios.d原创 2020-08-15 16:23:44 · 141 阅读 · 0 评论 -
vue动态组件
<!DOCTYPE html><html><head> <title>Dynamic Components Example</title> <script src="https://unpkg.com/vue"></script> <style> .tab-button { padding: 6px 10px; border-top-left-radius: 3p翻译 2020-08-12 16:10:54 · 147 阅读 · 0 评论 -
vue插槽的使用
默认插槽父组件// 父组件<div>// 调用子组件<slotOne1> <p style="color:red">我默认插槽内容</p></slotOne1></div>子组件Vue.component('soltOnel',{ template:` <div>我是子组件</div> // 显示插槽内容 <slot></slot>原创 2020-08-12 16:00:49 · 162 阅读 · 0 评论 -
react-7-redux
redux// 安装npm install react - redux redux redux - logger redux - promise redux - thunk使用reduxindex.js// 引入reduximprot { createStort}from 'redux'// 创建公共容器 reducer是管理员const initialState = { title: '好好学习，天天向上', supNum: 0, oppNum: 0}原创 2020-07-28 22:17:56 · 162 阅读 · 0 评论 -
react-5-React-Hooks
React HooksREACT提供的HOOKS函数，目的是谁让；函数式组件能够拥有类似与类组件的一些效果=> useState在函数式组件中应用状态=> useEffect 拥有生命周期=> useReducer 让其能够向redux一样的管理状态...useStateimport React, {useState, useEffect, useRef, useReducer} from 'react';const Test = (props) => { //原创 2020-07-28 22:16:55 · 95 阅读 · 0 评论 -
react-4-组件生命周期
组件生命周期初始化componentDidMount() {}更新componentDidUpdate() {}卸载componentWillUnmount() {}原创 2020-07-28 22:16:23 · 91 阅读 · 0 评论 -
react-3-Props,State,Forms
通过 Props 传递数据 / 接受父组件传过来的值Props传过来的值是只读的不能改变父组件import React, {PureComponent} from 'react';import ReactDOM from 'react-dom';import Test from './test'; // 子组件const tags = ['恐龙', '足球小子']class App extends PureComponent { render() { return (原创 2020-07-20 22:03:45 · 217 阅读 · 0 评论 -
react-2-jsx
##JSX在jsx里面写 style 样式 需要 写成对象的形式才可以不能直接写 clsaa 需要写成 className//js代码 转换为 jsx 代码class App extends PureComponent { render() { return ( <div className="title"> // {} 内可以写任意javascript代码 </div> ); }}export d原创 2020-07-20 22:02:45 · 118 阅读 · 0 评论 -
react-1-开发环境配置
#React学习笔记MVC模型 / 单向数据绑定·Module: 用于存在数据view: 用于更新DOMController： 调用Module给view渲染使用MVVM模型 / 双向数据绑定Module: 用于存在数据view: 响应用户交互行为ViewModel: 可以理解为自动化调用的PresenterReact开发环境搭建 (脚手架)$ cnpm install -g create-react-app //=> 安装脚手架$ create-react-原创 2020-07-20 22:01:41 · 131 阅读 · 0 评论 -
对象转formdata键值对
/***** 方法封装 *****/function objToFd(obj, form, name) { const fd = form || new FormData() if (typeof obj !== 'object' || obj instanceof File) { fd.append(name, obj) return fd } const keyName = name ? name + '.' : '' for (const prop in o原创 2020-07-07 09:26:35 · 606 阅读 · 0 评论 -
mongodb笔记
安装mongodb官网下载安装包启动mongodb// 启动mongodb// mongod.exe --dbpath F:\mongodb\data / (data数据存放的位置)// 与mongodb建立连接新cmd窗口输入 mongo 命令mongodb基本命令//查看当前数据库列表shou dbs//查看当前操作的数据库db//切换到指定的数据库，如果没有会新建数据库use 数据库名称//显示当前数据库的所有集合(表)show collections//切换到表原创 2020-07-05 20:34:39 · 1533 阅读 · 0 评论 -
mysql笔记
mysql笔记开启mysql服务net start mysql;关闭mysqlnet stop mysql;连接数据库mysql -u root -p;创建数据库create datebase 库名 charset utf8;查看数据库show databases;进入数据库use 库名;删除库drop database if exists 库名;查看表的结构show create database test;导入SQL文件source sql文件地址原创 2020-07-05 20:32:45 · 118 阅读 · 0 评论 -
vscode代码格式插件- Prettier
vscode下载 Prettier 插件Prettier 官网在项目目录创建配置文件.prettierrc基本内容如下{ "eslintIntegration": true, "stylelintIntegration": true, "printWidth": 2000, "tabWidth": 2, "singleQuote": true, "semi": false}插件使用vscode上需要格式化代码的页面按下 shift + alt + f 快捷键进行代原创 2020-05-09 14:51:02 · 381 阅读 · 0 评论 -
javascript动画封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-16 13:56:40 · 117 阅读 · 0 评论 -
js递归遍历树形数据通过pid获取想要的节点信息
/*id: 子节点的pid,pid: 0代表顶级数据 父id相当于子数据的pidlabel: 信息children: 数组 子节点数据*/data = [{ id: 1, pid:0, label: '一中队', children: [{ pid: 1, id...原创 2020-03-09 11:42:54 · 1908 阅读 · 0 评论 -
前端解决url乱码问题?
A页面//设置要转码的信息var name = "中 文"; var t = encodeURI(encodeURI(name)); window.location =`test.html?name=${t}`B页面// 获取url信息的封装函数function getParam(paramName){ paramValue = "", isFound = !1...原创 2020-03-07 14:23:22 · 590 阅读 · 0 评论 -
js事件弹出层点击其它地方弹出层消失
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>...原创 2020-02-14 14:14:53 · 461 阅读 · 0 评论 -
响应式布局html字体设置和REM换算
// html字体随页面大小改变function computedREM() { let HTML = document.documentElement, winW = HTML.clientWidth; HTML.style.fontSize = winW / 750 * 100 + 'px' // 750设备宽度, 100字体大小}computedREM()win...原创 2020-02-07 14:09:43 · 554 阅读 · 3 评论 -
通过proxy和defineProperty实现v数据双向数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...原创 2020-01-29 14:48:54 · 283 阅读 · 0 评论 -
对象数组去重
/* * 数组内对象数据去重* arr 数组* type 相同的对象属性*/function Es5duplicate(arr,type){ var newArr = []; var tArr = []; if(arr.length == 0){ return arr; }else{ if(type){ for(var i = 0; i <...原创 2020-01-17 11:51:08 · 162 阅读 · 0 评论 -
使用postMessage来解决父子通信跨域
父向子通信A.htmlvar myframe = document.getElementById('myframe');//获取iframemyframe.contentWindow.postMessage({data:'parent'},'http://127.0.0.1:9999');//参数2是子页面的源（协议+主机+端口号）B.htnlwindow.addEventListen...原创 2020-01-06 17:34:42 · 261 阅读 · 0 评论