无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-14 04:11 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

中新的原生元素,5分钟从入门到精通

一起来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 · dialog

原文出处: Kirsty TG   译文出处:Keith   

图片 1

不到一个月前,HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 ,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家

这是 `` 最基础的示例

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可见的,如果没有 opendialog 将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

图片 2

绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且 水平居中,默认情况下,它 和内容一样宽

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2 评论 · web通知

本文由 伯乐在线 - ElvisKang 翻译,周进林 校稿。未经许可,禁止转载!
英文出处:www.sevensignature.com。欢迎加入翻译组。

图片 3

在使用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification API,我们也可以轻松实现这样的功能。

WebSocket:5分钟从入门到精通

2018/01/08 · HTML5 · 1 评论 · websocket

原文出处: 程序猿小卡   

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog 元素,使用最多的可能还是 showModal()close()

const modal = document.querySelector('dialog'); // makes modal appear (adds `open` attribute) modal.showModal(); // hides modal (removes `open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector('dialog');
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时,将会在 dialog 周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是 完全透明 的,你可以使用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal() 不同的是它没有阴影,用户可以与非 dialog 元素进行交互

确保浏览器支持

如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上。

一、内容概览

WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

浏览器支持和 Polyfill

目前,只有 chrome 支持 ``

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的将来就会支持

图片 4

上图为 caniuse.com 关于 dialog 特性主流浏览器的兼容情况

