HTML5 web通知API介绍

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

本文由 伯乐在线 –
ElvisKang
翻译,周进林
校稿。未经许可,禁止转发!
阿尔巴尼亚语出处:www.sevensignature.com。迎接到场翻译组。

图片 1

在使用网页版Gmail的时候,每当收到新邮件,显示器的右下方都会弹出相应的提醒框。借助HTML5提供的Notification
API,大家也能够轻易实现如此的作用。

酷派 X 适配手Q H5 页面通用技术方案

2017/11/12 · HTML5 · 8
评论 · iPhone
X

初稿出处:
林焕彬   

导语: 酷派X的产出,一方面对于全体手提式有线电话机行当的腾飞极具革新领头羊的魔法,另一方面也对现存职业的页面适配带来了新的挑衅。
对于手Q中的各业务以来,受金立X影响的H5页面挺多,应该使用什么飞速有效的点子来应对吗?

近来的H5页面能够分成通栏页面和非通栏页面三种,每一个页面都也会有尾部操作栏,具体如下:

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

最先的文章出处:
ctriphire   

大家都有用过各类别型的浏览器,每种浏览器都有协和的特征,本身拙见,在自家用过的浏览器个中,小编是最欣赏Chrome的,因为它对于调节和测量检验脚本及前端设计调试都有它比任何浏览器有过之而无不如的地方。恐怕我们对console.log会有必然的问询,心里难免会想调节和测验的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来代替alert输出新闻吗,下边小编就介绍一些调度的入门技巧,令你爱上console.log

先的简练介绍一下chrome的调整台,张开chrome浏览器,按f12就能够轻便的开采调节台

图片 2

大家能够看来调控台里面有一首诗还会有任何音讯,假设想清空气调节器节台,能够点击左上角那些图片 3来清空,当然也足以由此在调整台输入console.clear()来实现清空气调节器节台音讯。如下图所示

图片 4

明天只要三个光景,假如二个数组里面有众多的因素,但是你想知道各样成分具体的值,那时候想想要是您用alert那将是多惨的一件事情,因为alert阻断线程运营,你不点击alert框的鲜明按键下三个alert就不会油但是生。

上边大家用console.log来替换,感受一下它的吸引力。

图片 5

看了地点这张图,是还是不是认知到log的庞大之处了,上边我们来看看console里面具体提供了何等方法能够供大家日常调试时利用。

图片 6

脚下调控台方法和总体性有:

JavaScript

["$$", "$x", "dir", "dirxml",
"keys", "values", "profile",
"profileEnd", "monitorEvents",
"unmonitorEvents", "inspect", "copy",
"clear", "getEventListeners", "undebug",
"monitor", "unmonitor", "table",
"$0", "$1", "$2", "$3",
"$4", "$_"]

1
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下边大家来每家每户介绍一下依次艺术首要的用途。

一般情状下大家用来输入音讯的措施主假诺用到如下三个

1、console.log 用于出口普通信息

2、console.info 用以出口提示性音信

3、console.error用来出口错误音讯

4、console.warn用于出口警示新闻

5、console.debug用以出口调节和测验新闻

用图来讲话

图片 7

console对象的上边5种艺术,都得以动用printf风格的占位符。可是,占位符的品类非常少,只协理字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)各种

JavaScript

console.log(“%d年%d月%d日”,2013,3,26);
console.log(“圆周率是%f”,3.1415926);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

图片 8

%o占位符,能够用来查看四个对象内部原因

JavaScript

var dog = {}; dog.name = “大毛”; dog.color = “黄色”; console.log(“%o”,
dog);

1
2
3
4
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

图片 9

6、console.dirxml用来展现网页的某部节点(node)所蕴藏的html/xml代码**

JavaScript

<body> <table id=”mytable”> <tr>
<td>A</td> <td>A</td> <td>A</td>
</tr> <tr> <td>bbb</td> <td>aaa</td>
<td>ccc</td> </tr> <tr> <td>111</td>
<td>333</td> <td>222</td> </tr>
</table> </body> <script type=”text/javascript”>
window.onload = function () { var mytable =
document.getElementById(‘mytable’); console.dirxml(mytable); }
</script>

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
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById(‘mytable’);
        console.dirxml(mytable);
    }
</script>

图片 10

7、console.group出口一组音讯的上马

8、console.groupEnd终止一组输出音讯

看您要求选用区别的输出方法来使用,假使上述八个法子再同盟group和groupEnd方法来一块行使就能够输入五花八门的例外式样的出口消息。

图片 11

哈哈哈,是还是不是感觉很玄妙啊!

9、console.assert对输入的表明式进行预见,只有表明式为false时,才输出相应的音信到调整台

图片 12

10、console.count(那个措施丰裕实用哦)当您想总计代码被推行的次数

