- 博客(40)
- 收藏
- 关注
RSS订阅原创 react开发高德地图，展示特定的行政区，并实现海量标注
1、官网：https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react2、NPM 安装 Loader3、功能需要申请加载地图相关的key和密钥，使用前读者需提前申请好。1、密钥的使用方式有多种，具体可以参考：https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode2、本人这里是通过明文的方式设置的，并不是很安全。
2023-05-12 15:54:35
872
原创 3D 旋转相册
最近事情不太多，想着练习一下3D动画（其实就是想做这个相册），各位想送女朋友礼物或者表白的小伙伴也可以动手做试试，或许有意想不到的效果也说不定，话不多说，进入正题。效果图：可以事先准备自己喜欢的图片，外层方块加内层方块共12张图片，代码量也不多，用到的也是些简单的3D样式。1、transform-style: preserve-3d; //设置元素的子元素是位于 3D 空间中2、通过rotate和translate实现正方体的六个面3、给包裹正方体的父元素设置动画旋转4、鼠标移
2021-08-25 16:28:47
682
2
转载 移动端布局之postcss-px-to-viewport（兼容vant）
转载：移动端布局之postcss-px-to-viewport（兼容vant）
2021-07-05 16:21:21
447
转载 sass文件的编译
//编译格式sass --watch input.scss:output.css --style compact//编译添加调试mapsass --watch input.scss:output.css --sourcemap更详细内容：sass文件的编译
2021-04-15 00:19:35
72
原创 鼠标自定义判断长按和短按
<!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-Compatible" content="ie=edge"> <title>Document</ti
2021-04-13 00:29:20
575
原创 js原生实现盒子连续拖拽
<!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-Compatible" content="ie=edge"> <title>Document</t
2021-04-13 00:23:35
122
原创 js鼠标点击右键自定义菜单的实现
<!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-Compatible" content="ie=edge"> <title>Document</t
2021-04-13 00:11:06
126
原创 js实现商品图片的放大
效果：结构：html:<!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-Compatible" content="ie=edge">
2021-04-12 23:53:21
183
原创 js原生实现城市联动
城市数据：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method="post"> 用户名:<input type="text" name="username" value="sish" /><br&g
2021-04-12 23:48:41
108
原创 js原生实现图片轮播
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="01-js-轮播图.css" /></head><body> <div class="lunbo"> <ul class="imgBox"
2021-04-12 23:34:30
46
原创 js实现双色球
这里涉及到闭包、函数自调用以及定时器<!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-Compatible" content="ie=edge"> <tit.
2021-04-12 23:30:03
272
原创 文章内容实现关键字搜索高亮标红
<!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-Compatible" content="ie=edge"> <title>Document</t.
2021-04-12 23:13:24
316
原创 用户注册及正则校验
<!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-Compatible" content="ie=edge"> <title>Document</t.
2021-04-12 23:05:41
214
原创 统计字符串出现的次数
<!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-Compatible" content="ie=edge"> <title>Document</ti
2021-04-12 22:54:52
48
原创 统计字符串的字节长度
<!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-Compatible" content="ie=edge"> <title>字节长度</title&
2021-04-12 22:51:47
310
原创 前端url参数截取
获取 url 中的参数1. 指定参数名称，返回该参数的值 或者 空字符串2. 不指定参数名称，返回全部的参数对象 或者 {}3. 如果存在多个同名参数，则返回数组function getUrlParam(sUrl, sKey) { sUrl = sUrl.toString(); let allUrl = sUrl.split("?")[1].split("#")[0]; if(sKey) {//指定参数名 var strs = allUrl.split("&a
2021-04-02 12:38:23
958
转载 HTTP请求方式中8种请求方法
转载：https://blog.csdn.net/weixin_42981419/article/details/86162244
2021-03-29 17:02:46
68
原创 vue使用全局过滤器格式化日期
<!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>vue-demo1&l
2021-03-26 18:49:36
209
原创 Cookie、sessionStorage、localStorage的区别
共同点：都是保存在浏览器端，并且是同源的Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不
2021-03-19 16:57:38
57
转载 vue常用的文本编辑器vue-ueditor-wrap
最近在写项目的时候用到富文本编辑器，在查了些资料后感觉这个还不错。链接地址：https://blog.csdn.net/qq_40180411/article/details/100149621
2021-03-10 16:28:41
242
原创 el-tree使用Scoped Slot自定义树节点的内容
Element为我们提供了树形控件el-tree,不过在开发的过程中有时需求原因，需要重新定义树节点的内容，刚好官网就为我们提供了Scoped Slot。下面具体来看下怎么用吧~<el-tree :data="trees" ref="treeList" node-key="tagId" :highlight-current="true" :default-expanded-keys="expandedkeys"
2021-03-10 16:08:20
7057
1
原创 vue前端跨域处理
原因：浏览器访问遵循同源策略，同源：协议/域名:端口 要相同，当访问非同源地址就会出现跨域问题。在vue中处理跨域的方法一般就是vue代理服务器proxy跨域。在vue.config.js中进行配置devServer: { // 端口号 // port: 8890, // 配置是否自动启动浏览器 open: false, // 是否启用https https: false, proxy: { // 代理 "/api": {
2021-03-10 12:24:00
2374
原创 后台管理系统实现多级菜单路由
在vue实现后台管理系统时一般都有一个固定的界面布局，往往都会有左侧sider为菜单路由，右侧分header信息和main内容的展示。下面是一种比较常见的后台系统布局。1、layout第一层路由视图<template> <el-container class="app-container"> <el-aside class="app-aside" :width="isCollapse?'60px':'200px'"> <router-li
2021-03-10 11:46:31
1135
原创 禁止微信内置浏览器调整字体大小影响前端界面布局
最近在开发微信落地页的时候遇到了微信端设置字体大小会影响前端的界面布局，原因是移动端页面开发都是用rem作为单位的，所以就找了些相关的解决办法。1.安卓手机禁止微信客户端修改字体大小(function() { if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') { handleFontSize(); } else { if (document.addEve...
2021-03-09 16:52:20
560
原创 取消冒泡和阻止默认事件
1、取消(停止)冒泡a) W3C标准 event.stopPropagation();但不支持 ie9以下版本b) event.cancelBubble=true; ie8及ie8以下可用2、阻止默认事件默认事件——表单提交（当表单中只有一个input_text框时,回车即被提交），a标签跳转，右键菜单等a) return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的b) event.preventDefault();
2021-03-08 16:43:50
152
原创 事件处理程序模型，事件的冒泡和捕获
1、事件冒泡结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）2、事件捕获结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）// 将addEventListener的第三个参数设置为true则可启用事件捕捉模型// ie8以下由于不支持addEventListener，故没有事件捕获的事件处理模型// focus,blur,change,submit,reset,select等事
2021-03-08 16:39:55
89
原创 页面实现滑到底部，加载更多数据
添加scroll事件的监听重要的是最后一行，loadMore是滑动时要执行的函数。几个参数的说明：scrollTop:滚动条向下滑动的高度，也就是本元素向上隐藏的高度；offsetHeight:本元素的实际高度，包括被隐藏部分；innerHeight:浏览器可视窗口高度，不包括border和margin；offsetHeight = scrollTop + innerHight 则已经滑到底部了。...
2021-03-08 15:47:08
643
2
原创 盒子模型，盒子的尺寸及位置信息，盒子不同尺寸属性之间的区别
获取盒子的位置信息以及尺寸信息elementNode.getBoundingClientRect()；盒子更多尺寸及位置信息：offsetWidth：本身宽度+边框线+左右内边距；-outerWidth()offsetHeight：本身高度+边框线+上下内边距；-outerHeight()offsetTop：相对有定位属性的父节点上偏移量；offsetLeft：相对有定位属性的父节点左偏移量；clientWidth：本身的宽度+左右内边距; -innerWidth()clientHe
2021-03-08 15:20:37
380
1
原创 给子元素设置margin后，父元素也跟着移动
给子元素设置margin后，父元素也跟着移动原因是： 普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。解决方法：第一种：给父级设置border第二种：给父级设置个padding第三种：BFCposition:absolute;display:inline-block;float:left/right;
2021-03-08 14:43:59
755
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人