全部可见
文章平均质量分 68
α
胖胖我有点烦
这个作者很懒,什么都没留下…
展开
-
用CSS实现:左右两栏宽度固定,中间一栏的宽度随浏览器宽度的改变而改变
HTML 代码<div class="zuo">左边 </div><div class="zhong">中间</div><div class="you">右边</div>CSS 代码1.zuo, .you{ width:200px;原创 2018-04-10 22:21:31 · 613 阅读 · 0 评论 -
使用canvas实现倒计时效果
假设现在离新闻联播开始还有3分钟21秒。现在要通过canvas实现这个以03:21开始以00:00结束的倒计时。问题的关键在于,如何通过canvas绘制03:21 、02:36。简化问题,我们可以使用canvas绘制0、3、":"、2、1形状的图画,时间改变,再次重新绘制即可。绘制数字和符号“:”以绘制数字0为例,0的绘制可以借助一个二维数组。 var arc=[ [0,0,1,1,1,0原创 2018-01-18 01:36:32 · 3219 阅读 · 0 评论 -
nodejs+express 搭建博客 二(一些重要的问题和点)
引入CSS文件时的路径问题在view/index.ejs中引用public/stylesheets 目录下的style.css 文件时,报错如下引入该css文件的实现是这样的why?原来,在app.js中已经通过app.use(express.static(__dirname+'/public'))配置了静态文件服务器。所以,在引用css文件时只需要直接写原创 2020-08-15 13:56:05 · 188 阅读 · 0 评论 -
文件/图片的上传 怎么做
在实际的开发当初,经常会遇到需要上传/文件图片的场景比如,用户头像、审核资质证明等等。那有哪些方法可以实现文件/图片的上传1、form表单 enctype=“form-data”使用form表单和input type="file"<form method="post" enctype="multipart/form-data" > <input type="file" id="name" /></form>上传多个文件***使用表单上传文件需原创 2020-09-27 22:37:28 · 1368 阅读 · 0 评论 -
相对完成版的数据双向绑定
<input id="input" type="text"><span id="span"><button id="btn">同步更新数据</button> var input = document.getElementById("input"); var span = document.getElementById("span"); var btn = document.getElementById(".原创 2020-10-22 15:17:46 · 108 阅读 · 0 评论 -
CSS、HTML、JS踩坑
1、写好的html元素li、img等之间出现间隙?<!DOCTYPE html><html><head></head><body> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"></body></html>比如直接原创 2021-06-28 19:57:41 · 333 阅读 · 2 评论 -
nodejs+express 搭建博客 一
参考书籍----Node.js开发指南博客开发采用了 Express框架、MongoDB数据库 、ejs模板引擎(最开始使用的是默认的jade,在写了2个页面后实在没法忍受jade反人类的书写方式,就切换到了ejs)安装express 首先,创建文件夹byy,然后进入该文件夹cd /home/work/byy使用npm 安装express ,原创 2020-08-15 13:41:52 · 163 阅读 · 0 评论 -
ajax 302 重定向不成功问题
遇到的一个问题ajax请求接口,接口返回status code 302 重定向,但是浏览器并未重定向成功,发生页面跳转 URL改变之类的。。。于是,网上查找了一番,,,,,ajax 请求的status code是302后的过程是这样的:发起ajax请求请求响应 status code是302未进入ajax的回调函数中,而是先重定向。浏览器直接读取该请求的响应的response header中的location的值,发起请求。若该请求成功,则进入第一步中的ajax请求的success回调若该原创 2021-06-08 20:51:27 · 2393 阅读 · 0 评论 -
滚动鼠标/滑动触摸板 切换图片
1、实现过程滑动鼠标时给img标签切换样式,从而实现突出显示的效果。鼠标/触摸板 向下滑动, 突出显示前一张图片鼠标/触摸板 向上滑动,突出显示下一张图片加上事件节流/防抖,控制事件的触发频率。2、如何知道鼠标/触摸板是向下还是向上滑动万能的...原创 2020-10-27 20:23:30 · 1621 阅读 · 0 评论 -
使用setTimeout 实现setInterval
两者区别setTimeout() 只执行一次setInterval() 一直执行,直到clearInterval()思路在setTimeout 内部调用自身,以达到不停被调用代码function st(){ setTimeout(function(){ console.log("被调用了"); st() },2000);}st();...原创 2020-07-26 16:47:42 · 272 阅读 · 0 评论 -
使用JavaScript实现简单的瀑布流
效果截图基本思路每行展示固定数目的图片(假设为5),第一行从左至右依次展示5张图片,第6张放在前5张中高度最小的那张下方,第7张放在前6张中整体高度最小的那张下方,第8张放在前7张中整体高度最小的那张下方.......整体高度:每一列的所有图片高度之和 以及padding、margin、border(如果有的话)之和代码部分HTML原创 2018-01-23 20:04:32 · 301 阅读 · 0 评论 -
写一个Promise.all()
const p1=()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("p1"); },3000) })}const p2=()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("p2"); },原创 2020-09-11 22:53:21 · 240 阅读 · 0 评论 -
一些题∩-∩
1、生成1到1000之间的质数/素数质数:除了1和它本身之外不能被其他的数整除。最小的质数是2 let result=[]; for(let i=2;i<=1000;i++){ const middle=Math.floor(i/2); let count=0; for(let j=1;j<=middle;j++){ if(i%j===0){ count++ } }原创 2021-01-20 13:09:08 · 1610 阅读 · 0 评论 -
遍历、查找、深度、插入节点、删除节点、是否有和为某个数的路径、输出和为某个数的路径
树:可指多叉树或者二叉树思路遍历树,在遍历的时候同时统计当前的深度deep:遍历到当前节点时树的深度resdeep:树的最终深度当没有子节点时,说明当前的分支遍历到了尽头, deep 和 resdeep进行比较,如果deep大于resdeep ,将deep的值赋给resdeep 。每次遍历到当前分支的尽头时,将deep重置为0,现有如下树结构,得出其深度var treeList = [ { path: 'a/a', component: 'pag原创 2020-08-15 13:38:16 · 300 阅读 · 0 评论 -
使用JavaScript实现轮播图
经常能看到各种各样的图片轮播,下面就从简单到复杂一步步完成一个图片轮播效果效果1这一步需要实现的结果如下图所示关键点:1、多张照片叠加,每次只能看到一张照片。2、点击任意圆点,显示对应顺序的图片(点击第一个圆点,显示第一张图片,第一个圆点改为红色,点击第三个圆点,显示第三张图片,第三个圆点改为红色)。第二点的关键处在于,如何通过JavaScript得到点击的是第几个圆点。转换一下思路,点击的圆点是原创 2018-01-17 23:00:42 · 1810 阅读 · 0 评论 -
JavaScript 简单的弹幕功能的实现
实现一个简单的弹幕效果,时间充裕的话会逐步完善优化弹幕效果原创 2020-05-17 02:12:15 · 473 阅读 · 0 评论 -
使用canvas实现简单的时钟效果
这次要借助canvas实现时钟效果,展示当前时间,形状为圆形。完整实现效果截图如上关键点时钟效果的实现主要分为3部分1、绘制表盘、大小刻度、1~12 等静态部分的绘制2、展示当前时间3、时针、分针和秒针动起来绘制静态部分首先得到canvas和canvas的绘图环境var canvas=document.getElementById("canv原创 2018-01-21 23:15:05 · 1656 阅读 · 0 评论 -
实现 元素 可拖拽
1、思路记录开始时元素的位置(divX,divY)记录刚开始拖拽时(刚按下鼠标时)鼠标的位置(startMouseX,startMouseY)记录下拖拽结束时(松开鼠标时)鼠标的位置(endMouseX,endMouseY)那么–拖拽结束时,元素的位置为(endMouseX-startMouseX+divX,endMouseY-endMouseY+divY)2、相关方法onmousedown :按下鼠标时触发onmousemove:按住鼠标拖动时触发onmouseup:松开鼠标时触发原创 2020-07-31 02:57:28 · 1022 阅读 · 0 评论 -
用CSS实现图片幻灯片式的切换(所有图片轮流显示,每次显示一张)
HTML 部分<div id="img-wrap"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg">&原创 2018-04-10 20:30:17 · 6986 阅读 · 0 评论 -
支持select下拉框选择输入和键盘输入两种输入方式并且支持手动换行
接收到一个需求,目标是实现一个工具可以支持select下拉框选择输入和键盘输入两种输入方式同时支持手动换行。1、键盘输入默认情况下div标签是不可编辑的,加上contenteditable="true"之后使得div标签变成可编辑状态,我们可以随意修改div的内容。div(class="tt" contenteditable="true") 鹅鹅鹅,曲项向天歌。白毛浮绿水...原创 2019-06-05 14:44:37 · 3603 阅读 · 0 评论 -
vue--记住页面的滚动高度,再次返回该页面时自动滚动到当前高度
1、获取页面滚动高度document.documentElement.scrollTop2、什么时候获取页面滚动高度路由变化,离开当前页面时,可以在以下3个方法内获取页面滚动高度并记下来beforeDestroydestroyedbeforeRouteLeave3、保存页面滚动高度经过第一步和第二步已经可以在离开该页面时获取页面滚动高度了,但是由于在此返回该页面时需要再次滚动到当前高度。因此,需要把整个高度给记下来。。。。。。那么记录到哪里呢?我们知道可以在路由信息部分添原创 2020-10-07 22:53:29 · 2238 阅读 · 1 评论 -
javascript 实现全屏滚动
全屏滚动的过程会逐步优化,从最基本的功能开始。全屏滚动每张图都占满整个浏览器窗口,当滑动鼠标或者触摸板时,图片切换。事件onmousewheel ,鼠标滚轮滚动事件,当鼠标滚动或者滑动触摸板时,该事件触发。可在该事件触发时进行图片切换。一个问题在页面上测试时发现,每次滑动触摸屏,onmousewheel 触发了很多次,如果每次触发都进行图片切换显然是不合适的。所以,这里可以用到事件节流,当onmousewheel事件触发结束后一段时间后再进行图片的切换。代码HTML部分 <d原创 2020-08-06 21:15:23 · 1134 阅读 · 0 评论 -
数组扁平化的一些方式
数组扁平化 ,是指将这样的数组[1,2,[3,4,[4,5,4],1,2,[4,5]],4]转换成[1, 2, 3, 4, 4, 5, 4, 1, 2, 4, 5, 4]的过程1、直接使用ES6 的方法 array.flat()flat()flat()是ES6中的新方法,可以用于拉平数组,且不会改变原数组。flat()的参数是个数字,默认是1,决定可以拉平几层。如果不管有多少层,都想要拉平的话,参数可以设置为Infinity const arr=[1,2,[3,4,[4,5,4],1,2,[4,原创 2020-09-28 16:20:28 · 103 阅读 · 0 评论 -
js判断两个对象是否相等---2种方式
1、JSON.stringify(obj)这种方法,简单易实现。但有一个缺点:当对象里key值的顺序不一致时,比较就会出问题了。并且在JSON.stringify()时,一些特殊类型的值,比如undefined,Date,RegExp等会丢失或者变形。 var obj1={ name:111, age:222, dis:[1,2,3,4], info:{ like:"hx", ar原创 2020-09-30 17:44:17 · 2809 阅读 · 0 评论 -
使用 文本选区Selection实现颜色标注、字体修改、图片插入
1、实现目标鼠标拖拽选取文字,可对选取的文字设置背景色、修改字体大小可取消对背景色、字体大小的设置,重新选取设置背景色不能交叉重叠2、文本选区Selection文本选区表示选择的文本范围或者插入符号的当前位置。简单来讲,每当拖拽鼠标或者点击鼠标就会形成文本选区。2.1、获取文本选区var selection=window.getSelection()2.2 文本选区常用属性介绍2.2.1 typetype表示文本选区的类型:目前有3种取值 None、Range和Caret原创 2021-06-22 20:28:20 · 1308 阅读 · 2 评论 -
CSS 实现 一些简单的loading
1、loading效果11.1 html <h1>loading效果</h1> <div class="loading1"> <span></span> <span></span> <span></span> <span></span> <span></span原创 2020-10-11 16:19:04 · 541 阅读 · 1 评论 -
一个特殊的字符串拼接
前段时间遇到一个需求,最后一个步骤是进行字符串的拼接。1、需求首先选择字符串片段:通过鼠标或者触摸屏选中字符串的任意范围。第一步,选取需要精确处理的,选取次数不限制。第二步,选取需要普通处理的,选取次数不限制。每一次的字符选取都能得到开始位置和结束位置。拼接规则:对于需要精确处理,在拼接字符串时要在开始位置插入*,同时在结束位置插入*。对于需要普通处理的,在拼接字符串时要在开始位置插入#,同时在结束位置插入#。若是需要精确处理和需要普通处理的开始位置相同,则在开始位置插入#*,若是需原创 2021-02-18 15:50:14 · 351 阅读 · 0 评论 -
写一个函数,输出四次“hello world“,每次间隔3秒
思路使用setTimeout ,每三秒输出一次使用一个计数标志,每输出一次加一, 判断次数决定是否继续输出代码 function repeat4(str, num, time) { var flag = 0; function st() { setTimeout(function () { if (flag > num-1) {原创 2020-07-26 16:36:16 · 1434 阅读 · 0 评论 -
当前页面中使用了多少种html标签
如题,1、想到的第一个方法,使用JavaScriptdocument.getElementByTagName("*"),根据元素标签名获取元素,当参数为* 时,表示所有元素。document.querySelectorAll("*"),返回与指定的选择器组匹配的文档中的元素列表,当参数是*时,表示所有标签。但是,别的解决方式呢??2、正则写个正则表达式,匹配当前.html中的所有 HTML标签,,该去重去重,该干嘛干嘛。。。2.1 表达式var pt=/\<([a-zA-Z0-原创 2020-10-22 18:49:27 · 334 阅读 · 0 评论 -
数字 转 中文
会遇到这样的情况,需要将数字123 转换成对应的中文写法 “一百二十三” 、 1234 转成对应的中文写法 “一千二百三十四”写一个方法,实现这个转换过程这个问题的解法 和 要求会逐步完善,先从简单的开始思路将数字拆成数组,写一个数组,里面存放单位 “个、十、百、千、万”,另一个数组,存放 零到十...原创 2020-10-12 00:57:56 · 1911 阅读 · 0 评论 -
实现一个sleep效果
sleep效果。函数执行到某处之后,暂停一段时间后 接着执行思路使用await 等待一段时间,之后接着执行await 要写在async内部await 等待的是 后面的表达式的执行结果,等到结果之后会接着执行后面的语句让await后面的语句,在一段时间之后再返回结果 。可借助定时器setTimeoutasync function sleep_(){ for(let i=0;i<1000;i++){ if(i==500){ await someTime(原创 2020-08-02 18:00:31 · 536 阅读 · 0 评论 -
使用node.js创建一个简易服务器,让本地的HTML页面可以通过localhost方式访问
最近一直在复习当中,所以会一写 HTML/js什么的。但是都是通过file:///Users/baiyinyu/Documents/privateProgram/test/918.html的方式去查看执行结果的。 。。。。看起来丑不说, 其他电脑上也不能访问这个。。。 也不能在手机上访问这个页面。。。。。。。。。就在想啊,本地的vue项目为什么可以通过localhost:port的方法访问了, 怎么做才能实现这个效果呢?这时候我们的node.js就派上用场了。。。。。注:这篇文章只实现了最简单最基础原创 2020-09-28 20:52:54 · 3853 阅读 · 1 评论 -
HTML标签的margin设为负值会怎么样
首先一句话,元素的标签设置为负值之后,新建了个HTML页面试了下。情况比较多、和元素的display有关。。。。假设 给元素设置 margin:-40px基本情况1、元素设置了宽度和高度 且 display:block元素会向上偏移40px元素会向左移动40px2、元素没有设置宽度 且 display:block元素会向上偏移40px不设置宽度,此时元素的宽度等于父元素的宽度+40px*2并向左偏移40px3、元素设置了宽度和高度、且display:inline-block元素原创 2020-10-11 16:31:24 · 311 阅读 · 0 评论 -
手动实现一个promise
问:你能手写一个Promise吗? 。。。。。。。。。。。。时间静止了。。Promise用了不少,但是从来没尝试自己实现下,好吧,开始写了Promise的参数是一个函数,这个函数有2个参数,分别是resolve 和rejectPromise的状态一开始是pending,满足某些条件是,状态变为resolved, 不满足某些条件时,状态变为rejected通常通过将Promise作为一个构造函数,通过new 进行调用会在then()中接收,resolve 和reject的返回信息第一版原创 2020-10-12 20:09:43 · 136 阅读 · 0 评论 -
webpack 相关的一些问题
可视化分析工具 webpack-bundle-analyzer1、安装 cnpm install webpack-bundle-analyzer2、配置,去网上找教程3、查看分析结果 npm run build --report4、浏览器 打开 127.0.0.1:8888 可以看到分析结果,面积越大、占用的时间、内容越多1、loader 处理文件的优化loader处理文件是很消耗时间的,可以开启缓存,尽量让最少的文件进行loader处理babel-loader?cacheDirector原创 2020-10-13 22:35:25 · 278 阅读 · 0 评论 -
artTemplate 学习笔记
artTemplate ------ JavaScript模板引擎。快速上手1、下载artTemplate.js 文件并在页面中引入,下载地址:点击打开链接 2、在HTML文档中添加一个type="text/html"的script标签 存放模板。<script type="text/html"> <p>{{title}}</p> <ul&g...原创 2018-05-04 23:01:24 · 369 阅读 · 0 评论 -
position:sticky
一直以来都忽略了position:sticky这个属性现在回过头一看,我都错过了些什么。。。。。。position:sticky简介设置了position:sticky的元素并不会脱离文档流。当元素在区域内,元素不受定位的影响(top、left等设置无效)当发生滚动,元素就要移出区域时,定位又会变成fixed,根据设置的left、top的值进行定位,像是fixed效果 tagg{ position:sticky; top:0; }必须注意的点设置了po原创 2020-10-12 22:12:33 · 28070 阅读 · 3 评论 -
vue2+typescript 项目、相关配置
1、新建项目并引入typescripe相关的loader、依赖包1.1新建项目vue init webpack 项目名称1.2 添加 typescript 以及 ts-loadercnpm install typescript ts-loader --save1.3 添加运行依赖包cnpm install vue-class-component vue-property-decorator --save2、配置webpack 、添加配置、文件引入的改动2.1 打开webp原创 2020-10-21 23:57:28 · 2857 阅读 · 1 评论 -
px、em、rem
px、em、rem都是用来描述字体大小的单位pxpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。任意浏览器的默认字体大小都是16px。给HTML标签设置font-size属性并赋值,将根据设置的值显示字体, 其子标签若没有单独设置font-size,子标签的字体大小和父标签一致。否则,按设置的值显示。支持度:目前所有浏览器。原创 2018-01-19 20:32:07 · 393 阅读 · 0 评论 -
iframe
在看公司数据平台代码时,发现一些地方使用了iframe标签。虽没有使用过iframe,但是一直听说尽量不要使用iframe。so,借此机会了解一下到底为什么。iframe标签所有的浏览器都支持标签。iframe元素会创建包含另一个文档的内联框架(即行内框架)。可以把需要的文本放置在 和 之间,这样就可以应对无法理解 iframe 的浏览器。简原创 2018-01-17 00:50:27 · 308 阅读 · 0 评论