Web
文章平均质量分 65
本心_
行动派
展开
-
flex布局动效
需求描述有三块或以上的内容,鼠标移动上去时详情内容从下往上展现,鼠标移开时内容以相反动效隐藏。如下图所示↓需求分析如果用JS来写,那会非常的麻烦!这里运用fflex布局+transition,能够完美实现此动效,无需编写任何JS代码。美中不足是flex属性有些低版本的浏览器不支持。思路:父容器flex布局,子模块没个占比初始状态相同,当鼠标放上去时,修改这个值,模块撑开,使用transition设置css属性值的变化规则,即可看到模块逐渐拉伸和逐渐收缩的效果。至于模块里面的内容,同样使用这个策略,原创 2022-02-08 15:20:57 · 827 阅读 · 0 评论 -
监控鼠标滚动动画
需求之前在工作中遇到的需求。色块里面放了具体内容,有文字或文字加图片。要求并排的3个色块在鼠标往下滚动的过程中慢慢从下往上浮现,当滚动到一定距离后,色块内容更改,新的并排色块重新从下往上浮现,脱离动效后如果屏幕向上滚动,色块以相反效果展示。具体效果如下GIF所示,黑色部分是页面外的调试界面。问题分析上面的需求已经做了一层分析,将UI的想法抽象出来,用程序员的语言描述一遍,但这层分析还远远还不够。DOM结构设计难点在于整个动效DOM的结构设计。首先我们需要理解,页面在向下滚动的过程中,高度会不断原创 2022-02-07 01:01:37 · 874 阅读 · 0 评论 -
Markdown自定义CSS样式
前言当我第一次接触到Markdown时,我就深深爱上了它。这简洁的界面,编程式的书写都令我爱不释手,最重要的是,还能够支持自定义html、css。自定义CSS样式说到Markdown,就不得不提及Typora这个软件,本例子即是在此软件的环境下完成。想要自定义CSS,首先得有一定的htm,css基础。1.寻找Typora的主题CSS文件确认typora软件用的主题文件 -> 外观 -> 打开主题文件 -> 找到对应的css文件,因为我用的主题是Night,所以我应该找nigh原创 2022-01-30 16:34:40 · 5888 阅读 · 0 评论 -
postman踩坑记录
请求链接即使是多一个空格(放到链接末尾)都会出错原创 2021-05-06 13:16:21 · 195 阅读 · 0 评论 -
Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: Value is not a valid ByteString.
报错原因:Ajax请求头部信息有中文,注意是头部信息header不是内容解决方法:可以跟后端协调商量,更改为非中文信息,或者使用编码函数encodeURI()对信息进行编码等一次事故:这个问题排查了很久。在vue项目中,发起一次上传数据的请求后,第二次再重新上传,发现报了一个获取不到某个字段的错误,很纳闷,同样的操作,第一次成功,为什么第二次就失败了呢?后端说它这边没有报错信息,把问题甩给了前端。定位到报错的那一行代码,发现是发起请求后进入了一个error函数,随即把这个错误打印出来。即标题所示的错原创 2021-04-30 10:50:36 · 2276 阅读 · 0 评论 -
ios端input输入框光标延长问题
问题描述:输入框聚焦时,光标的长度不以输入框默认文字高度相等,而是延长至与input输入框父元素高度相等。同样的代码,在浏览器和Android都不会出现此问题,但是在ios的部分机型中出现了。代码例子:<!DOCType html><html><head> <meta charset="utf-8"> <style> .out-part { background-color:原创 2021-04-20 23:59:05 · 299 阅读 · 0 评论 -
前端面试题
这些都是血淋淋的教训希望大家引以为戒1.em,rem,px的区别,为什么要设置这么多长度单位?https://cloud.tencent.com/developer/article/1538359https://segmentfault.com/a/11900000075269172.restful架构是什么?restful API 设计规范?http://www.ruanyifeng.com/blog/2011/09/restful.htmlhttp://www.ruanyi.原创 2021-04-01 20:55:25 · 160 阅读 · 1 评论 -
css3 transform属性
本文详细介绍tranform属性,通过逐步制作一个可转动正方体的例子介绍此属性首先看下最终的效果:1.用法格式transform:字面解释即变形,对元素的图形进行转变,支持元素从2D向3D转换,即可展示3D的元素transform的值有rotate(旋转)、skew(扭曲)、scale(缩放)、translate(平移)和matrix(矩阵变形)本文介绍rotate(旋转)和translate(平移)上述效果用此两个属性值即可完成,具体属性值介绍请移步MDN或W3School原创 2021-03-26 23:55:26 · 1393 阅读 · 1 评论 -
JS 常用数组方法总结
以下数组方法接收一个回调方法(callback)作为第一个参数,给回调方法传入的第一个参数为数组元素forEach:遍历每个元素,没有返回值map:遍历所有元素,对每个元素进行处理(callback),返回处理后的新数组,原数组不变find:找出第一个符合条件的成员,返回该成员findIndex: 找出第一个符合条件的成员,返回该成员的下标some:若数组中存在一个符合条件的成员,返回true,否则返回falseevery:若数组中所有成员都满足条件,返回true,否则返回false原创 2021-03-08 02:10:39 · 339 阅读 · 4 评论 -
用CSS绘制三角形
归根结底,用CSS绘制三角形,就是利用边框(border)特性进行绘制平时我们用border可能用的很多,但是一般都会统一设置所有边框的颜色,很少研究每个方向的边框具体样式是怎样的。现在先来看一个简单的例子,我们分别设置每个方向的边框的颜色,元素宽高是100px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2020-12-16 17:22:31 · 279 阅读 · 0 评论 -
HTML 背景图布满整个div
在编写HTML代码时,偶尔会遇到这种情况,我们要展示的背景图的大小与实际的div大小不一致(此时的背景图是静态资源而非接口请求数据)。设置背景图的css是background: url(...) 假设现在有一张背景图的长宽是100px*100px, 而外层的div大小是400px*400px,那么根据以下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-07 10:18:07 · 11043 阅读 · 1 评论 -
单行、多行字段太长,用...表示
这个功能在前端开发中实在是太常见了,只要是一段文本的展示,常常都要做此处理,限制文本的长度,超出部分用...表示,这里提供一种解决方案,直接上css代码(一些浏览器可能不兼容):单行:overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行:overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2; -原创 2020-10-13 17:17:35 · 392 阅读 · 0 评论 -
利用chrome浏览器截取整个网页(长截图)
相当实用的小功能本功能在win10上实现,其它系统自行摸索。由于用的是chrome自带插件,所以只要有chrome,应该都可以实现该功能。1.打开调试界面(ctrl+shift+I 或者 F12)2.按下ctrl+shift+p3.找到插件 Screenshot Capture full size screenshot 并点击...原创 2020-09-23 09:19:58 · 1495 阅读 · 0 评论 -
JavaScript sort() 函数
需求:对数组元素进行排序,每个元素是一个数字问题及解决思路:当我们调用此方法对数组进行排序时,默认对每个元素的字符Ascll码排序,如2,14,12的排序结果是 12, 14, 2,有时这不符合我们的需求,我们需要的是让每个元素按自然数排序,解决方法是写一个模板函数(此函数的用法和功能与c/c++中sort的模板函数如出一辙)示例:var merge = function(A) { // 模板函数 function sequence(a,b) { if (.原创 2020-08-28 16:34:42 · 310 阅读 · 0 评论 -
JavaScript 常用字符串方法
目录大小写转换将字符转换成ascll码十进制,以及从acsll码十进制转换成字符对象动态添加属性查找数组中是否存在某元素将字符串转为数组将数组转为字符串1.大小写转换let test = (str) => { // 字符串转换成大写方法 let up = str.toUpperCase(); // 字符串转换成小写方法 let lower = str.toLowerCase(); console.log(up); // .原创 2020-08-21 09:05:00 · 82 阅读 · 0 评论 -
JS实现简易秒表
<!DOCTYPE html><html><head> <title>简易秒表</title> <style> body { text-align: center; } </style></head><body> <h1>JS实现简易秒表</h1> <h...原创 2020-08-17 15:18:00 · 300 阅读 · 0 评论 -
html+css常见布局实现方法
前言这是一篇关于html+css布局的总结博文,这些布局在日常开发中非常常见。本文提供的方法只是其中一种,现实中解决问题的办法往往不止一种,需要具体问题具体分析。本文主要讲述的布局1.字体居中:水平居中、垂直居中;2.多个div元素水平分布;3.单个div元素居中:水平居中、垂直居中;背景是以上所有情况外面都套着一层div,如下:1.情况一: <div> 一段文字 </div>2.情况二: &l..原创 2020-07-31 16:37:35 · 641 阅读 · 0 评论 -
vue项目实现锚点定位功能
背景在html中使用id可以简单实现锚点坐标功能,如下:// 起点<a href="#mark">起点</a>// 终点<div id="mark">终点</div>但是此时在路由中会添加mark字样,看网上的帖子说由于vue项目用了router,用这个方法会跳转到其他页面,然而我这里并没有报错,顺利跳转到目标点了。。。当然还是寻求更好的方法。不直接用以上方法的原因主要有二:1.它影响路径,如果做数据提交或其他需要获取当前路原创 2020-07-17 17:09:56 · 2311 阅读 · 2 评论 -
点击提交按钮时用Jquery获取表单内容
需求:在点击提交按钮时,用jQuery获取表单的内容,包括姓名密码等信息,并存储在一个json对象中代码&注释:<!DOCTYPE html><html> <head> <title> test </title> <script src="jquery-3.5.1.js"></script> </head>原创 2020-07-10 17:15:45 · 2165 阅读 · 0 评论 -
在一个js文件中调用另一个js文件的内容
问题描述:在一个文件夹中,只有两个js文件,现在a.js中有一个数组,b.js想引用它解决办法:本人用的是nodejs运行环境提供的exports和require来解决。代码示例:a.jslet array = [ {name:"jack", age:21}, {name:"rose", age:17}, {name:"mike", age:23}, {name:"jonny", age:9}];const num = 10;function t原创 2020-06-23 03:20:13 · 3228 阅读 · 3 评论 -
JavaScript根据某个对象属性对数组进行排序
面试算法题解题思路中的某个步骤,当时有点懵,没做出来。需求:对一个数组进行排序,这个数组的元素是对象。举例:// 根据年龄从小到大对数据进行排序const person = [ {name:"jack", age:21}, {name:"rose", age:17}, {name:"mike", age:23}, {name:"jonny", age:9}];首先了解一下数组函数sort的用法,可以设计一个比较函数,作为参数传递给sort函数,以此来.原创 2020-06-23 02:05:29 · 610 阅读 · 0 评论 -
使两个div垂直居中于父div的左右两侧
在写网页的头部导航栏时,有时会需要类似的功能,左边放一个logo,右边是一排导航栏。抽象一下,如图:实现思路利用绝对定位和相对定位的功能灵活布置div的位置,并用transform作最后的微调。代码及注释:<!DOCTYPE html><html><head> <title> div </title> <style type="text/css"> .div1 { background-co.原创 2020-06-15 17:11:48 · 1117 阅读 · 0 评论 -
div水平垂直居中
在写前端页面时,常常需要居中一个块级元素,如div的居中,水平居中只需margin:auto;一行代码即可,那么,如何才能使得div在父块级元素中同时水平、垂直居中呢?开始之前,大家应该充分理解css中绝对定位和相对定位的概念这篇博文写得非常好:CSS相对定位和绝对定位详解看下简陋的最终效果:实现思路1.使用绝对定位,相对对位功能,使得子div左上角的点位于父div的中心;2.使用transform属性使子div向左上角编译长宽一半的距离实现代码及注释<..原创 2020-06-15 14:47:17 · 267 阅读 · 0 评论 -
关于margin: auto及margin: 0 auto的一些见解
在写css时margin:auto;使用频率非常高,常用于div的居中。何为margin?margin是指块级元素的外边距,如下图所示,XXXXX是div中的内容,通过设置margin的值,可控制div与其他块级元素的距离margin设置不同数量的值时的含义我们常看到margin:auto;margin: 0px auto;margin: 10px 20px 30px 40px;相关的语句,当margin有不同数量的值时,其含义分别是什么?首先margin最多有.原创 2020-06-15 14:27:44 · 8900 阅读 · 1 评论 -
JavaScript猜数字游戏
游戏规则:游戏在开始前随机选择一个1~100的数字,然后邀请玩家在10论内猜出游戏。每轮后对会告知玩家正确与否,如果猜对了,游戏结束,玩家胜利。如果猜错了,应当告知玩家是猜大了还是猜小了。每次游戏有10次机会,玩家用完所有机会后游戏自动结束。游戏逻辑:代码实现:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>猜数字游戏</title&原创 2020-06-09 15:22:49 · 2550 阅读 · 0 评论 -
JavaScript中的bind函数(浅谈)
看别人的项目时遇到bind函数,看不懂,回头补了一下,作出以下比较浅显的总结,个人觉得官网上的陈述有点绕,一开始看不懂,后来发现相当精辟。官网介绍: bind方法会创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。个人...原创 2020-04-13 06:28:40 · 383 阅读 · 0 评论 -
javasript中的this
javascript中的this不像java里面的this明确,以下作了一些测试,为了让自己区分在不同情况下javasript中的this指代的是哪一个对象。// var x = 6// 类class ClassTest { constructor(x) { this.x = x // 这里的this指类对象,代码含义是在类对象中添加变量x,创建对象时给x赋值...原创 2020-04-12 17:45:27 · 103 阅读 · 0 评论 -
Nodejs中的exports与module.exports
参考:谬雪峰的网站一个困惑多时的问题,在nodejs中导出一个模块有时用exports或module.exports都可以,但偶尔会报错。结论:1.如果要导出一个键值对象{},则可以使用exports;2.如果要导出一个方法或数组,只能对module.exports赋值;所以,任何时候导出模块都用module.exports即可。...原创 2020-04-12 16:02:01 · 396 阅读 · 0 评论 -
async/await的一些记录
1. await必须在async函数里面引用2. async函数必定返回一个promise对象,但返回的内容可以是任意,如下面的测试,返回了内容为布尔值的promise对象3. 正常情况下,await后面跟着一个返回promise对象的函数4. 接收await xxx;的变量(或常量)是promise对象xxx返回的内容测试代码:async function test...原创 2020-04-10 17:21:57 · 184 阅读 · 0 评论 -
Servlet.init() for servlet [springmvc] threw exception
本人在学习SSM过程中,遇到了以下错误:参考的书是黑马程序员的《Java EE企业级应用开发教程》,由于写的是第一个springmvc应用程序,代码完全照抄书上,但仍然报了以下错误。在分别搜寻错误:1.Servlet.init() for servlet [springmvc] threw exception网上大部分说明错误的原因都是注解的问题,而测试程序并没有用到注解,且配套...原创 2019-05-13 21:24:26 · 29626 阅读 · 5 评论 -
JSP显示图片(转载)
首先,图片和工程不在一个盘符下。图片也不能放到工程下。 在JSP 文件中 <img src="E:/图片/1.jpg"/> 这样是引不到图片的。因为,JSP页面在引图片的时候是在页面解析的路径是:<img src="http://localhost:8080/Chaomer/images/1.jpg">。也就是说JSP在引图片的时候是先去你的工程目录下找的。 所以如果要在...转载 2018-06-30 14:19:24 · 3559 阅读 · 0 评论