前端
ヽ错落不堪的年华。
这个作者很懒,什么都没留下…
展开
-
js处理时间日期函数
处理日期原创 2022-07-12 17:31:09 · 187 阅读 · 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 · 1465 阅读 · 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 · 152 阅读 · 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 · 87 阅读 · 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 · 95 阅读 · 0 评论 -
日历数据
Document原创 2021-01-14 17:01:49 · 154 阅读 · 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 · 131 阅读 · 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 · 160 阅读 · 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 · 202 阅读 · 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 · 140 阅读 · 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 · 225 阅读 · 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 · 109 阅读 · 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 · 146 阅读 · 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 · 119 阅读 · 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 · 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 · 98 阅读 · 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 · 122 阅读 · 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 · 139 阅读 · 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 · 124 阅读 · 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 · 188 阅读 · 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 · 100 阅读 · 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 · 105 阅读 · 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 · 350 阅读 · 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 · 95 阅读 · 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 · 1870 阅读 · 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 · 558 阅读 · 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 · 529 阅读 · 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 · 260 阅读 · 0 评论 -
后台返回的数据变树状数据处理
/* id: 不能重复 pid: pid代表父节点的id是 pid:0 代表是第一层的节点*/// 模拟数据let dataList = [ { title: 'f0', id: '1', pid: '0', }, { title: 'f01', id: '2', pid: '0...原创 2020-01-07 10:58:18 · 563 阅读 · 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 · 230 阅读 · 0 评论 -
jquery的$.ajax()属性及用法
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。4.asyn...原创 2019-12-09 11:28:14 · 428 阅读 · 0 评论 -
函数防抖和函数节流
函数防抖var inputs = document.getElementById("throttle")var values = inputs.value //获取文本框内的值var timerId = null // null = falsebutton.onclick = function() { //如果 timerId 有值就打断上一次的 setTimeout 执行 i...原创 2019-11-14 10:50:34 · 77 阅读 · 0 评论 -
Ajax轮询和长轮询——“定时的通过Ajax查询服务端”
Ajax轮询——“定时的通过Ajax查询服务端”。概念:轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。百闻不如一见,来段代码相信你一看就明白//前端<html><head> <title></title> <script src="http:/...转载 2019-11-14 10:21:38 · 312 阅读 · 0 评论 -
百度地图API -自定义折线
<!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-Compati...原创 2019-10-24 16:32:12 · 938 阅读 · 0 评论 -
jQuery 通过父元素获取动态生成的子元素的信息
// 动态生成数据 var result = ['customername1', 'customername2', 'customername3', 'customername4'] var html = null; for(var i = 0; i < result.length; i++){ html += '<li id = "'+ i +'">' + ...原创 2019-10-23 14:30:53 · 891 阅读 · 0 评论 -
localStorage本地存储的使用 和 json数据的转换
// 获取数据localStorage.getItem('键名')// 存储数据localStorage.setItem('键名','值');// 删除数据localStorage.removeItem('键名'); // json数据格式转换//把json数据格式转换为JavaScript对象或数组JSON.parse();// 将 JavaScript 对象或数组转换...原创 2019-10-23 09:41:16 · 936 阅读 · 0 评论 -
解决vue脚手架打包报错Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示 的问题
在webpack.base.conf.js里 添加 publicPath: process.env.NODE_ENV === 'production' ? './' +config.build.assetsPublicPath : './' + config.dev.assetsPublicPath这段代码...亲测完美解决!...原创 2019-10-12 17:39:34 · 1970 阅读 · 1 评论 -
根据自己对 Promise 的理解,实现一个Promise
Promise 有三种状态:Pending 初始态; Fulfilled 成功态; Rejected 失败态。function Promise(executor) { let self = this; self.status = 'pending'; //等待态 self.value = undefined; //成功的返回值 self.reason = und...翻译 2019-09-01 21:13:04 · 66 阅读 · 0 评论 -
vue 搜索结果
<tr v-for='item in search(keywords)' :key = 'item.id'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{ item.ctime | dateFormat() }}</td> <td> &...原创 2019-08-16 17:07:18 · 92 阅读 · 0 评论 -
js事件兼容代码
// 点击事件兼容代码function addEvent(elmt, type, func) { if(elmt.addEventListener){ elmt.addEventListener(type, func, false) }else if(elme.attachEvent){ elmt.attachEvent('on' + type,function(){ ...原创 2019-08-07 18:46:13 · 72 阅读 · 0 评论