一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

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标准也因此只是草案阶段)。

龙生   11 Aug 2023
View Details

JS基础系列之 —— WebSocket

假设我们现在有这样一个需求：多人聊天室。我的思路是客户端发送消息给服务器，然后服务器把聊天信息全部返回，看起来比较简单哈，但是其中有一个问题，如果我不发消息的话，服务器怎么把其他人的聊天信息返回呢？一个比较笨的方法就是一直询问服务器，其他人是否发消息。出现这样的情况是因为http协议是单向通信，只支持客户端到服务端的通信，不支持服务端到客户端的通信，那我们有没有什么更简单的解决方案呢？为了解决实时数据传输和双向通信的需求，我们的主角WebSocket登场了。

龙生   30 May 2023
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

龙生   29 May 2023
View Details

js获取当前毫秒数

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

龙生   12 May 2023
View Details

谁会拒绝一款开源的 3D 博客呢？

说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力的小鸟，应该都有过一段 “装扮” 博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么 “打扮”，也跳脱不出平面的 “凡胎”。

今天 HelloGitHub 给大家带来的是一款开源的 3D 博客项目，实话说我第一次访问这个博客的时候都惊呆了，颠覆了博客的认知。进去后需要通过操控一辆 3D 的小汽车，自己 “找到” 文章才可以阅读，特别有意思！

龙生   17 Mar 2023
View Details

VUE项目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

龙生   09 Mar 2023
View Details

html颜色代码暗黑模式,Html页面支持暗黑模式如何实现 Html页面支持暗黑模式实现代码…

本篇文章小编给大家分享一下Html页面支持暗黑模式实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。 准备 其实，我们只是需要使用到css中的prefers-color-scheme 媒体查询。 no-preference 表示用户未制定操作系统主题。作为布尔值时，为false 输出。 light 表示用户的操作系统是浅色主题。 dark 表示用户的操作系统是深色主题。 说明 此方法只是一个简单demo，可以使用该方法拓展出其他实现方式。 prefers-color-scheme说明 DEMO地址 HTML 页面适应黑暗模式 测试文字 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.back {background: white; color: #555;text-align: center}
 
@media (prefers-color-scheme: dark) {
 
.back {background: #333; color: white;}
 
.models {border:solid 1px #00ff00}
 
}
 
@media (prefers-color-scheme: light) {
 
.back {background: white; color: #555;}
 
.models {border:solid 1px #2b85e4}
 
}

  from:https://blog.csdn.net/weixin_39610678/article/details/117835878

龙生   05 Mar 2023
View Details

CSS滤镜调节图片或地图颜色

原始图片 滤镜调节后效果： 代码中替换图片即可：

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./tianditu.jpg" id="tiimg" style="width: 50%;"/>
<br>
<span>高斯模糊：blur(<span id="showblur"></span>px)</span><input id="gaosi" type="range"  value="0" onchange="document.getElementById('showblur').innerHTML=value" />
<br>
<span>黑白效果：grayscale(<span id="showgrayscale"></span>%)</span><input id="heiba" type="range"  value="0" onchange="document.getElementById('showgrayscale').innerHTML=value" />
<br>
<span>怀旧效果：sepia(<span id="showsepia"></span>%)</span><input id="huaij" type="range"   value="0" onchange="document.getElementById('showsepia').innerHTML=value"/>
<br>
<span>反色效果：invert(<span id="showinvert"></span>%)</span><input id="fansx" type="range"  value="0" onchange="document.getElementById('showinvert').innerHTML=value"/>
<br>
<span>透明效果：opacity(<span id="showopacity"></span>%)</span><input id="toum" type="range"  value="0" onchange="document.getElementById('showopacity').innerHTML=value"/>
<br>
<span>图饱和度：saturate(<span id="showsaturate"></span>%)</span><input id="baof" type="range"  value="0" onchange="document.getElementById('showsaturate').innerHTML=value"/>
<br>
<span>色相：hue-rotate(<span id="showhuerotate"></span>deg)</span><input id="sex" type="range"  value="0" onchange="document.getElementById('showhuerotate').innerHTML=value" max="360"/>
<script>
var tup = document.getElementById("tiimg");
var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;var sex=0;
// 高斯模糊
document.getElementById("gaosi").addEventListener("input",function()
{
blur=this.value;
flisd();
});
//黑白效果
document.getElementById("heiba").addEventListener("input",function()
{
hbxg=this.value;
flisd();
});
//怀旧效果
document.getElementById("huaij").addEventListener("input",function()
{
hjxg=this.value;
flisd();
});
//反色效果
document.getElementById("fansx").addEventListener("input",function()
{
fans=this.value;
flisd();
});
//透明效果
document.getElementById("toum").addEventListener("input",function()
{
tmxg=this.value;
flisd();
});
//饱和效果
document.getElementById("baof").addEventListener("input",function()
{
baohd=this.value;
flisd();
});
//色相
document.getElementById("sex").addEventListener("input",function()
{
sex=this.value;
flisd();
});
function flisd(){
if(baohd==0){baohd=2;}
tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) sepia("+hjxg+"%)  invert("+fans+"%)  opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%)  hue-rotate("+sex+"deg)";
}
 
</script>
</body>
</html>

  更多属性请查看官方文档尝试：   from:https://blog.csdn.net/josiecici/article/details/127629212

龙生   05 Mar 2023
View Details

VS Code 格式化后 自动让函数名后有空格

嗨，大家好！今天给大家分享一下，怎么在vscode中给函数名后边加空格，让函数名和（）之间有空格，这里大家要注意的是：Prettier – Code formatter并不能实现这个功能，我们需要借助Vetur来实现，以前小编一直很迷，为什么配置都配置了。我们还是没有效果，其实是用错插件了，我们应该用Vetur.

龙生   03 Dec 2022
View Details
1 2 … 63

Copyright © 2023 Longsheng All rights reserved.