网站前端
SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。
目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。
css media 查询屏幕大小划分
2023年07月26日
在使用 css 媒体查询的时候，屏幕大小划分是一个很头疼的问题，参考了其它项目对于屏幕大小的划分，方案如下：@media (min-width: 576px) {}@media (min-width: 768px) {}@media (min-width: 992px) {}@media (min-width: 1200px) {}@media (min-width: 1400px) {}@med...
JavaScript 冒泡理解
2023年07月26日
最近在项目上遇到一个问题：我监控页面上的一个按钮 click 事件，但是同时我也监控 document 的点击事件，点击按钮打开遮罩，同时点击页面空白部分（出发了 document 的单击事件），关闭遮罩。如果是这样的话，我们就会遇到一个问题：我们永远也打不开遮罩，因为我们点击按钮的时候，同时也触发了 document 的点击事件，也就是在打开遮罩的同时，几乎我们人眼无法察觉的速度，关闭遮罩。这...
浏览器开发者工具，查看元素 hover 样式
2023年07月26日
在web开发中，浏览器开发者工具是我们常用的调试工具。我们经常会有这样的需求，就是查看元素的时候需要查看它的hover样式。相信有很多小伙伴都遇到过这样的情形，始终选不中hover后的元素状态。其实在开发者工具中是有地方可以设置的。方法如下：1. 打开开发者工具，选中一个元素2. 在 Filter 栏中点击 :hov 按钮3. 点击 :hov 按钮后会显示一系列状态的复选框，我们要查看 hover...
JavaScript 三元运算符
2023年07月17日
JavaScript 三元运算符是一种简洁的语法，可用于替代 if/else 语句。 它由三个操作数组成：条件、真值和假值。 条件将被评估为 true 或 false。 如果条件为 true，则真值将被返回；如果条件为 false，则假值将被返回。三元运算符的语法如下：condition ? trueValue : falseValue例如，以下代码使用三元运算符来检查用户的年龄是否大于 18 岁...
JavaScript 实现倒计时效果
2023年07月10日
下面的代码使用 JavaScript 实现了一个倒计时的效果：<!DOCTYPE html><html><head> <title>10分钟倒计时</title></head><body> <h1 id="countdown">10:00</h1> <script> // 获取倒计时显示元素 const countdownElement = document.getElement...
浏览器后退导致代码重复执行如何处理？
2023年06月30日
浏览器后退导致代码重复执行是由于浏览器历史记录中包含了页面的状态和 JavaScript 代码的执行状态。当用户点击浏览器的后退按钮时，浏览器会加载历史记录中的前一个页面，并重新执行其中的 JavaScript 代码，导致代码重复执行。为了处理这个问题，可以采取以下几种方法：使用无刷新页面加载技术：使用AJAX或其他无刷新页面加载技术可以在不刷新整个页面的情况下更新页面的部分内容。这样，在浏览器后...
JavaScript 时间计算
2023年06月28日
最近需要计算时间，例如：现在的时间增加两个月，或者是增加 N 个月，使用 JavaScript 应该如何计算呢？我们可以使用JavaScript中的Date对象和相关方法。下面是一个示例代码，展示了如何获取当前日期并对其进行月份增加：// 获取要操作的元素 const currentExpireDate = document.getElementById('current-expire-date...
JavaScript 字符转换成数字
2023年06月28日
在 JavaScript 中，你可以使用内置的parseInt()函数或parseFloat()函数将字符串转换为数字。这两个函数的区别在于parseInt()只会返回整数部分，而parseFloat()可以返回浮点数。下面是使用parseInt()和parseFloat()的示例代码：// 使用parseInt()将字符串转换为整数 const str1 = "123"; const num...