图片 13

11、console.dir(这么些法子是自身常常利用的 可不知道比for
in方便了稍稍) 直接将该DOM结点以DOM树的布局实行输出,能够详细核查象的办法升高档等

图片 14

12、console.time 计时始于

13、console.timeEnd  计时甘休(看了下边包车型地铁图你刹那间就感受到它的立意了)

图片 15

14、console.profileconsole.profileEnd格外协同行使来查阅CPU使用相关音信

图片 16

在Profiles面板里面查看就足以看到cpu相关应用音信

图片 17

15、console.timeLineconsole.timeLineEnd拾叁分协同记录一段时间轴

16、console.trace  货仓追踪相关的调节和测量试验

上述方法只是自家个人明白罢了。如若想查看具体API,能够上合法看看,具体地址为:

 

上面介绍一下调控台的一对迅速键

1、方向键盘的上下键,大家一用就掌握。譬喻用上键就一定于选择上次在调控台的输入符号

2、$_命令归来前段时间一回表明式施行的结果,作用跟按提升的方向键再回车是完全一样的

图片 18

上面的$_亟需精晓其奥义本事应用方便,而$0~$4则意味着了近日5个你挑选过的DOM节点。

如何看头?在页面右击选取审查元素,然后在弹出来的DOM结点树下面随便点选,那一个被点过的节点会被记录下来,而$0会再次来到这两天一次点选的DOM结点,就那样推算,$1再次来到的是极品次点选的DOM节点,最多保留了5个,假诺非常不够5个,则赶回undefined

图片 19

3、Chrome
调节高雄原生辅助类jQuery的选拔器
,也正是说你能够用$累加熟练的css选用器来抉择DOM节点

图片 20

4、copy通过此命令能够就要调控台获取到的剧情复制到剪贴板

图片 21

(哈哈 刚刚从调节台复制的body里面的html能够Infiniti制粘贴到哪 例如记事本
 是否以为作用很强大)

5、keys和values 前面三个再次来到传入对象具有属性名组成的数目,前者重临全数属性值组成的数组

图片 22

谈起那,不免想起console.table方法了

图片 23

 

 

管教浏览器帮忙

假如您在一定版本的浏览器上海展览中心开销付,那么本身提出你先到
caniuse
查看浏览器对Notification
API的扶助处境,制止你将贵重时间浪费在了贰个不能够选拔的API上。

通栏页面

顶端通栏

少数事情的一流页面大多选取了顶上部分通栏banner的作用,由于OPPOX在场所栏扩大了24px的惊人,对于当今通栏banner标准的内容区域会有遮挡情形。

不留余地方案:对于通栏页面在页面顶上部分扩大一层中度44px的玉浅紫适配层,整个页面往下挪44px。

这种做法就算不吻合苹果要求的设计规范,但鉴于短期内更新任何banner的资本太高,能够先这么回顾管理,后续再优化banner的准备表现。

图片 24

底部Tab栏/操作栏

多少页面使用了底部Tab栏/操作栏,由于SamsungX去掉了底层Home键,代替他是34px高度的Home Indicator
,对于最近的底部Tab栏/操作栏会导致一定的阻止。

施工方案:在页面尾部扩展一层中度34px的适配层,将操作栏上移34px,颜色能够自定义。

图片 25

6、monitor & unmonitor

monitor(function),它接受八个函数名作为参数,比方function a,每次a被施行了,都会在调节台出口一条音讯,里面包蕴了函数的名称a及实践时所传颂的参数。

而unmonitor(function)正是用来终止这一监听。

图片 26

看了那张图,应该通晓了,也正是说在monitor和unmonitor中间的代码,推行的时候会在调控台出口一条音讯,里面包涵了函数的名称a及实施时所传诵的参数。当免除监视(也等于实行unmonitor时)就不再在支配台出口音信了。

JavaScript

$ // 老妪能解就是 document.querySelector 而已。 $$ // 简单明了正是document.querySelectorAll 而已。 $_ // 是上贰个表明式的值 $0-$4 //
是如今5个Elements面板选中的DOM元素,待会会讲。 dir // 其实正是console.dir keys // 取对象的键名, 再次回到键名组成的数组 values //
去对象的值, 重返值组成的数组

1
2
3
4
5
6
7
$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

上面看一下console.log的一些本事

1、重写console.log 更改输出文字的体裁

图片 27

2、利用调整台出口图片

图片 28

3、钦命输出文字的样式

图片 29

最后说一下chrome调控台叁个粗略的操作,怎么着查看页面元素,看下图就明白了

图片 30

您在调整台轻易操作一次就领悟了,是或不是认为很轻松!

赞 6 收藏
评论

图片 31

发表评论

电子邮件地址不会被公开。 必填项已用*标注