主要功能介绍:
支持微信、支付宝、浏览器多种扫码工具扫码点餐。
支持多人扫码点餐,点餐信息通过WebSocket同步。
下单无线打印小票,后厨、服务员同时收到订单信息。
微信、支付宝在线支付,自动收银。
基础知识Vue中v-bind是一个非常重要的绑定属性的指令,这里要讲解一下绑定class样式设置的方法。
12345<ul> <li v-for="(item,key) in dinner" :key="item" :class="{'red':key==0,'blue':key==1}">{{item}}</li></ul>
v-model双向绑定,多用于表单控制的交互操作。
ref用于获取DOM节点元素。
绑定事件对象:
1<button @click="eventFn($event)">事件对象< ...
项目
canvas-utils
react-gadget
node-tbuys
docs
smart_flutter_app
vue-vite-app
threejs-sets
react-umi
typescript-canvas
webrtc-framework
webgl-framework
make-react-game
frontend-dev-doc
blog
make-quasar
site-nav
文档
AirCode 文档
JavaScript MD5
HTML5+ API Reference
JavaScripting
JavaScrypt Encryption and Decryption
算法通关手册
LeetCode
Git教程
Socket.IO 中文文档
Socket.IO
Socket.io 文档
WebRTC samples
WebRTC文档
RustFisher 安卓|Java|设计模式|WebRTC|Python|NestJS|PyQt
WebRTC中文网
声网 RTE 开发者社区
音视频文章汇总
WebRTC 详解信令服务器媒体协商及实战(及通 ...
命名禁止缩写
精简扼要地对class命名,请勿使用自定义缩写。
class name的命名必须是行为、有语意的。
禁止在非特殊情况下写!important
CSS本身有权重设计,任意地使用!important会造成权重混乱而无法维护。
不可轻易限定宽高
用户可以自行设定自己的浏览器,例如Android手机可以设定显示字体大小,写死的高度会让字体相互重叠。
RWD失效
移动设备的高度是无限的,宽度是有限的。
请不要把宽写死。
img请让它自动缩放
请不要替img的容器设定宽或高,让它根据设备自行缩放。
请使用bootstrap的img-responsive。
如果确实要用: 12width: 100%;height: auto;
如果要给img border-radius设定样式,请使用父元素控制行为,保持img只载入图片,没有样式。
优先使用grid排版
请不要花很多时间在写media query,设定一堆breakpoint,自己写组件样式,自己控制每种设备上的容器宽度。
请使用grid system,这些都是已经成熟的框架,而且有些也已经帮你处理了浏览器相容问题。
...
本文总结CSS3中两个用来做动画的属性,一个是transition,另一个是animation。
差异比较
CSS3
差异
transition
在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。
常用语鼠标事件(:hover、active、:focus、:click)或键盘输入时触发
需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。
只能定义开始状态和结束状态,不能定义中间状态。
animation
可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数。
网页加载时会直接执行,可以自行控制各阶段动画的变化
animation和transition最大的不同在于transition是当参数改变时触发,而animation则是直接就执行,所有动画效果需要明确的指定关键帧的参数。
CSS3
简写顺序
transition
[property名称][duration ...
自动分配宽高123justify-content: space-between;display: grid;grid-template-columns: repeat(auto-fill, 96px);
CSS-编程技巧
使用百分比而不是固定的宽度。或者使用相对的宽度:vw, vh, vmin, vmax
在大屏幕上要有一个固定宽度的元素时,使用 max-width,让其不用media query就能自适应小屏幕
在 img, object, video, iframe 加上 max-width: 100%
当需要填充元素的背景图片时,使用 background-size: cover 让图片能保持原始比例。在移动设备上使用高解析图片不是明智的做法
制作 grid 页面时让 viewport width 来决定每一列的数量。Flexbox 或者 display: inline-block 就可以做到
当制作多栏的的文字区块时,设定 column-width 而不是 column-count,让你在小屏幕上会得到一个栏位
减少重复代码原则:
半透明的边界
See the Pe ...
前言浮动float的渲染位置在行框与包含块之间,这样可以使得行框内文字与浮动元素不重叠,并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响后面的元素布局。
已知的清除浮动元素方法:
采用一个HTML标签,以及css的clear属性,手动清除浮动;
采用伪类:after动态建立一个块元素,设定clear属性,清除之前的浮动元素;
采用css overflow非visible值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素;
采用display:table/display:table-cell等table系列属性将父元素变成table形式自动包含浮动元素;
使用table以及td标签作为浮动元素容器;
采用float:left/float:right方式将父元素同样浮动,就可以包含浮动内容;
在IE 6/7的标准文档模式中设置width/height/zoom等样式来自动清除浮动;
使用clear样式清除1.cl ...
此系列为网页设计中经常使用到的垂直居中解决方法,通过本文进行详细地总结。
使用line-height做垂直居中
See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.
使用line-height + inline-block做多行文字的垂直居中
See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.
使用:before + inline-block做垂直居中
See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.
使用padding做垂直居中
See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.
使用absolute + margin负值做垂直居中
See ...
本地工作区文件恢复1git checkout <filename/dirname>
远程分支删除后,删除本地分支及关联123git branch --unset-upstream <branchname>git branch --unset-upstream feature/test
修改提交时的备注内容123git commit --amendgit log --pretty=online
修改分支名123git branch -m <oldbranch> <newbranch>git branch -m feature/stor-13711 feature/story-13711
撤回提交1234567git reset --soft [<commit-id>/HEAD~n]git reset --soft HEAD~1git reset --mixed HEAD~1git reset --hard HEAD~1
撤销本地分支合并1git revert <commit-id>
恢复误删的本地分支 ...
HTML特殊字符
HTML
Symbol
Numeric
描述
Hex
CSS(ISO)
JS(Octal)
"
"
"
引号
u+0022
\0022
\42
#
#
#
数字符号
u+0023
\0023
\43
$
$
$
美元符号
u+0024
\0024
\44
%
%
%
百分号
u+0025
\0025
\45
&
&
&
和号
u+0026
\0026
\46
'
'
'
撇号
u+0027
\0027
\47
(
(
(
左括号
u+0028
\0028
\50
)
)
)
右括号
u+0029
\0029
\51
*
*
*
星号
u+002A
\002a
\52
+
+
& ...
