网站前端

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

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

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

Angular providers 的作用

2023年01月11日

在 Angular 中，providers 是一种机制，用来提供应用程序中需要的服务。它们可以是类，工厂函数或任何可以返回一个服务实例的函数。当一个组件或指令需要一个服务时，Angular 会自动调用 provider 来创建该服务的实例并将其注入到组件或指令中。在应用中, providers 可以在任何地方定义, 以及各级组件中定义. 组件可以在其子组件中隐藏自己定义的 providers. 默...

Angular FormGroup dirty 和 touched 理解

2023年01月10日

FormGroup.dirty 和 FormGroup.touched 是两个布尔值属性，它们用于表示 Angular 表单的状态。dirty 属性表示表单是否被用户修改过。如果表单的值发生了变化，则 dirty 属性为 true。touched 属性表示表单是否被用户触摸过。如果用户在表单元素上进行了触摸（通常是通过单击或聚焦），则 touched 属性为 true。这两个属性可以帮助开发人员在...

npm package.json文件中的（~）和（^）有什么区别？

2023年01月04日

如果你在你的JavaScript应用程序中使用npm来管理包，你可能对package.json文件很熟悉。"dependencies": { "@angular/animations": "~10.0.5", "@angular/cdk": "^10.1.1", "@angular/common": "~10.0.5",语法是 JSON 格式的，其中键是包的名称，值是要使用的包的版本。npm...

JavaScript 获取元素的位置

2022年12月22日

可以使用 JavaScript 的 getBoundingClientRect() 方法来获取元素的位置信息，然后取出 left 和 top 属性即可。下面是一个例子：let element = document.querySelector('.info'); let rect = element.getBoundingClientRect(); let left = rect.left; ...

div class 的 mouseover 和 mouseout 事件监听

2022年12月21日

假设 div 的 class 为 “company-name”，下面是 JavaScript 的 mouseover 和 mouseout 事件监听代码示例：const companyNameElements = document.querySelectorAll('.company-name'); companyNameElements.forEach(element => { el...

仿维基百科 popups 样式代码

2022年12月21日

最近需要实现一个类似于维基百科的 popups 样式，维基百科 popups 的样式截图如下：维基百科 popups 是一个可以在鼠标悬停在维基百科上的某个词条时，显示该词条的简要摘要的功能。这里是一个示例代码，使用了 HTML、CSS 和 JavaScript：<div id="popup"> <p>这里是摘要框的内容</p></div><!-- CSS 部分 ...

JavaScript 滚动事件监听

2022年12月21日

在 JavaScript 中，你可以使用以下方法来为 div 元素添加滚动事件监听：document.querySelector('.mdc-tab-scroller__scroll-area').addEventListener('scroll', function() { // 在这里添加你的代码 }); 这将会在 div 元素滚动时触发事件监听器函数。你也可以使用其他方法来获取 d...

css 实现平滑滚动

2022年12月21日

平滑滚动可以使浏览器在移动到新位置时以动画效果来滚动页面，而不是立即跳转。这可以使滚动看起来更流畅，更自然。要实现平滑滚动，可以使用 CSS 的 scroll-behavior 属性。在大多数浏览器中，可以使用以下方式实现平滑滚动：html { scroll-behavior: smooth; }如果要在某个特定的元素上实现平滑滚动，可以将 scroll-behavior 属性应用于该元素...