网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。

JS取整以及四舍五入

2021年09月29日

丢弃小数部分,保留整数部分parseInt(7/2) 向上取整,有小数就整数部分加1Math.ceil(7/2) 四舍五入Math.round(7/2) 向下取整Math.floor(7/2) 保留小数位数10.989.toFixed(2) // 10.99 10.984.toFixed(2) // 10.98

contentType 与 dataType 区别

2021年09月08日

最近在使用 Jquery 的 $.ajax() 向后端提交数据，具体代码片段如下：$.ajax({ type: "POST", url: "/api/v1/tools/ip-convert", contentType: 'application/json', dataType: "json", data: JSON.stringify({"ip": $IPVal}),...

Javascript 替换多个空格

2021年09月07日

Javascript 替换多个空格，具体示例代码如下：let cidr_selected = $("#tools-mdc-text-field").val();const r = /\s+/g;cidr_selected = cidr_selected.replace(r, '');这里获取用户输入，之后使用正则替换空格。

CSS Blockquote 样式

2021年07月30日

在使用Markdown的时候，有一些样式需要自己定义，Markdown Blockquote，下面是 Blockquote 自定义的样式：blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\2...

最近在使用D3.js v3的时候遇到一些问题，有些数据会缺失，导致显示有问题，数据示例如下：上面是随机选取的一个示例，这里存在一些null数据，需要处理。处理空数据，需要使用到D3里面的defined方法：该d3.line.defined()方法，您可以指定是否有一个给定的数据点或没有定义的数据。如果此方法返回 false，则表示数据点存在，否则为 true。下面是代码示例：_line = d3....

Google Map反向地理编码

2021年06月19日

最近需要实现通过经纬度查询地理位置，使用的是Google Map的反向地理编码。将地图上的位置转换为人类可读的地址，称为反向地理编码。具体官方文档可以查看这里：反向地理编码（地址查找）官方文档已经很详细了，首先是需要开通Geocoding API，之后需要API 的key，按照文档就可以操作了。

同一个页面多个Openlayers map对象

2021年06月08日

最近需要在一个页面上显示多个地图🗺对象，使用的是Openlayers。下面是代码：<script src="{{ url_for('static',filename='js/openlayers/v6.5.0/ol.js') }}"></script><script src="{{ url_for('static',filename='js/traceroute_location_map.js'...

css var()函数

2021年05月28日

最近在使用css的时候，遇到var()函数，经过查询，var()函数主要可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）具体语法可以参考这里：MDN Web Docs - var()下面是一些示例：:root { --mdc-typography-headline2-font-f...