javascript
ByteFlys
这个作者很懒,什么都没留下…
展开
-
透明度对应十六进制
Alpha DEC HEX原创 2024-08-05 21:33:08 · 244 阅读 · 0 评论 -
【MQTT】Javascript通过WebSocket连接MQTT
通过WebSocket服务,将MQTT服务收到的消息转发给网页,这样网页就也能使用MQTT协议了。SSL证书可以自己去制作,另外自制证书本来就是不安全的,需要自己想办法在网页中添加信任。这步比较麻烦,如果需要使用SSL,自己单独去研究下,这里主要讲解网页怎么使用mqtt。一个变通的方法是,在同一个程序中,同时集成MQTT服务和一个WebSocket服务。标准的MQTT是通过TCP协议来进行通信的,这样网页就没法使用MQTT协议了。当然,也可以不用MQTT协议,全部通过WebSocket来通信也可以。原创 2022-11-09 10:18:00 · 2479 阅读 · 0 评论 -
【NodeJs】Electron安装
什么是electron全局安装指定版本的electron,registry参数指定使用国内下载源,更快更稳定全局安装指定版本的electron-builder,该模块用于将electron打包为发布程序查看全局electron版本查看全局electron-builder版本全局卸载electron全局卸载electron-builder...原创 2022-06-10 17:04:52 · 1513 阅读 · 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 · 541 阅读 · 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 · 1443 阅读 · 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 · 1844 阅读 · 0 评论 -
【Javascript】【视频录制】通过video标签和canvas实现视频截图录制和下载
录像原理 创建一个画布,video标签本身不具备记录画面功能,所以我们需要通过Canvas来达成这个功能 创建一个录制器,与CanvasStream绑定,这样画布绘制什么,录制器都能触发回调 创建一个定时器,不停通过CanvasContext来捕捉video标签画面,然后绘制到Canvas上面 创建一个字节数组,只要Canvas捕捉到新画面,就会触发MediaRecorder数据回调,将...原创 2020-02-24 14:18:23 · 7717 阅读 · 14 评论 -
【HTML5】【CSS】Sass安装
转载 2018-05-09 15:04:17 · 566 阅读 · 0 评论 -
【javascript】【异步事件】怎么理解js是单线程的,但又可以实现异步编程
js的异步事件通常包括以下几类: 网络请求:ajax请求,服务端响应(随时发生) 计时器:setTimeOut,setTimeInterval(定时发生) 用户事件:鼠标,键盘,控件(随时发生) 浏览器事件:页面加载完毕,页面加载失败(随时发生) 以上情况下,代码的执行事件都是不确定的,或者不是立刻执行的,不可能由单线程来完成js是单线程的,指的是javascript语言是单线程的,...原创 2018-05-28 12:30:29 · 1012 阅读 · 0 评论 -
【javascript】【按键码】KeyCode
keycode 48 = 0 keycode 49 = 1 keycode 50 = 2 keycode 51 = 3 keycode 52 = 4 keycode 53 = 5 keycode 54 = 6 keycode 55 = 7 keycode 56 = 8 keycode 57 = 9keycode 65 = A keycode 66 = B keycod...原创 2018-05-28 16:51:03 · 289 阅读 · 0 评论 -
【Javascript】【DOM】ready和onLoad区别
转载自:https://www.cnblogs.com/telnetzhang/p/5881027.html $(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onload还是有区别的。最基本的区别1.执行时间 window.onloa...转载 2018-12-05 14:03:11 · 460 阅读 · 0 评论 -
【Javascript】【Debug】FireFox调试快捷键
按钮从左往右,功能依次是Resume【F8】继续执行,直到下个断点Step Over【F10】进入下一行代码Step Into【F11】进入方法内部Step Out【Shift+F11】跳出方法,或者进入方法内的下个断点...原创 2018-12-13 11:44:09 · 1620 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(一):NAT服务器
NAT英文全称是Network Address Translation,中文意思是“网络地址转换”,用于将内网IP映射成外网IPNAT的实现方法一般有三种:静态地址(Static NAT)、动态地址(Pooled NAT)、端口转换(Port-Level NAT)静态地址:每个内网IP对应一个外网IP动态地址:路由器持有一个外网IP池,内网设备动态使用这些IP端口转换:内网设备对外都是一样...原创 2018-12-18 16:05:15 · 570 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(二):STUN服务器
STUN全称Simple Traversal of UDP over NATs,翻译成中文就是“NAT 的UDP简单穿越”,它允许内网设备在NAT后发现自己的外网地址(ip和port)原创 2018-12-18 16:14:25 · 705 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(三):TURN服务器
TURN的全称为Traversal Using Relay NAT,翻译成中文就是“通过中继穿透NAT”在复杂的NAT实现下,STUN无法穿透NAT,这时就要通过中继服务器来实现穿透原创 2018-12-18 17:08:35 · 717 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(六):信令设计
两个设备之间建立RTC连接,需要知道彼此的地址,设备信息,媒体信息等信令服务器帮助两个设备交换这些信息,只要这些消息交换完成了,就可以建立连接具体信令设计是可以变通的,也不一定要用Socket,这里提供一种实现方案(网络上有很多现成的ICE服务器,按教程搭建即可,这里不再介绍)...原创 2019-01-11 15:48:50 · 595 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(七):服务端代码
let sockets = new Array();let rooms = new Array();let WebSocketServer = require('ws').Server;let server = new WebSocketServer({ port: 1991});//服务启动server.on('listening', function () { ...原创 2019-01-11 15:50:47 · 1005 阅读 · 0 评论 -
【Javascript】【WebRTC】WebRTC从原理到实现(八):客户端代码
let state = -1;let roomid = "10086";let peerId;let peerName;let peerConnection;let socket;//信令服务器const signalServer = "ws://120.197.7.239:1991";//ICE服务器const iceServer = { "iceServers": ...原创 2019-01-11 15:52:10 · 1238 阅读 · 0 评论 -
【IDE】【WebStorm】html排版设置head和body缩进
原创 2019-01-16 14:44:36 · 4337 阅读 · 0 评论 -
【Javascript】【注意事项】script标签不能自闭合
HTML中,除了<img>,<input>,<link>,<hr>等标签,其它标签是不能自动闭合的<script>和</script>必须分开,否则会导致javascript代码无法执行...原创 2019-04-15 22:43:20 · 1377 阅读 · 0 评论 -
【Javascript】【注意事项】语句末尾最好加上分号
javascript语句允许不加分号,但是最好加上,有些情况下没有分号会引起歧义比如以下代码,显示弹出hello,再执行了一个匿名函数alert("hello")(function () {})()但是编译器会理解为下面这种格式,会把alert的结果当成一个函数,把匿名函数当成一个参数,这样执行就会报错let a = alert("hello");let b = a(function...原创 2019-04-15 23:39:34 · 909 阅读 · 0 评论 -
【Javascript】【jQuery】模拟源码实现一个自己的jQuery
//模拟源码,封装一个自己的jQuery (window => { window.$$ = () => { let object = new Object(); object.value = "mQuery"; return objec...原创 2019-04-15 23:43:33 · 212 阅读 · 0 评论 -
【CSS】【display】css中的display属性
display用于设置一个html元素和其它元素之间的摆放方式, 它有以下几种取值:none:不显示block:块级元素,单独占据一行,可以设置宽高inline:内联元素,不换行,无法设置宽高inline-block:内联块级元素,不换行,但可以设置宽高inherit:继承父容器的display属性...原创 2019-04-21 15:00:28 · 385 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery实现Tab页切换功能
<body> <ul id="tab"> <li id="tab1"> Tab A</li> <li id="tab2"> Tab B</li> <li id="tab3"> Tab C</li> ...原创 2019-04-21 15:44:33 · 696 阅读 · 0 评论 -
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值:static:默认定位方式,子元素在父容器中挨个摆放absolute:绝对定位,元素不占据父容器空间,相当于文档body定位(如果元素的父级节点中有position不等于static的,则相当于最近的非static父节点定位)relative:相对定位,占据父容器空间,但显示位置相当于自身位置进行偏移fixed...原创 2019-04-21 18:07:07 · 5332 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery操作DOM
<script type="text/javascript" src="jquery-3.4.0.js"></script> <script type="text/javascript"> //$(function):文档加载完毕时执行方法 $(() => { $('#btn1')....原创 2019-04-16 21:12:54 · 106 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery遍历数组
//jQuery遍历数组 $.each(['a', 'b', 'c'], (index, item) => { alert(index + " " + item); });原创 2019-04-16 21:22:31 · 139 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery遍历自己内部的DOM元素列表
//jQuery遍历自己内部的DOM元素列表 $('button').each(function (index, item) { alert(this.innerHTML); });原创 2019-04-16 22:11:44 · 353 阅读 · 0 评论 -
【Javascript】【箭头函数】js的箭头函数没有this和arguments
js的箭头函数是没有this和arguments变量的,如果这2个变量可以打印出来值,那么他们一定是来自父级作用域的 function f() { this.a = 1; let b = () => alert(this.a); b(); } //弹出结果为1 ...原创 2019-04-16 22:18:23 · 3877 阅读 · 2 评论 -
【Javascript】【jQuery】jQuery对象是一个伪数组
jQuery对象是一个伪数组,以键值対的方式保存了一个DOM元素列表jQuery虽然不是数组,但是却有模拟数组的方法和属性,可以以类似数组的方法访问其DOM元素$.size():DOM元素数量$.length:DOM元素属性$.get(0):首个DOM元素$[0]:首个DOM元素$.index():DOM元素在父级节点中的位置$.index($):DOM元素在jQuery伪数组中的位...原创 2019-04-16 22:31:06 · 1041 阅读 · 0 评论 -
【Javascript】【伪数组】js中的伪数组
js中允许以键值対的方式来保存属性,并以下标的方式来访问,我们再手动给它加上一些类似数组的方法,便可以模拟出和数组一样的操作 //创建一个伪数组 let v = new Object(); v.length = 2; v[0] = 'ok'; v[1] = 'hello'; ...原创 2019-04-16 22:43:13 · 368 阅读 · 0 评论 -
【Javascript】【IDE】WebStorm配置浏览器
在这个界面里,可以过滤只显示自己的浏览器,可以自定义浏览器路径,可以设置默认打开网页的浏览器,设置是否显示浏览器悬浮框原创 2019-04-22 09:44:52 · 469 阅读 · 0 评论 -
【CSS】【overflow】css中的overflow属性
css中的overflow属性,用于在元素空间不足时,控制其内容如何显示先看这样一个布局页面 <body> <div id="div1"> <img id="div2" src="https://www.baidu.com/img/xinshouye_c9d9de2ff40fa160f807f75f34db4ad0....原创 2019-04-22 10:20:18 · 451 阅读 · 0 评论 -
【CSS】【overflow】css中的float属性
原创 2019-04-22 14:47:20 · 383 阅读 · 0 评论 -
【CSS】【选择器】CSS选择器详解
* { /* 通配符选择器:选择所有元素 */}#btn { /* ID选择器:选择id='btn'的元素 */}.round { /* 类选择器:选择所有class='round'的元素 */}p { /* 元素选择器:选择所有<p>元素 ...原创 2019-04-17 21:43:41 · 569 阅读 · 0 评论 -
【CSS】【flex布局】css中的flex布局详解
原创 2019-04-22 18:40:14 · 331 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery表单选择器
jQuery对常用的表单选择器进行了简化,可以通过type或状态值来直接选择表单元素$(":input")//选择所有<input><textarea><select><button>元素$(":text")//选择所有<input type='text'>元素$(":submit")//选择所有<input t...原创 2019-04-17 22:26:09 · 240 阅读 · 0 评论 -
【Javascript】【jQuery】jQuery实现表格奇偶行异色效果
<script type="text/javascript" src="jquery-3.4.0.js"></script> <script type="text/javascript"> $(() => { $("td").css("width", "200px"); ...原创 2019-04-17 22:59:54 · 479 阅读 · 0 评论 -
【CSS】【grid布局】css中的grid布局详解
博客参考了以下两篇文章:英文 https://css-tricks.com/snippets/css/complete-guide-grid中文 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.htmlGridLayout将整个容器分割为若干行和列,可以指定子项元素跨若干行列来摆放,逻辑并不复杂,只要把各个属性作用弄清楚,很容易使用完整是属性介绍可以查阅上面两篇文章,这里只介绍最核心常用的属性不建议把属性强行记下来,那样很累,原创 2019-04-23 13:41:52 · 1220 阅读 · 0 评论 -
【CSS】【flow-root】css中的flow-root布局
原创 2019-04-23 14:26:19 · 4559 阅读 · 0 评论