2020年05月_Endless Daydream233

原创前端学习之垂直对齐（vertical-align）

vertical-align 垂直对齐1.让带有宽度的块级元素水平居中对齐：margin:0 auto;2.让文字水平居中对齐：text-align:center;3.让块级元素垂直居中：子绝父相，子：top:50%;transform: translateY(-50%);/margin-top:-(子高度的一半) 或者使用后面的弹性布局在父元素中添加display: flex;align-items: center;4.让文字垂直居中： line-height=父元素的高；vertica

2020-05-31 20:49:03 7226 2

原创前端学习之鼠标样式轮廓防拖拽文本域（cursor、outline、resize）

1.鼠标样式cursor鼠标移上显示的样式。常用的几个如下：cursor:default 默认白色箭头丨pointer 小手丨 move 十字架样子丨 text 文本2.轮廓outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline:outline-color | | outline-style | | outline-width但是我们都不关心可以设置多少，平时基本是去掉的。最直接的写法是：outline:0; 或者 outline

2020-05-31 19:28:57 870

原创前端学习之css-元素的显示与隐藏(display、visibility、overflow)

1.display 显示display：设置或检索对象元素是否及如何显示。display:none 隐藏对象display:block 转为块级元素、显示元素特点:如下图所示，隐藏之后,不再保留位置。2.visibility 可见性visibility：设置或检索对象是否显示。visibility: visible 显示visibility: hidden 隐藏特点:如下图所示，隐藏之后,继续保留原有位置。3.overflow 溢出...

2020-05-31 18:24:36 587

原创解码URL接收参数中的“乱码”

昨天在改一个bug，后台传过来的url中带有多个参数值，例如"%E5%BC%A0%E4%B8%89"这种需要解码获取正确的数据。有两种解码方式。encodeURI() 函数编码过的URI 用decodeURI() 解码encodeURIComponent() 函数编码的 URI 用ecodeURIComponent() 函数解码...

2020-05-28 10:02:41 1488

原创移动端ios new Date() 日期转换失败的问题（ios 兼容）

在做移动端开发的时候，使用new Date() 转换后台返回的格式时，在chrome 之类浏览器和安卓手机上都显示正常，但是在ios上显示Invalid Date。例如: new Date(“2020-05-25 11:11:11”).getTime() 正常情况下可以获取时间戳，但是在ios端解析不了。后来查找发现 IOS只识别yyyy/mm/dd这类斜杠格式的日期。解决办法：freedomTime = freedomTime.replace(/-/g, '/');new Date(freedo

2020-05-25 14:14:52 2202

原创 JavaScript 常用日期(Date)转换

整理一些比较常用的日期格式转换function1.日期格式化（转年月日时分秒） //日期格式化（转年月日时分秒） dateFormat:function(datetime){ let date = new Date(datetime); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.getHour

2020-05-24 17:42:44 595

原创 element-ui 动态表格（el-table）

做pc端开发的时候，有好几个弹窗展示同一种样式的table,记录一下。<el-dialog :title="titleName" :visible.sync="dialogChangeVisible" top="30vh" :close-on-click-modal="false"> <el-table :data="tableData" border

2020-05-22 18:22:57 1954

原创移动端页面有滚动条但是无法滚动的问题

做移动开发的是，有个签名的功能页面。只要点进过这个页面，再点击其他原先可以滚动的页面，都再不能滚动。网上查找的问题根本是使用了下面这个js事件：document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, { passive: false } );其中e.preventDefault();会阻

2020-05-22 17:54:12 6694

原创前端学习之提高层级的小例子（z-index、relative）

正常几个盒子带边框并列显示的时候，相邻的边框会粗一些。如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; heig...

2020-05-07 15:58:24 1219

原创前端学习之叠放次序（z-index）

前面说过定位，当对多个元素同时设置定位时，定位元素之间有可能发生重叠。如下图：在CSS中，想调整重叠定位元素的叠放次序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。例如： z-index:2;注意：z-index的默认属性值为0，取值越大，定位元素在层叠元素中越居上；如果取值相同，根据书写顺序，后来者居上；数字后面一定不能加单位；只有相对定位、绝对...

2020-05-07 14:57:44 851

原创前端学习之定位（position）

前面说过浮动，关键在一个"“浮”上面，而定位，关键则在于一个"位"上面。前端学习之浮动PS:定位在CSS中算是数一数二的难点，但是，务必要学好它。我们的CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触定位，反而要爱上它，它可以让我们工作更加轻松哦~为什么要用定位？如果要实现某个东西能够随便在一个盒子里自由随意移动、或压着某个元素、或超出某个盒子等等，这一类用标准流或者...

2020-05-07 14:12:43 3732

no pains,no gains