ヽ错落不堪的年华。-优快云博客

原创 js处理时间日期函数

处理日期

2022-07-12 17:31:09 245

原创解决H5在移动端软键盘弹出时底部fixed定位被顶上去的问题

vue解决方法<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 1586

原创 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 219

原创 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 147

原创截图

<!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 160

原创 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 142

原创切片上传

<!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 162 2

原创日历数据

Document

2021-01-14 17:01:49 204

原创移动端手指事件

<!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 181

原创实现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 224

原创 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 282

原创 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 210

原创 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 1155

原创 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 299

原创一盏茶的时间，快速捕获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 176

原创图片懒加载

<!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 201

原创那些你总是记不住但又总是要用的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 186

原创防抖和节流的封装

防抖对于频繁触发操作，只识别一次/* * @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 258

原创 GIT的使用

版本控制系统理论知识GIT:分布式版本控制系统1.版本控制系统开发中我们把每一次修改都有效的进行记录（记录成一个版本），后期如果需要回退到原有的有个版本或者是用当前的和某一个版本进行比较，都可以有效的进行管理。常用的版本控制系统：SVN（集中式）/ GIT（分布式）2.分布式和集中式管理系统的特点分布式分布式就是把每个开发者的本地客户端都是一个完整的创库，都能记录历史版本信息，这样不需要联网，我们也能生成历史记录，也可以快速回退到某个版本集中式所有的历史版本都是在

2020-08-22 19:13:25 202

原创 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 159

翻译 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 158

原创 vue插槽的使用

默认插槽父组件// 父组件<div>// 调用子组件<slotOne1> <p style="color:red">我默认插槽内容</p></slotOne1></div>子组件Vue.component('soltOnel',{ template:` <div>我是子组件</div> // 显示插槽内容 <slot></slot&gt

2020-08-12 16:00:49 173

原创 react-8-react-redux

react-redux需要配合redux一起使用安装reac-reduxnpm install react-reduxreact-redux是专门为react项目封装的redux处理库，简化redux在组件中的应用代码Provider 组件把store挂载到祖先元素的上下文中，方便后期后台组件的调用import {Provider} from 'react-redux'ReactDOM.render( <Provider store={store}>

2020-08-02 22:05:29 207

原创 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 187

原创 react-6-6.复合组件,组件通信

父传子class Test extends React.component{ reder() { let {title} = this.props return ( <h4> {title} <h4/> ) }}// 父组件ReactDOM.render(<> <Test title = {'帅子'}/></>,document.getElementById('

2020-07-28 22:17:27 111

原创 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 107

原创 react-4-组件生命周期

组件生命周期初始化componentDidMount() {}更新componentDidUpdate() {}卸载componentWillUnmount() {}

2020-07-28 22:16:23 98

原创 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 232

原创 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 130

原创 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 140

原创对象转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 628

原创 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 1545

原创 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 128

原创 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 420

原创 javascript动画封装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...

2020-03-16 13:56:40 130

原创 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 1931

原创前端解决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 604

原创 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&gt...

2020-02-14 14:14:53 478

原创响应式布局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 577 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 291

element.zip

空空如也