Xzavier

行到水穷处,坐看云起时

自己管理node版本 不用nvm,n

不用Nvm 和 N,我们怎么管理Node版本呢? 其实我在我的mac上还是用的nvm,也用过n进行node版本管理,升级呀切换呀什么的。 但是node人家没说一定要个node版本管理器是吧,假如你有洁癖,就是不想用这些东西,那你可以往下看看。 安装Node 首先下载node版本包,我们就放在 /usr/local 下吧 cd /usr/local 然后下载包 wget "ht...

用CSS3的resize实现拖拽改变大小及分屏 JS实现更多细节

前端开发中,可能遇到需要双屏操作或者左右布局可拖拽的需求。 我们可以用一个盒子装两个左右布局的盒子,左边宽度为 w , 则右边宽度为 100% - w 。 动态的改变w值,即可操控两边的盒子宽窄你来我往。怎么改变呢,你可以这样: 1、设计几个按钮,固定的点选左右盒子宽度比; 2、使用 <input type="range" id="rang-slider" name="r...

截图上传 上传clipboardData里的图片内容

疫情期间,在家办公,虽说少了上班路上的消耗,但工位确实没有公司舒服。希望疫情早点过去,我们摘下口罩,欢快地讨论技术和需求。 上传截图在我们平时的开发中少有遇到,遇到了我们就自己实现一把。嗯,截图的事情,与产品讨论后,我们就不实现了,不管是微信,QQ,还是我们自家社交APP,毫无疑问截图这个功能是不可或缺的。 思路 截完图,得找个地方粘贴 粘贴,我们就能拿到剪切板的内容,从而过...

前端捕获麦克风录音 && 语音聊天 Capturing Audio && Voice Chat

Demo && Code 语音聊天 Demo 二维码: Android Chrome支持OK,IOS微信扫码然后用Safari打开测试,需要IOS11以上。 思路 目前主要思路为: 1、navigator.mediaDevices.getUserMedia捕获用户麦克风,获取录音数据; 2、处理音频流最后将数据转换为可播放的数据; ...

捕获用户麦克风 && 摄像头 Capturing Audio && Video

Use It 捕获麦克风 控制台输入下面代码实现麦克风捕获,戴上耳机,就可以听到你说话的声音了: const aconstraints = { audio: true}; navigator.mediaDevices.getUserMedia(aconstraints) .then(function(mediaStream) { const audio = document....

Web Speech 语音 && 麦克风 SpeechSynthesisUtterance SpeechSynthesis SpeechRecognition

Use It 语音朗读 控制台输入下面代码实现语音朗读: let ssu = new SpeechSynthesisUtterance(); ssu.text = 'hello, xzavier.' window.speechSynthesis.speak(ssu); 实际使用中,可通过volume, rate, pitch, voice, lan...

DIY video player 自定义video播放器样式

DIY 本文基于HTML5 Video API,自定义Web视频播放器样式。 其实吧,原生的video 标签样式挺好看的,但每个人的视觉感受不一样,所以就会有需要改变原生样式的时候。 那就给它化个妆咯。淡妆,淡妆。 【code here】 <video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768...

DIY audio player 自定义audio播放器样式

之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。 场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。 哦,可能还会涉及到自动播放。【这里】 DIY 以上场景,我们一般都看不到Audio的样式,基本都被隐藏了。因为对于新时代的我们来说,暂时还没有get它的美。 但是,我们要控制音频的播放,直观的看到时间进度等,那就需要展示这东西了。世上没...

Iframe攻防 见招拆招那些事儿

iframe - 见招拆招 iframe - 防止被嵌套,防止别人阻止自己的页面被嵌套,一攻一防,功守道 第一招 - 打拳 - 使用别人的页面 <iframe src="https://www.google.com"></iframe> 当然,这是最简单的招了,也阔以说是写笔记为了凑招,哈哈,反正iframe一下就可以套用别人的页面了。 你所了解的什么攻击啊...

前端随便玩儿 一些有趣的

做在前端,学在前端,玩在前端,爱在前端。 前端一些好玩的事儿,看我们平时都能弄些什么玩儿。 鼠标点击效果 (function () { var playWords = ['喝热水', '吃了没', '早点睡', '在开会', '多穿点', '是我妹', '有点贵', '我很累', '你别闹', '真没有', '喝多了', '对不起'], colors = ['#f...