Category Archives: JavaScript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
原理分析
提取操作：复制=>粘贴=>上传
在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传
为方便理解下文，需要先明白几点：
我们只能上传网页图(在网页上右键图片，然后复制)和截图(截图工具截的图片，eg：qq截图)，不能粘贴上传系统里的图片(从桌面上、硬盘里复制)，他们是存在完全不同的地方的。
截图工具截的图与在网页点击右键复制的图是有些不同的，因此处理方式也不一样。
知悉paste event这个事件：当进行粘贴（右键paste/ctrl+v）操作时，该动作将触发名为’paste’的剪贴板事件，这个事件的触发是在剪贴板里的数据插入到目标元素之前。如果目标元素（光标所在位置）是可编辑的元素（eg：设置了contenteditable属性的div。textarea并不行。），粘贴动作将把剪贴板里的数据，以最合适的格式，插入到目标元素里；如果目标元素不可编辑，则不会插入数据，但依然触发paste event。数据在粘贴的过程中是只读的。此段是翻译于w3.org_the-paste-action。
可惜的是，经过试验，发现chrome(当前最新版)、firefox(当前最新版)、ie11对paste事件的实现并不是完全按照w3c来的，各自也有区别(w3c的paste标准也因此只是草案阶段)。
JS基础系列之 —— WebSocket
假设我们现在有这样一个需求：多人聊天室。我的思路是客户端发送消息给服务器，然后服务器把聊天信息全部返回，看起来比较简单哈，但是其中有一个问题，如果我不发消息的话，服务器怎么把其他人的聊天信息返回呢？一个比较笨的方法就是一直询问服务器，其他人是否发消息。出现这样的情况是因为http协议是单向通信，只支持客户端到服务端的通信，不支持服务端到客户端的通信，那我们有没有什么更简单的解决方案呢？为了解决实时数据传输和双向通信的需求，我们的主角WebSocket登场了。
View Details使用 js 测试 websocket 连接
参考：https://blog.csdn.net/linysuccess/article/details/109223712 配合上篇文章，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebSocket测试</title> <script> function initWebSocket(wsUri) { var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { console.log('连接建立中... '+wsUri); }; websocket.onclose = function(evt) { console.log('连接关闭中...', evt); }; websocket.onmessage = function(evt) { console.log('收到来自服务端的消息：', evt.data); }; websocket.onerror = function(evt) { console.log('发生错误...', evt); }; return websocket; } // 在此配置 websocket 的地址 var websocket = initWebSocket("ws://localhost:8020/ws"); var msg, i = 0; var loop = setInterval(function(){ msg = "Hello " + (i++); if(websocket.readyState == WebSocket.OPEN) { websocket.send(msg); console.log('已发送消息：' + msg); } else { clearInterval(loop); console.log('连接已关闭，拜拜~'); } }, 3000); </script> </head> <body> 请按 F12 打开控制台查看消息 </body> </html> |
from:http://www.manongjc.com/detail/22-lipyczhcovoolme.html
View Detailsjs获取当前毫秒数
js获取当前毫秒数（+new date()） 前言 在看视频的时候发现老师获取当前日期的毫秒表示时使用了let t1 = +new date()的写法，起初没有明白代码的含义，经过测试发现为日期的毫秒表示； 详情 代码：
|
1 2 3 4 5 6 |
<script> let d1 = +new Date(); //1630316745222 let d2 = new Date(); //Mon Aug 30 2021 17:46:28 GMT+0800 (中国标准时间) console.log(typeof d1 +':'+ d1 ) console.log(typeof d1 +':'+ d2) </script> |
解释： 经测试和查阅后得知**+new Date ()**相当于调用 Date.prototype.valueOf ()方法，返回的是当下的时间距离1970年1月1日0时0分0秒的毫秒数 获取当前时间毫秒数的方法 +new Date() new Date().valueOf() new Date().getTime() Date.parse(new Date()) 注意：精确到秒，会将后三位舍弃为0
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> //new Date().valueOf() let d1= new Date().valueOf(); console.log(d1) //1630318883445 // new Date().getTime() let d2= new Date().getTime(); console.log(d2) //1630318883445 //Date.parse(new Date()) let d3 = Date.parse(new Date()); console.log(d3) //1630318883000 </script> |
from:https://blog.csdn.net/Ldcrle/article/details/120002457
View Details
谁会拒绝一款开源的 3D 博客呢？
说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力的小鸟，应该都有过一段 “装扮” 博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么 “打扮”，也跳脱不出平面的 “凡胎”。
今天 HelloGitHub 给大家带来的是一款开源的 3D 博客项目，实话说我第一次访问这个博客的时候都惊呆了，颠覆了博客的认知。进去后需要通过操控一辆 3D 的小汽车，自己 “找到” 文章才可以阅读，特别有意思！
View DetailsVUE项目build报错的解决办法（ERROR in static/js/vendor.xxxxx.js from UglifyJs）
一直运行很好的项目突然build报错了，错误信息如下：
|
1 2 3 |
ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs Unexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11] Build failed with errors. |
在 UglifyJs 的 github issues #78 找到了这样一个解决方案：由于 UglifyJs 只支持 ES5 而 element-ui 可能引入了一部分 ES6 的写法，所以导致 webpack 打包失败。issue 里最后给出的解决方案是用 beta 版本的Uglify-es 来代替 UglifyJs（Beta 版本引入了对 ES2015+）的支持。需要在前端工作目录下用执行命令 npm i -D uglifyjs-webpack-plugin@beta。 不过在尝试过后，发现 build error 的问题依然没有解决，在深入查找问题所在后，决定用 bable 来解析 element-ui， 要完成此操作只需要修改前端文件夹下的build/webpack.base.conf.js 文件即可，修改如下： 修改前
|
1 2 3 4 5 6 7 8 |
module: { rules: [ ... { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, |
修改后
|
1 2 3 4 5 6 7 8 9 |
module: { rules: [ ... { test: /\.js$/, loader: 'babel-loader',//注意elementUI的源码使用ES6需要解析 include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')] }, ... |
相当于将 element-ui 加入需要 babel 解析的包中。 之后再次执行 npm run build， build 成功。 转载自以下文章： 原文地址 from:https://blog.csdn.net/sing_sing/article/details/79146265
View DetailsHTML canvas strokeStyle 属性
Canvas 对象 实例 绘制一个矩形。请用红色的笔触颜色：
|
1 2 3 4 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.strokeRect(20,20,150,100); |
尝试一下 » 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。 注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 定义和用法 strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。 默认值： #000000 JavaScript 语法： context.strokeStyle=color|gradient|pattern; 属性值 值 描述 color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。 gradient 用于填充绘图的渐变对象（线性 或 放射性）。 pattern 用于创建 pattern 笔触的 pattern 对象。 更多实例 实例 绘制一个矩形。使用渐变笔触：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var gradient=ctx.createLinearGradient(0,0,170,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.lineWidth=5; ctx.strokeRect(20,20,150,100); |
尝试一下 » 实例 用一个渐变笔触来写文本 "Big smile!"：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Verdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.strokeText("Big smile!",10,50); |
尝试一下 » Canvas 对象 from:https://www.runoob.com/jsref/prop-canvas-strokestyle.html
View Details