幸运的是,我们可以使用 dialog-polyfill 来缓解这种尴尬,它既提供了 JavaScript 的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用 ` 标签来引用它。目前,它已支持各主流浏览器,包括IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

如何开始

JavaScript

var notification=new Notification(‘Notification Title',{ body:'Your Message' });

1
2
3
var notification=new Notification(‘Notification Title',{
    body:'Your Message'
});

上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option 对象,该对象可设置以下属性:

  • body :设置通知栏的正文内容。
  • dir :定义通知栏文本的显示方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
  • lang :声明通知栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47 language tag。)
  • tag:为通知栏分配一个ID值,便于检索、替换或移除通知栏。
  • icon :设置作为通知栏icon的图片的URL

二、什么是WebSocket

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

  1. WebSocket可以在浏览器里使用
  2. 支持双向通信
  3. 使用很简单

样式

打开和关闭模态框是最基本的,但这是肯定不够的,``

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素 `::backdrop` 来优化

`` 显现时背影的样式

dialog { padding: 0; width: 478px; text-align: center; vertical-align: middle; border-radius: 5px; border: 0; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但 polyfill 会在 dialog 后面添加一个 .backdrop 元素,我们可以像下面这样定位它

dialog .backdrop { background-color: rgba(0, 0, 0, 0.4); }

1
2
3
dialog .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下来,是时候向 bialog 里添加更多的内容,一般包括 headerbodyfooter

XHTML

<dialog id="sweet-modal"> <h3 class="modal-header">sweet dialog</h3> <div class="modal-body"> <p>This is a sweet dialog, which is much better.</p> </div> <footer class="modal-footer"> <button id="get-it" type="button">Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

获取权限

在显示通知栏之前需向用户申请权限,只有用户允许,通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值:

  • default:用户处理结果未知,因此浏览器将视为用户拒绝弹出通知栏。(“浏览器:你没要求通知,我就不通知你了”)
  • denied:用户拒绝弹出通知栏。(“用户:从我的屏幕里滚开”)
  • granted:用户允许弹出通知栏。(“用户:欢迎!我很高兴能够使用这个通知功能”)
JavaScript

Notification.requestPermission(function(permission){ //display
notification here making use of constructor });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f063d76a49818832322-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f063d76a49818832322-1" class="crayon-line">
Notification.requestPermission(function(permission){
</div>
<div id="crayon-5b8f063d76a49818832322-2" class="crayon-line crayon-striped-line">
//display notification here making use of constructor
</div>
<div id="crayon-5b8f063d76a49818832322-3" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

用HTML创建一个按钮

XHTML

<button id="button">Read your notification</button>

1
<button id="button">Read your notification</button>

不要忘记了CSS

CSS

#button{ font-size:1.1rem; width:200px; height:60px; border:2px solid #df7813; border-radius:20px/50px; background:#fff; color:#df7813; } #button:hover{ background:#df7813; color:#fff; transition:0.4s ease; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

全部的Javascript代码如下:

JavaScript

document.addEventListener('DOMContentLoaded',function(){ document.getElementById('button').addEventListener('click',function(){ if(! ('Notification' in window) ){ alert('Sorry bro, your browser is not good enough to display notification'); return; } Notification.requestPermission(function(permission){ var config = { body:'Thanks for clicking that button. Hope you liked.', icon:'', dir:'auto' }; var notification = new Notification("Here I am!",config); }); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('button').addEventListener('click',function(){
            if(! ('Notification' in window) ){
                alert('Sorry bro, your browser is not good enough to display notification');
                return;
            }    
            Notification.requestPermission(function(permission){
                var config = {
                              body:'Thanks for clicking that button. Hope you liked.',
                              icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
                              dir:'auto'
                              };
                var notification = new Notification("Here I am!",config);
            });
        });
    });

从这段代码可以看出,如果浏览器不支持Notification API,在点击按钮时将会出现警告“兄弟,很抱歉。你的浏览器并不能很好地支持通知功能”(Sorry bro, your browser is not good enough to display notification)。否则,在获得了用户的允许之后,我们自制的通知栏便可以出现在屏幕当中啦。

为什么要让用户手动关闭通知栏?

对于这个问题,我们可以借助setTimeout函数设置一个时间间隔,使通知栏能定时关闭。

JavaScript

var config = { body:'Today too many guys got eyes on me, you did the same thing. Thanks', icon:'icon.png', dir:'auto' } var notification = new Notification("Here I am!",config); setTimeout(function(){ notification.close(); //closes the notification },5000);

1
2
3
4
5
6
7
8
9
var config = {
               body:'Today too many guys got eyes on me, you did the same thing. Thanks',
               icon:'icon.png',
               dir:'auto'
             }
var notification = new Notification("Here I am!",config);
setTimeout(function(){
    notification.close(); //closes the notification
},5000);

该说的东西就这些了。如果你意犹未尽,希望更加深入地了解Notification API,可以阅读以下的页面:

  • MDN
  • Paul lund’s tutorial on notification API

1、有哪些优点

说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

  1. 支持双向通信,实时性更强。
  2. 更好的二进制支持。
  3. 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
  4. 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

最后,在添加一些 CSS,你就能得到你想要的

在CodePen上查看demo

你可以在CodePen上看到由Prakash (@imprakash)编写的demo。

赞 收藏 2 评论

2、需要学习哪些东西

对网络应用层协议的学习来说,最重要的往往就是连接建立过程数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

下文主要围绕下面几点展开:

  1. 如何建立连接
  2. 如何交换数据
  3. 数据帧格式
  4. 如何维持连接

进阶操作

通常,我们期望能从 dialog 中获取一些用户的信息。关闭 dialog 时,我们可以给 close() 传递一个 string,然后通过 dialog 元素的 returnValue 属性来获取

modal.close('Accepted'); console.log(modal.returnValue); // logs `Accepted`

1
2
3
modal.close('Accepted');
 
console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的事件我们可以监听,其中,最常用的可能是 close(关闭 dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,我们可能还期望点击 dialog 旁边的阴影来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog 的点击事件,如果 dialog 的子元素占满了整个 dialog,那么我们可以通过监听 dialog 的点击,当 targetmodal 时来关闭它

modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); } });

1
2
3
4
5
modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.close('cancelled');
    }
});

当然,这不是完美的,但它确实是有效的,如果你有更好的方式,欢迎在评论中交流

关于作者:ElvisKang

图片 5

QQ:285273704微博:@康恺暄邮箱:elviskang@foxmail.com 个人主页 · 我的文章 · 10

图片 6

三、入门例子

在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端(网页端)。完整代码可以在 这里 找到。

这里服务端用了ws这个库。相比大家熟悉的socket.iows实现更轻量,更适合学习的目的。

总结

说了这么多,不如自己实际演练一番,作者也做了一个 demo,欢迎参考

1 赞 2 收藏 评论

图片 7

1、服务端

代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

var app = require('express')(); var server = require('http').Server(app); var WebSocket = require('ws'); var wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('server: receive connection.'); ws.on('message', function incoming(message) { console.log('server: received: %s', message); }); ws.send('world'); }); app.get('/', function (req, res) { res.sendfile(__dirname '/index.html'); }); app.listen(3000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = require('express')();
var server = require('http').Server(app);
var WebSocket = require('ws');
 
var wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
    console.log('server: receive connection.');
    
    ws.on('message', function incoming(message) {
        console.log('server: received: %s', message);
    });
 
    ws.send('world');
});
 
app.get('/', function (req, res) {
  res.sendfile(__dirname '/index.html');
});
 
app.listen(3000);

2、客户端

代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

1
 

3、运行结果

可分别查看服务端、客户端的日志,这里不展开。

服务端输出:

server: receive connection. server: received hello

1
2
server: receive connection.
server: received hello

客户端输出:

client: ws connection is open client: received world

1
2
client: ws connection is open
client: received world

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:中新的原生元素,5分钟从入门到精通

关键词: 注册送体验金_