在特定的背景下，我们发现会出现一些奇奇怪怪的需求。

就比如我现在的需求。有个ip.json的文本，会有程序一直往里面写入数据，还要限制数据在5000行，多了的要删除掉。而且必须是删除最前面行的数据。

分享一个很酷炫的视频，通过滑动杆控制仪表进度显示，同时伴有灯光效果，看起来非常震撼。html非常简单，只有几个元素，使用了一个进度条滑动杆的控件。接下来我们重点来看一下CSS，从这里可以看到，页面长什么样子。

好的，现在来说一下滑动杆的样式，这是一个滑轨的样式，其他属性没有什么特别的，我们主要看一下这几个。

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。

鉴于时不时有童鞋翻我以前的沸点，因此，本系列收集了个人目前发过的所有CSS知识点动图，以便阅读。

两个月前，曾发过一篇《你未必知道的49个CSS知识点》，已有3000多赞，这里，老姚真心谢谢大家的支持。

本篇是第二季。与前一篇相比，每个动图都做了加速处理，看起来更流畅一些。

另外，本片还简单地做了归类，动画特效相对多一些。

01）NW.js 是什么?
02）

tp-watermark.js网页添加水印插件

作者：鹏仔先生

上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...

那就自己简单写个网页添加水印插件吧， tp-watermark.js

1.id定位

HTML规定id属性在HTML文档中必须是唯一的。

如：

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

写在前面

之前写过一篇文章提到了xpath元素定位，只写了一些函数，但是不够具体。于是想再写一篇关于xpath元素的定位终极篇，相信你一定能在这里找到你需要的解决办法。

本节我们来学习如何创建 Canvas 画布。 <canvas> 标签是 HTML5 中新增的标签，通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素，就相当于在页面上放置了一块画布，canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。

但是我们并不是使用鼠标在画布中画画的哟，其实 <canvas> 标签本身没有绘制图形的能力，它只是一个图形容器，要想在这个容器中绘制图形，则必须使用 JavaScript 脚本来完成。

#是什么决定了一个人的前途和命运#

在Bresenham画线算法及实践一文中介绍了如何绘制直线段，在诸如图表等可视化场景中，往往需要使用各类不同的线型，如虚线、点划线等，本文介绍一种实现绘制这类线型的方法，并使用TypeScript语言在HTML canvas画布中进行绘制。
这里借鉴OpenGL中的定义的线型函数glLineStripple(repeatFactor, pattern)，其中pattern使用16bit位来定义线型属性，其中1表示对象像素打开，0表示像素关闭。参见下图，如pattern设置为0x1C47，bit为1则设置线的颜色值，为0则设置为背景色，重复这个模式就形成了点划线；同样地，0x00FF就表示了虚线、0xFFFF表示实线。另外一个参数repeatFactor为整数参数，表示每一个bit重复多少次才轮到下一个bit，这个参数可以调节线型疏密程度。