网站前端

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

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

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

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 缺失数据处理

2021年07月26日

最近在使用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...

css transition 旋转

2021年05月26日

下面实现了一个旋转的效果,具体css代码如下:.mat-expansion-indicator { transition: transform .2s ease-in-out;}.mat-expansion-panel-spacing .mat-expansion-indicator { transform: rotate(180deg);}transition展开属性如下:trans...

“this”, “$this” 和 “$(this)”有什么区别

2021年05月18日

this: 引用您当前使用的处理程序中的DOM元素,但这在其他情况下可能完全是另一个对象,但这始终是上下文。$this: 通常是由var $this = $(this)jQuery包装版本的缓存版本创建的,以提高效率(或者$(this)在许多情况下,也可以通过连锁来获得相同的效果)。$(this): 元素的jQuery包装版本,因此您可以访问其所有方法(特别是其中的$.fn方法)。参考资料:1、W...

CSS transform相关理解

2021年05月18日

最近在使用transform变换,使用的是旋转,具体css样式如下:panelHeader.children(".mat-expansion-indicator").css({ 'transform': 'rotate(180deg)', 'transformOrigin': 'center', 'transitionDuration': '100ms'});这里使用的是jque...