网站前端
SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。
目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。
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 属性应用于该元素...
css svg 元素旋转180度
2022年12月21日
可以使用 CSS 的 transform 属性来旋转 SVG 元素。下面是一个使用 css 旋转的示例，如果你想旋转一个 SVG 矩形 180 度，你可以这样做：rect { transform: rotate(180deg);}你也可以使用 transform-origin 属性来设置旋转的原点，例如：rect { transform: rotate(180deg); transf...
JavaScript 隐藏 class 为 scroll-button right 的元素
2022年12月21日
使用 JavaScript 的 getElementsByClassName 函数来获取 class 为 scroll-button right 的元素，然后使用 style.display 属性来设置为 none 来隐藏该元素。例如：document.getElementsByClassName('scroll-button right')[0].style.display = 'none'; ...
JavaScript 根据浏览器不同语言跳转到相应语言页面
2022年12月19日
我们如果需要实现不同语言跳转到不同页面，在 JavaScript 我们可以使用 navigator.language 或者 navigator.userLanguage 来获取浏览器的语言。这些属性返回的是浏览器设置的语言代码，比如 "en-US" 表示英语，"zh-CN" 表示简体中文。我们可以使用以下代码来判断浏览器的语言并做出相应的跳转：if (navigator.language === ...
JavaScript XMLHttpRequest fetch 发送 HTTP 请求示例
2022年12月19日
有几种方法可以在 JavaScript 中进行 HTTP 请求。最常见的方法之一是使用 XMLHttpRequest 对象。这个对象在所有的现代浏览器中都被支持，并允许你从 JavaScript 中发送 HTTP 请求。下面是一个如何使用 XMLHttpRequest 对象进行 GET 请求的例子：// Create a new XMLHttpRequest object var xhr = n...