javascript
关注
分享
扫一扫
ByteFlys
这个作者很懒，什么都没留下…
展开
-
[ Javascript ] TypeScript Serialize with Decorator
[ Javascript ] TypeScript Serialize with Decorator原创 2025-02-05 09:07:38 · 217 阅读 · 0 评论 -
[ Javascript ] Typescript Mixin Class and Interface
[ Javascript ] Typescript Mixin Class and Interface原创 2025-02-05 09:06:41 · 95 阅读 · 0 评论 -
[ Javascript ] Run TypeScript Task In Serial
[ Javascript ] Run TypeScript Task In Serial原创 2025-02-04 19:26:20 · 130 阅读 · 0 评论 -
[ Javascript ] Define a Customized Iterator
[ Javascript ] Define a Customized Iterator原创 2025-02-04 19:25:03 · 107 阅读 · 0 评论 -
[ Javascript ] WebStorm Create Node+TypeScript Project
[ Javascript ] WebStorm Create Node+TypeScript Project原创 2025-02-03 15:21:27 · 521 阅读 · 0 评论 -
透明度对应十六进制
Alpha DEC HEX原创 2024-08-05 21:33:08 · 614 阅读 · 0 评论 -
【MQTT】Javascript通过WebSocket连接MQTT
通过WebSocket服务，将MQTT服务收到的消息转发给网页，这样网页就也能使用MQTT协议了。SSL证书可以自己去制作，另外自制证书本来就是不安全的，需要自己想办法在网页中添加信任。这步比较麻烦，如果需要使用SSL，自己单独去研究下，这里主要讲解网页怎么使用mqtt。一个变通的方法是，在同一个程序中，同时集成MQTT服务和一个WebSocket服务。标准的MQTT是通过TCP协议来进行通信的，这样网页就没法使用MQTT协议了。当然，也可以不用MQTT协议，全部通过WebSocket来通信也可以。原创 2022-11-09 10:18:00 · 2730 阅读 · 0 评论 -
【NodeJs】Electron安装
什么是electron全局安装指定版本的electron，registry参数指定使用国内下载源，更快更稳定全局安装指定版本的electron-builder，该模块用于将electron打包为发布程序查看全局electron版本查看全局electron-builder版本全局卸载electron全局卸载electron-builder...原创 2022-06-10 17:04:52 · 1558 阅读 · 0 评论 -
【Linux】Linux下安装nodejs和npm
这里用的是Ubuntu20，安装指令如下切换至root用户sudo su root安装nodejsapt install nodejs-legacy安装npmapt install npm修改npm源npm config set registry https://registry.npm.taobao.org更新npmnpm install npm@stable -g安装npm模块，-g表示全局安装，否则只在当前文件夹安装npm install xxx -g启动服务node xx原创 2021-09-23 22:57:56 · 658 阅读 · 0 评论 -
【Javascript】【开发琐事】socket.on(‘close‘)断线回调不执行
//定时发送心跳 //websocket的onclose方法是不准确的 //只有websocket调用close方法关闭，才会触发onclose //为了让onclose回调准时触发，我们可以定期发送心跳，强制通知服务端socket状态 setInterval(() => { let msg = { type: "heart" }; for (let socket of clients) if (socket.readySt..原创 2021-07-10 14:40:17 · 1569 阅读 · 1 评论 -
【Javascript】【开发琐事】Javascript关闭通过getUserMedia打开的摄像头
解决方法 一种直接遍历所有的stream和track，把所有track全部停止 一种是直接把video标签的视频源直接置空代码 //记住，是所有的stream和track //不是只关闭一个，要遍历 stream.getTracks()[0].stop() //video标签视频源置空 localVideo.srcObject = null; remoteVideo.srcObject = null;...原创 2021-07-06 17:28:07 · 1934 阅读 · 0 评论 -
【Javascript】【视频录制】通过video标签和canvas实现视频截图录制和下载
录像原理 创建一个画布，video标签本身不具备记录画面功能，所以我们需要通过Canvas来达成这个功能 创建一个录制器，与CanvasStream绑定，这样画布绘制什么，录制器都能触发回调 创建一个定时器，不停通过CanvasContext来捕捉video标签画面，然后绘制到Canvas上面 创建一个字节数组，只要Canvas捕捉到新画面，就会触发MediaRecorder数据回调，将...原创 2020-02-24 14:18:23 · 8158 阅读 · 14 评论 -
【Javascript】【UI】懒人技巧：通过filter实现通用背景hover，active状态切换
一般网页中的按钮会对应三张背景图片，normal状态，hover状态，active状态但是图片更多，就会让代码更多，管理更麻烦，需要消耗很多额外的精力当我们对背景状态切换没有特殊需求时，可以通过filter来实现一个通用的状态切换功能button { &:hover { filter: brightness(0.95); } &:...原创 2019-08-07 11:31:05 · 668 阅读 · 0 评论 -
【Javascript】【上传文件】原生javascript代码实现文件上传
<!DOCTYPE html><html> <body> <input id="file" type="file" multiple> <button id="button">Commit</button> </body> <script type...原创 2019-08-05 20:05:25 · 251 阅读 · 0 评论 -
【Javascript】【UI】纯原生代码实现树状控件：TreeView
此控件参考aimaraJS优化而来，由原生js实现，注释详细，代码最大幅度简化不依赖任何库，只有一个js文件和一个css文件效果展示html代码<html> <head> <title>TreeView</title> <link rel="icon" href="./image/tree.p...原创 2019-08-04 16:44:40 · 5132 阅读 · 0 评论 -
【Javascript】【CSS】通过css设置img标签的src
.tree-toggle-off { content:url(../image/toggle-off.png);}.tree-toggle-on { content:url(../image/toggle-on.png);}原创 2019-08-01 09:35:02 · 4884 阅读 · 7 评论 -
【程序人生】短期技术规划
不学习新的语言，继续学习Android，Java后台，javascript前端和C++ Java后台和javascript前端，达到开发普通应用游刃有余的程度即可，不追求深度 C++仅用于开发桌面工具，用于辅助其它项目的可视化管理，需要什么学什么，不追求技术栈完整度和深度 不考虑大数据，人工智能，音视频，硬件，操作系统，特定方向技术专家等方向，先实现已有目标 几年内专注于完善已有的技术...原创 2019-07-14 11:59:02 · 283 阅读 · 0 评论 -
【Javascript】【权限控制】NodeJS允许跨域请求
在nodejs的启动文件里加上如下代码let express = require("express");let app = express();app.use(express.static("web-resource"));app.use("*", (req, res, next) => { res.header("Access-Control-Allow-Origin",...原创 2019-07-07 12:39:47 · 435 阅读 · 0 评论 -
【Javascript】【LocalStorage】SessionStorage和LocalStorage区别
SessionStorage和LocalStorage都可以将网页中的数据存到本地他们的区别主要在于作用范围：SessionStorage只对当前会话有效而LocalStorage对相同域名的网站都有效 以下页面均会被视为同一会话 -> 当前页面 -> 通过window.location.href跳转的页面 -> 通过window.locat...原创 2019-07-04 10:27:39 · 245 阅读 · 0 评论 -
【Javascript】【网页地址】window中的location对象详解
如上图所示，这是window.location对象的一些常用属性，我们可以通过它来做以下事情原创 2019-07-04 08:53:14 · 790 阅读 · 0 评论 -
【Java】【通信安全】怎么保证http请求的安全性
要保证http请求的安全性，首先我们得知道，http有哪些安全隐患，再针对每个问题，寻找对策。先有问题，才有解决方法，不要空谈技术。假设我们的电脑上被人偷偷安装了窃听软件，或者我们使用的路由器，代理服务器被人安装了抓包软件，这样我们的ip，所有通信数据，都是可以被别人轻松捕获的。网页源码只需打开浏览器控制台，所有人都可以看到。如果是Java代码，也可以通过反编译看到。现在，我们的ip，通信...原创 2019-07-02 16:54:27 · 3174 阅读 · 0 评论 -
【Javascript】【CSS】给元素添加CSS样式的多种方式
这里只介绍比较好用的方法，使用起来比较麻烦的方式不再介绍 element.style.width = "500px"; element.style.cssText = "width: 500px"; element.style.setProperty("width", "500px", "important");...原创 2019-06-27 15:31:19 · 11175 阅读 · 0 评论 -
【Javascript】【事件】监听鼠标滚轮事件
Chrome浏览器滚轮事件用的是mousewheel，滚动值用的是event.wheelDeltaFirefox浏览器滚轮事件用的是DOMMouseScroll，滚动值用的是event.detailFirefox的滚动值很小，而且滚动方向相反综合以上特点，最后封装的兼容代码如下：//添加鼠标滚轮监听export function addMouseWheelListener(elemen...原创 2019-06-26 20:22:06 · 1529 阅读 · 0 评论 -
【Javascript】【事件】获取鼠标位置和元素位置
获取鼠标相当于窗口的位置：e.clientXe.clientY获取元素相当于窗口的位置：let rect = element.getBoundingClientRect();rect.toprect.bottomrect.leftrect.right通过对比鼠标位置和元素位置，我们可以判断出鼠标是否悬浮在一个元素上：let above = e.clientX >= rec...原创 2019-06-23 15:35:11 · 2410 阅读 · 0 评论 -
【Javascript】【语法】javascript对象的【||】和【&&】运算
【||】和【&&】运算符用于对象，而不是布尔值时，意义如下 【a || b】：a存在返回a，a不存在返回b 【a && b】：a存在返回b，a不存在返回a 运算原理 对象的与或运算，实际上与布尔值的与或运算规则是一样的 在js中，false，0，“”，null，undefined，NaN都被视为false 以&&运算为例，当a为以...原创 2019-06-19 10:18:38 · 1076 阅读 · 0 评论 -
【Android】【地图】地图控件功能设计
一个完整的地图控件应当包含对标记，图层，事件等基本元素的支持原创 2019-06-10 10:39:55 · 825 阅读 · 0 评论 -
【Javascript】【适配】取消移动网页全部默认样式和行为
css代码* { margin: 0; padding: 0; outline: none; text-decoration: none; -webkit-user-select: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}j...原创 2019-06-03 10:03:56 · 279 阅读 · 0 评论 -
【Html】【细节】html页面设置编码，标题，图标
<head> <meta charset="UTF-8"> <title>音悦台</title> <link rel="icon" href="../image/icon_app.png"/> </head>原创 2019-06-02 15:42:24 · 908 阅读 · 0 评论 -
【Javascript】【IDE】WebStorm安装Less编译插件
原创 2019-06-02 15:11:00 · 674 阅读 · 0 评论 -
【Javascript】【模块化】AMD和CMD规范的区别
AMD：Asynchronous Module Definition，异步模块定义CMD：Common Module Definition，通用模块定义AMD和CMD都是前后端都适用的模块化标准，AMD的代表实现方式有requireJs，CMD的代表实现方式有seaJsAMD和CMD的区别主要在于：原创 2019-05-30 18:12:46 · 351 阅读 · 0 评论 -
【Javascript】【模块化】通过commonJs实现模块化
commonJs是一种简单的模块化标准，已经被ES6制定为规范，但是尚未被浏览器完全支持，主要应用于nodeJs服务端。commonJs将每个文件视为一个模块，文件可以通过module.exports将自己的方法和对象作为接口暴漏给其它文件，其它文件可以通过require来引入模块接口module.jsmodule.exports = { message: "hello", ...原创 2019-05-30 17:55:27 · 447 阅读 · 0 评论 -
【Javascript】【模块化】通过seaJs实现模块化
seaJs是CMD前端模块化规范的实现，seaJs使用define和use关键字实现模块化，用法如下main.html<html> <head> <meta charset="UTF-8"/> <title>Webstorm</title> </head> <...原创 2019-05-30 17:22:33 · 308 阅读 · 0 评论 -
【Javascript】【模块化】通过requireJs实现模块化
define和require是requireJs实现模块化的关键字，requireJs是AMD前端模块化规范的实现，用法如下config.js//配置模块//声明哪些文件会被视为模块，声明后才能被define使用//左侧为模块名称，右侧为文件路径//模块名称不能为module，否则会异常require.config({ paths: { jquery: "jq...原创 2019-05-30 15:17:42 · 531 阅读 · 0 评论 -
【Javascript】【模块化】通过ES6新特性实现模块化
原创 2019-05-29 18:00:29 · 350 阅读 · 0 评论 -
【Javascript】【UI】实现移动端轮播图
html代码<html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=...原创 2019-05-28 17:47:18 · 582 阅读 · 0 评论 -
【CSS】【排列对齐】元素或内容在父div中居中显示的几种方式
原创 2019-05-28 14:25:17 · 1276 阅读 · 0 评论 -
【CSS】【超链接】css中a标签常见样式
<style> a { /* 取消下划线 */ text-decoration: none; /* 取消选中时的背景色 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 已...原创 2019-05-24 10:30:23 · 3974 阅读 · 0 评论 -
【Html】【UI】禁用移动网页中的号码邮箱自动识别
移动浏览器会自动将符合格式的文本，识别为号码邮箱我们可以通过以下代码来禁用这个功能 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <meta name="format-detect...原创 2019-05-24 09:26:00 · 768 阅读 · 0 评论 -
【Javascript】【事件】快速理解javascript中的事件处理机制
javascript中的事件处理机制其实很简单，这里以图文+代码，快速帮大家理解清楚先来看一个简化的页面白色部分为document，黄色部分为parent，橙色部分为child这里以点击事件为例，介绍javascript的事件处理机制如果我们点击了红色child区域，那么事件将会按照以下顺序传播事件捕捉阶段：事件从上往下逐个传递事件冒泡阶段：事件从下往上逐个传递，同时处理用户绑定的...原创 2019-05-23 17:37:40 · 557 阅读 · 0 评论 -
【Javascript】【事件】阻止全部元素，子元素，或父容器的默认行为
这里以右键菜单为例，默认网页中的所有元素，右键都会弹出菜单在事件冒泡过程中，只要有一个元素的事件处理器阻止了默认行为，默认行为便会被阻止在事件冒泡过程中，如果一个元素停止了冒泡，那么其父元素即使绑定了事件处理器，也不会执行具体原理请先学习javascript中的事件捕获，事件冒泡机制，下篇文章会专门补上javascript的事件机制下面我们通过详细的代码来进行测试，如果你能够弄清楚所有情景...原创 2019-05-23 16:12:33 · 1956 阅读 · 0 评论