网站前端
SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。
目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。
Javascript IP地址验证
2021年04月13日
下面代码是验证输入是否是IPv4地址的Javascript代码：function ValidateIPAddress(IPAddress) { let IPFormat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0...
Javascript禁止按钮单击提交事件
2021年04月13日
最近在使用Javascript的时候，使用Ajax提交数据，但是单击按钮的时候页面会刷新，这个不是我们要的效果，需要禁止单击按钮事件，具体代码如下：$("#cidr-convert").click(function (event) { // 禁止点击事件 event.preventDefault(); const cidr_selected = $("#cidr-mdc-text...
flex: 1 0 auto; 理解
2021年03月20日
最近看到在使用Flex布局的时候，有如下写法：.flex-no-shrink { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; flex: 1 0 auto; box-sizing: border-box;}这里flex是简写，是flex-grow, flex-shrink和flex-basis合并。第二和第三参数（flex-sh...
Jquery获取滚动条距离页面顶部的高度
2021年03月16日
下面是使用Jquery获取滚动条到页面顶部的高度：function set_cart_styles() { const $scroll_height = $(document).scrollTop(); if ($scroll_height > 144) { $(".cart-header-wrapper").addClass("cart-header-wrapper-f...
html figure 理解
2021年03月09日
下面是figure的说明：HTML <figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。下面是代码示例：<figure> <div cl...
D3.js关于时间转换的问题
2021年02月07日
最近在使用D3.js的时候，从后端读取的是iso标准时间，形如：2021-02-07T06:22:29之后开始转换：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var utcTime='2021-02-07T06:22:...
几个不错的D3.js示例
2021年02月05日
d3鼠标悬停多线图可以学习不同颜色图标的设置，以及鼠标划过的时候给出的相关提示，示例地址：d3 mouseover multi-line chart多线图可以学习鼠标滑过的时候，显示相关数据的方法，项目地址：Multiline chart这个示例使用d3.js v5写了一个图标，可以借此学习一下d3.js v3到v5变更的内容，项目地址：Simple Difference Chart v5这个项目...
position sticky理解
2021年01月10日
最近在使用页面左边菜单滚动效果，使用的是浮动布局，也就是：display: flex;但是在滚动的时候，左边菜单还是有一部分被遮住了，截图如下：产生这样的原因是：顶部也有一个浮动菜单，导致左边菜单被遮挡。解决方法：position: sticky;top: 90px;这里使用的是sticky的定位方式，关于sticky的定位MDN解释如下：解释：元素根据正常文档流进行定位，然后相对它的最近滚动祖先...