发表于

当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请求，不用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!");
});

图示

发表于 | 分类于

简介

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>

发表于 | 分类于

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

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

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

发表于 | 分类于

实例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 通过HTML方式赋值，会丢失第一个\n,每次赋值都会少一个

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

通过javascript赋值则不会

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

发表于 | 分类于

一个非常有用的选择器
.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.详见

发表于 | 分类于

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

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

发表于 | 分类于

推荐一篇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')
}