网站前端

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:<!-- HTML 部分 --><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 属性应用于该元素...