- 博客(39)
- 收藏
- 关注
RSS订阅原创 JS提取富文本内容中的纯文字
//转意符换成普通字符function convertIdeogramToNormalCharacter(val: string) { const arrEntities = {'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'}; return val.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});}// .
2021-08-02 09:11:53
6085
1
原创 Ant)-Form 设置表单字段值的格式
setFieldsValue的参数结构是这样的{ field1: field1的值, field2: field2的值,}setFields的参数结构:{ field1: { value: field1的值, errors：错误信息数组 }, field2: { value: field2的值, errors: 错误信息数组 },}...
2021-05-26 18:16:01
594
原创 前端：接口请求格式 + 关于接口400的问题
以下是在 React + umi 项目中的案例接口的请求格式基本如下：需要注意各类型接口传参的方式： “return request”里面传递params1）params不会拼接到路由上data: params,2）这个会把params拼接到路由上。eg:params: {…params,},GET请求export async function getDefaultScoreSettings(options?: { [key: string]: any }) { retur
2021-05-11 16:54:12
975
原创 记录关于 async + await 的使用
新的改变关于 async + await 的使用一般是调用异步方法的时候加一个await，然后就能得到异步方法的返回值：const data = await getStatusOfUser();await是把异步方法转成同步方法，所以调用的这句代码的行为（const data = awaitgetStatusOfUser();）就变成异步的了，需要给外层函数加上async关键字 const func = async () => { const data = await ge
2021-04-22 12:08:51
231
转载 把图片的url转为base64编码（单张的）
getBase64 () { // 转一张图片编码 var img = 'https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg' var image = new Image() image.crossOrigin = '' // 解决跨域问题 image...
2019-10-12 17:46:27
1464
转载 touch事件（ 手机端拖拽提示图标 ）
参考博客：https://www.cnblogs.com/hpuzy0127/p/5073844.html这次的大作业里面想用 touch事件 做一个在移动端可以拖拽的小图标，嘿嘿，但是还没用到过，然后就参考学习了它的用法。下面就记录下实现此功能的代码吧~总的来说 移动端的touch事件 和 PC端的移动拖拽事件的原理一样：touchstart事件 ———— onmusedown...
2019-06-30 20:41:54
898
转载 【转】js中关于!+[]+[]如何进行计算
原文链接：https://blog.csdn.net/mm_hello11/article/details/83031686看完上面的连接就会做下面这道题啦：要点：js是弱类型语言，所以它会进行隐式类型转换，转换成字符串。(!+[]+[]+![]).length=9...
2019-06-24 20:47:16
348
转载 纯前端实现发送电子邮件功能——formspree
我想实现发送邮件的功能但是又不了解后台，正愁着我该怎么写这个功能，然后就发现了一个好东西——formspree 。它相当于一个第三方平台帮我们把表单信息提交发送到我们指定的邮箱里。只不过每次提交表单都需要有信息验证环节，有点点麻烦，而且 但是 它不适用于所有的邮箱（至少QQ邮箱是没问题的）。我参考的资料有：https://blog.csdn.net/Abez_c/article/detail...
2019-06-23 19:21:06
8749
3
原创 用localStorage存储/读取历史记录相关数据（数组—字符串—数组）
把这次使用localStorage的例子记录以下：思路：我主要是将每次计算的结果及相关参数存到一个数组中，然后将数组通过localStorage.setItem(“allRecord”,JSON.stringify(aRecord));的方式将数组转为字符串存进localStorage；再通过JSON.parse(localStorage.getItem('allRecord"))将字...
2019-06-17 00:10:43
1860
原创 用 wow.js + animate.css 实现页面元素的动画效果
之前一直想写这个效果，这次找到啦，跟大家分享下~想要具体的可以看最后的演示及下载，这里我只列了关键的一个点。用法需要引入2个文件：<!--css--><link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/animate-3.1.0.min.css"><!--js...
2019-06-10 09:55:30
484
转载 自制input样式（动画）
我目前只模仿了一种，后期右的话还会继续加进来的。有动画效果的，截屏看不出来HTML:<div class="input-group"> <input class="input__field" type="text" id="input-1" onblur="inputBlur(this)"/> <label class="inpu...
2019-06-10 09:39:05
483
原创 jQuery实现用伪元素给元素加样式
直接上例子吧：用jQuery改变元素 a 的伪元素的样式，用append的方式即可$(this).find("a").append("<style> .mobile-active::after, .mobile-active::before{ opacity:1 }</style>");...
2019-06-10 09:29:30
2356
原创 点击input框不出现光标
从视觉效果上就是让input看起来不像input，只需2步：readonlyunselectable=“on”eg:<input class="imitationSelect" type="text" value="中小城市" readonly unselectable="on">...
2019-06-10 09:21:06
6976
原创 多级评论回复功能（纯前端，未连数据库）
效果图：html结构（css我就不放了）： <div> <!--我的评论--> <div class="my-comment"> <textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="快来说点什么吧~"></t...
2019-06-03 11:00:59
7391
18
原创 html转jsp无法加载图片问题（已解决）
前几天我遇到这个很奇怪的问题，在html里图片都能正常显示，后来为了连数据库，就把html转成jsp文件，结果只有部分图片能显示，其余的都不能正常显示。关键是我的写法和同学的一样啊，她的都正常。正常显示的图片：无法加载的图片：百度后得知在jsp里图片无法正常加载一般就2个原因：图片路径不正确；被拦截器拦截了；但是经过排查，这2个问题我都不存在，然后又想了很久很久，很久很久，终于...
2019-06-03 10:15:39
3319
1
原创 简单实现video的QA环节
效果图：在指定的某个时间点出现QA环节：回答错误 或 超过规定的时间未回答，出现如下情况：思路通过定时器（每隔1s的）判断video.currentTime来决定什么时候出现QA环节；出现QA环节时，暂停播放，清理每隔1s的定时器；定义一个变量clickNum来判断是否答题（clickNum=1），默认为未答题（clickNum=0，有一个5s的一次性定时器），若在5s内答题了，...
2019-05-26 19:39:14
1259
1
原创 如何准确获取元素的高度
$(“element”).height()获取的元素高度不准确！！！！我在动态获取元素的高度时，发现用$(‘div’).height()获取到的高度会随着浏览器的变化而变化。所以我在通过这个值动态设置另一个div的高度时就有问题了。解决方法：用 $(“element”).get(0).scrollHeight 或 DOM.scrollHeight 可以正常获取,它的值不会改变的，可以放...
2019-05-26 17:06:04
3180
转载 用canvas实现的弹幕效果
学习网址：https://www.zhangxinxu.com/wordpress/2017/09/html5-canvas-video-barrage/它写的功能和很全面，我只用到了其中的一点点。大家可以好好去看一看。使用之前要先导入一个js文件：（具体内容可去参考上面的网址） <script src="js/canvasBarrage.js"></script>...
2019-05-19 21:35:10
1373
原创 简单的video切换视频播放列表（每次都先播放广告）
播放的顺序：我想实现的是让它先自动播放广告，广告结束后再播放指定的视频内容。如果切换了指定的视频内容，还是要先播放广告，再放指定的视频内容。实现思路：把要播放的视频地址存放到一个数组 videoList 中。videoList [0]存放广告地址，videoList [1]存放指定播放的视频地址。用curr变量控制播放数组的内容。因为我默认一开始就是从广告播放的，所以curr的初始值赋值...
2019-05-19 21:09:57
2389
原创 jQuery的offset().top与JS的offsetTop的区别
这是我在做播放器的水平方向和竖直方向的拖拽进度条遇到的问题。一开始我老想着这两个方法的效果应该是一样的，结果就被它搞了很久很久。后来我发现这两者的区别其实就是对象的作用域不同（不知道这么说行不行）这里我就拿offsetTop举例子jQuery的offset().top它获取的值==你获取的元素的上边框距离可视区域的顶部的值JS的offsetTop它获取的值==你获取的元素的上边框距离与它...
2019-05-13 10:36:42
1833
原创 播放器自定义控制条
这是我目前做的，但并不完善，后期有时间还会修改过，但大致上已经可以了。我写进度条样式的方法不是很好，我觉得把进度条最后的原点额外用一个div来控制比较好。我这里写的是用 :before 来控制的。效果图：引入的文件<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" hre...
2019-05-06 09:01:47
881
原创 用jQuery实现旋转木马效果的轮播图及解决按钮的闪烁问题
总效果：代码主结构：<body><div class="slide-warp"> <ul class="list"> <li><a href="###"><img src="images/slidepic5.jpg" alt=""></a></li> &l...
2019-04-28 19:43:36
848
1
原创 getComputedStyle与currentStyle
作用：获取元素的样式，但不能设置样式好处：（与offsetLeft相比）offsetLeft获取到的值只有在left要与position搭配（脱离文档流）时才有效，所以有时候靠offsetLeft获取的值不一定准确。但getComputedStyle与currentStyle方法是只要元素的属性 left 被赋值，就能获取出相应的值区别：getComputedStyle：谷歌，火狐支持cu...
2019-04-25 14:31:00
274
原创 JS实现放大镜功能
我是看完教学视频做的，一开始发现自己能实现放大，但有个小bug：显示的位置不大对应，原因：mask，box(=小图的宽)，big，bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符。它主要有2个比例关系： //放大显示区域的对应比例=====在CSS里设置 mask的宽 / box的宽 = big的宽 / bImg的宽 //大图对应移动（鼠...
2019-04-22 09:33:00
12498
1
原创 解决datatimepicker日期插件在移动端自动右浮动问题
问题：Datatimepicker日期插件在PC端使用时，显示日期的表位置正常，但在自适应到移动端后发现它自动新增了一个类 pull-right 和 style属性，导致日历的最左边一列被隐藏了。如下，玫红色阴影处：PC端（正常显示的位置）：移动端（红框里是新增的）：使日历表向右浮动，原本是靠左的解决方法：用jQuery去除pull-right 和 style属性（style属...
2019-04-22 09:00:57
411
原创 JS实现表格的动态增删改功能
功能：全选，全不选删除对应行修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改）增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改）效果图 ：代码：增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的<!DOCTYPE html><html lang="en"><...
2019-04-11 11:36:23
5970
原创 解决 li 浮动后仍无法排列在一行的问题
问题：在做横向动画轮播图时，给 li 设置了 float:left; 但发现 ul 里的 li 还是会竖直排列，效果如下：原因：ul 的宽度不够或未设置宽度解决办法：li 浮动，则给 ul 设置足够大的width：li 不浮动，通过设置ul 和li 的display + ul 的 white-space:nowarp; 让 ul 的内容不换行...
2019-04-11 11:19:18
3469
原创 JS—综合移动轮播图
这个轮播图我时跟这学习视频做的：功能：下标索引+左右按钮+无缝轮播（首尾相连）+自动轮播注：1：无缝轮播——若想要显示5张图，那么应该在后面再加一张图（内容为第1张图），共显示6张图。通过元素创建加图，如下，不要直接写在ul标签里，不然下标索引也会相应增加哦 ulObj.appendChild(ulObj.children[0].cloneNode(true));2：索引 pic ...
2019-04-04 17:34:11
180
原创 jQuery——简单的猜数游戏
这个界面我直接用bootstrap框架编写的随机生成1-100的数，共5次机会，失败后会提示还剩几次机会并选择是否继续猜数。可打开控制台查看随机数在 head 标签里先导入bootstrap的类+jQuery： <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="st...
2019-04-04 09:13:12
434
原创 JS实现简易计算器
我是用bootstrap做的一个简易界面：我觉得这里面最有价值讲的就是 eval() —— 它可以直接对内部的内容进行简单运算哦！eval（“2+3”）——返回5那我就直接上代码啦：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
2019-03-31 20:20:06
2498
原创 纯CSS——皮卡丘
直接上代码啦~不过自己目前写的还有一点点BUG，眨眼的时候皮卡丘的眼白消失的有些慢，如果你们有更好的解决办法也可以教教我，分享分享~html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PiKa~</title>...
2019-03-31 20:09:37
895
1
原创 用datatimepicker日期插件实现限定日期范围
自己刚学bootstrap框架，因为项目要求直接从别人的博客里学了下这个datatimepicker日期插件，纯属赶鸭子上架。自己之前百度过很多不同方法，可能因为导入的bootstrap的css,js,和datetimepicker的css，js文件版本不同，都无法正常使用，一直会报错。我下面用的方法是从以为博客主那儿学到的：（他的博客地址：https://blog.csdn.net/qq_3...
2019-03-31 20:00:23
1046
原创 用JS实现点击按钮动画移动的轮播图
我在 ul 里装了所有的轮播图（每个 li 对应一张图），所以点击按钮的时候只要让 ul 左右移动就ok啦~动画移动的效果其实就是利用定时器将某个图片移动到一个指定的位置，下面我用JS写了一个这样的动画函数，调用时只要传进去一个移动元素（这里我用的是 ul ）和该元素的目标位置即可。注：把 ul 作为移动元素时，ul 必须要脱离文档流--------- 方法： position:abso...
2019-03-25 09:24:48
1946
原创 用JS在点击时获取table里多组tr中某个td的内容
获取tr中某个td的内容把要被获取的td设置相同的className，然后通过className获取td，再循环遍历td并获取它的内容，并将之暂存到一个新数组中。以下时我的例子：做一个私信界面，点击某个私信小图标跳出一个界面，把对应的td的内容（名字）输出显示在这个界面：//获取所有图标var privateImgs=document.getElementsByClassName("p...
2019-03-17 21:26:42
2361
原创 JS实现页面加载完成后立即显示时间
自己原来是这样写的： window.function(){ //定时器每秒调用一次Time() setInterval(function(){ Time(); },1000); }; function Time(){ var currentTime=document.getElementByI...
2019-03-17 21:26:26
2190
原创 用JS计算两个时间差并换算
在做这个时间差的时候百度过一些方法，然后就做了个毕业的倒计时，虽然忘了毕业具体是哪天来着。/************毕业倒计时***********/var timeSpan = document.getElementById("timeSpan");//两个时间相差天数 兼容firefox chromefunction datedifference() { //sDate1和sD...
2019-03-17 21:26:01
402
原创 正则表达式笔记
正则表达式——入门笔记创建：var reg = /pattern/;var reg = new RegExp(“pattern”);常用元字符 &反义字符 &限定符. 匹配除换行符以外的任意字符\w 匹配字母或数字或下划线\s 匹配任意的空白符\d 匹配数字\b 匹配单词的开始或结束^ 匹配字符串的开始$ 匹配字符串的结束\n 匹配一个换...
2019-03-10 21:34:51
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人