志当存高远,望尽天涯路

人生已如此艰难,就不要再拆穿了


  • 首页

  • 归档

  • 分类

  • 标签

serviceworker

发表于 2017-08-21 | 分类于 协议

示例

以github.io为例,需要支持https
sw示例

参考

serviceworker教程
mdn示例

使用margin/padding百分比实现不同屏幕图片固定比例

发表于 2017-08-20

当margin/padding取形式为百分比时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!

演示

375*100iphone6 高约等于宽的26.666666%

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
html{font-size:100px;}
body{
margin:0;
padding:0;
}
.title{
font-size:.14rem;
}
.banner{
padding:.2rem;
}
.resizeable{
padding: 26.66666666666% 0 0;
position: relative;
}
.resizeable img{
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
.top-list{
margin:0;
}
.top-list dl {
position: relative;
margin:0;
}

.top-list dl dt {
overflow: hidden;
padding: 66.1849710982659% 0 0;
position: relative;
}

.top-list dl dt img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
object-fit: cover;
}

.top-list dl dd {
padding: .08rem;
font-size: .14rem;
color: #333333;
letter-spacing: 0;
line-height: .17rem;
}

.top-list dl dd .cont {
font-size: .12rem;
color: #FFFFFF;
line-height: .15rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
box-orient: vertical;
font-weight: bold;
width: 90%;
}

.top-list dl dd .author {
font-size: 8px;
color: #FFFFFF;
}

.top-list dl .filtrate {
box-sizing: border-box;
margin:0;
position: absolute;
padding-top: .4rem;
padding-bottom: .06rem;
left: 0;
bottom: 0;
width: 100%;
background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.56) 100%);
}

.top-list dl .date {
margin:0;
position: absolute;
width: .25rem;
height: .25rem;
text-align: center;
line-height: .25rem;
background: rgba(0, 0, 0, 0.3);
padding: 0;
color: #fff;
left: 0;
top: 0;
font-size: .1rem;
color: #FFFFFF;
}
.top-list{
padding:0;
}
.top-list li{
/*margin-top: .025rem;*/
padding-left: .24rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.top-list li .box{
width:50%;
padding-left:.025rem;
padding-bottom:.025rem;
}

请在移动环境下访问,图片在iphone6(375*667为基准, 图片比例375*100)点击这里demo

参考

CSS百分比padding实现比例固定图片自适应布局

fetch-post请求正确姿势

发表于 2017-08-18 | 分类于 前端

fetch发送post请求,不用url传参数

地址栏url传参数有尺寸限制,从2k-8k不等


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch("http://www.example.org/submit.php", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: "userName=&password=admin"
}).then(function(res) {
if (res.ok) {
alert("Perfect! Your settings are saved.");
} else if (res.status == 401) {
alert("Oops! You are not authorized.");
}
}, function(e) {
alert("Error submitting form!");
});

图示

HTML5协议之WebSocket

发表于 2017-08-17 | 分类于 协议

简介

Web Sockets 是用于 Web 应用程序的新一代双向通信技术,运行在单一套接字之上,它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。一个 WebSocket 就是客户端和服务端之间的标准双向 TCP 套接字。套接字以 HTTP 连接开始,在 HTTP 握手之后“升级”为 TCP 套接字。握手之后,任意一端都可以发送数据。

WebSocket 特点

  • 建立在 TCP 协议之上,服务器端的实现比较容易
  • 可以发送文本,也可以发送二进制数据。
  • 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
  • 没有同源限制,客户端可以与任意服务器通信。
  • 数据格式比较轻量,性能开销小,通信高效
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器

兼容性

IE10+ 及其它现在浏览器均支持兼容性点这里

示例

以expressjs+socket.io构建的一个聊天室

效果

绿色背景是发送,白色背景是接收消息

ServerClient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* Create HTTP server.
*/

var server = http.createServer(app);
var io = require('socket.io')(server);
let i = 0;
io.on('connection', function (socket) {
console.log('a user connected');
i++;
socket.on('disconnect', function(){
i--;
console.log('user disconnected');
});
socket.on('chat message', function (data) {
io.emit('news', { talkmsg : data,total:i });//广播消息
console.log(data);
});
});

Client

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
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<div id="total"></div>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});

socket.on('news', function(data){
$('#messages').append($('<li>').text(data.talkmsg));
$('#total').html('当前在线人数:'+data.total)
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>

HTML5协议之Server-Sent-Events

发表于 2017-08-17 | 分类于 协议

推荐一篇阮一峰老师的server sent events

Server Sent Events是一种全新的HTML5服务器推送事件技术,主要有以下特点

  • SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
  • SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。
  • SSE 默认支持断线重连,WebSocket 需要自己实现。
  • SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。
  • SSE 支持自定义发送的消息类型。
阅读全文 »

scp常用场景

发表于 2017-04-29 | 分类于 linux

实例1:从远处复制文件到本地目录

1
$scp root@10.6.159.xx:/opt/soft/demo.tar /opt/soft/

说明: 从10.6.159.xx机器上的/opt/soft/的目录中下载demo.tar 文件到本地/opt/soft/目录中

实例2:从远处复制目录到本地

1
$scp -r root@10.6.159.xx:/opt/soft/test /opt/soft/

说明: 从10.6.159.xx机器上的/opt/soft/中下载test目录到本地的/opt/soft/目录来。

实例3:上传本地文件到远程机器指定目录

1
$scp /opt/soft/demo.tar root@10.6.159.xx:/opt/soft/scptest

说明: 复制本地opt/soft/目录下的文件demo.tar 到远程机器10.6.159.xx的opt/soft/scptest目录

实例4:上传本地目录到远程机器指定目录

1
$scp -r /opt/soft/test root@10.6.159.xx:/opt/soft/scptest

说明: 上传本地目录 /opt/soft/test到远程机器10.6.159.147上/opt/soft/scptest的目录中

textarea赋值方式引起的bug

发表于 2017-04-29 | 分类于 javascript

textarea 通过HTML方式赋值,会丢失第一个\n,每次赋值都会少一个

1
<textarea>\n\n\n\n\n\n中华人民共和国中华人民共和国中华人民共和国</textarea>

通过javascript赋值则不会

1
textarea.value = '\n\n\n\n\n\n中华人民共和国中华人民共和国中华人民共和国'

selector-nextUntil

发表于 2016-11-07 | 分类于 前端

一个非常有用的选择器
.nextUntil([selector], [filter]) will select all next siblings up to but not included the one matching selector, if filter is provided then next siblings should match filter too.详见

javascript小数相乘

发表于 2016-11-03 | 分类于 算法

题目描述
求 a 和 b 相乘的值,a 和 b 可能是小数,需要注意结果的精度问题

1
2
3
function multiply(a, b) {
return Math.round((a*b*100000))/100000;
}

node调式

发表于 2016-10-06 | 分类于 前端

推荐一篇node调试教程

通过环境变量来控制程序调试环境

1
2

env __DEV__=1 node 1.js

1.js

1
2
3
4
5
6
7

var dv = process.env.__DEV__;
if (dv == 1) {
console.log('devdevdevdev222')
} else {
console.log('product product product222')
}
1…111213…17
331502715@qq.com

331502715@qq.com

162 日志
14 分类
113 标签
© 2021 331502715@qq.com
由 Hexo 强力驱动
|
主题 — NexT.Mist v5.1.4