1. 首页
  2. 分类
  3. 前端技术
css3滤镜属性filter实现网页变黑白效果
System
2024-08-12
所有,css3

CSS3的filter属性可以用来实现各种视觉效果，包括图片灰度化。要将网页上的所有内容变成黑白效果，可以对<body>元素使用filter: grayscale(100%);。

下面是实现这种效果的CSS代码：




body {
  filter: grayscale(100%);
}

将以上CSS代码添加到你的样式表中，或者在<head>标签内使用<style>标签包含上述代码，然后刷新你的网页，你会看到整个网页已经变成了黑白效果。这种效果可以通过调整grayscale()函数的参数值来进行调整，以达到不同的灰度级别。100%是完全的灰度效果，而更低的值会让图片呈现更多的颜色。

- 阅读更多 -
CSS定位
System
2024-08-12
所有,css3

CSS定位主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。

  1. static（默认值）：无特殊定位，元素出现在正常的流中。
  2. relative（相对定位）：不脱离文档流，参照自身在文档流中的位置进行定位。可使用top、right、bottom、left属性进行微调。
  3. absolute（绝对定位）：脱离文档流，参照最近的已定位（即position不是static）的父元素进行定位。如果没有，则以浏览器窗口为参照。
  4. fixed（固定定位）：类似absolute，但参照浏览器窗口进行定位，并且不随滚动条滚动。

实例代码：




/* 相对定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

在HTML中使用：




<div class="relative">相对定位的元素</div>
<div class="absolute">绝对定位的元素</div>
<div class="fixed">固定定位的元素</div>
- 阅读更多 -
不要图片？CSS实现大屏常见不规则边框（系列二）
System
2024-08-12
所有,css3



/* 定义基本样式 */
.border-irregular {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
}
 
/* 定义伪元素来创建不规则边框 */
.border-irregular:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    clip-path: polygon(
        0 0,
        random() * 100%  random() * 100%,
        random() * 100%  random() * 100%,
        100% 100%,
        100% 0
    );
}

这段代码定义了一个.border-irregular类，它会生成一个宽高为200px的方形容器，并在其上应用不规则的红色边框。伪元素通过clip-path属性和polygon函数随机生成不规则的多边形边框。random()函数用于生成随机数，以此创建每次都不同的不规则边框效果。

- 阅读更多 -
CSS系列:伪类选择器小记
System
2024-08-12
所有,css

伪类选择器是CSS中一个强大的功能，它允许我们对元素的某种特殊状态应用样式。这些状态可以基于内容，基于子元素，或者基于某些特定的动作。

  1. :first-child 选择器

:first-child选择器可以选择父元素的第一个子元素，并对其应用样式。




p:first-child {
  color: red;
}
  1. :last-child 选择器

:last-child选择器可以选择父元素的最后一个子元素，并对其应用样式。




p:last-child {
  color: red;
}
  1. :nth-child(n) 选择器

:nth-child(n)选择器可以选择父元素的第n个子元素，并对其应用样式。




p:nth-child(2) {
  color: red;
}
  1. :nth-last-child(n) 选择器

:nth-last-child(n)选择器可以选择父元素的倒数第n个子元素，并对其应用样式。




p:nth-last-child(2) {
  color: red;
}
  1. :only-child 选择器

:only-child选择器可以选择是父元素的唯一子元素的元素，并对其应用样式。




p:only-child {
  color: red;
}
  1. :first-of-type 选择器

:first-of-type选择器可以选择父元素下同类型的第一个元素，并对其应用样式。




p:first-of-type {
  color: red;
}
  1. :last-of-type 选择器

:last-of-type选择器可以选择父元素下同类型的最后一个元素，并对其应用样式。




p:last-of-type {
  color: red;
}
  1. :nth-of-type(n) 选择器

:nth-of-type(n)选择器可以选择父元素下同类型的第n个元素，并对其应用样式。




p:nth-of-type(2) {
  color: red;
}
  1. :nth-last-of-type(n) 选择器

:nth-last-of-type(n)选择器可以选择父元素下同类型的倒数第n个元素，并对其应用样式。




p:nth-last-of-type(2) {
  color: red;
}
  1. :only-of-type 选择器

:only-of-type选择器可以选择是父元素下同类型的唯一元素，并对其应用样式。




p:only-of-type {
  color: red;
}
  1. :empty 选择器

:empty选择器可以选择没有任何子元素的元素（包括文本节点），并对其应用样式。




p:empty {
  display: none;
}
  1. :target 选择器

:target选择器可以选择当前活动的锚点元素，并对其应用样式。




p:target {
  color: red;
}
  1. :enabled 选择器

:enabled选择器可以选择每个启用的表单元素，并对其应用样式。




input:enabled {
  border: 1px solid #ccc;
}
  1. :disabled 选择器

:

- 阅读更多 -
Nodejs版本兼容问题：ReferenceError: Symbol is not defined
System
2024-08-12
所有,javascript

解释：

ReferenceError: Symbol is not defined 表示在 Node.js 环境中引用了 Symbol 这个全局对象，但是当前的执行环境中并没有定义这个对象。通常这种错误出现在 Node.js 的较旧版本中，旧版本的 JavaScript 标准中不包括 Symbol 这种新的数据类型。

解决方法：

  1. 升级 Node.js 到一个支持 Symbol 的版本。可以通过 Node.js 官方网站下载最新稳定版本。
  2. 如果你不能升级 Node.js 版本，可以考虑使用 core-js 或者 babel 这样的库来提供对新 JavaScript 特性的支持。
  3. 如果你的代码是在较新的环境中编写的，但需要在旧版本的 Node.js 中运行，确保在旧版本中引入了必要的 polyfill。

示例使用 core-js 的方法：

  1. 安装 core-js：

    


npm install core-js

  2. 在代码的入口文件中引入 core-js 的 es6 模块，以确保 Symbol 等新特性被加载：

    


require('core-js/es6');
// 你的其他代码

确保在不支持 Symbol 的 Node.js 版本中，你的代码有适当的 polyfill 或者转译工具来模拟这些特性。

- 阅读更多 -
Building A Simple CRUD API With Next.Js 13
System
2024-08-12
所有,javascript



import { useState } from 'react';
import Link from 'next/link';
import { useRouter }s next/router';
 
// 假设我们有一个API客户端来处理HTTP请求
import { apiClient } from '../../lib/api-client';
 
export default function PostsPage({ posts }) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
 
  const handleDelete = async (id) => {
    if (window.confirm('Are you sure you want to delete this post?')) {
      setIsLoading(true);
      try {
        await apiClient.delete(`/posts/${id}`);
        router.replace(router.asPath);
      } catch (error) {
        alert('Failed to delete post');
      } finally {
        setIsLoading(false);
      }
    }
  };
 
  return (
    <div>
      <h1>Posts</h1>
      <p>
        <Link href="/posts/new">
          <a>New Post</a>
        </Link>
      </p>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
            <button onClick={() => handleDelete(post.id)} disabled={isLoading}>
              {isLoading ? 'Deleting...' : 'Delete'}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
 
// 在页面加载时获取帖子
export async function getServerSideProps() {
  try {
    const { data: posts } = await apiClient.get('/posts');
    return { props: { posts } };
  } catch (error) {
    return { props: { posts: [] } };
  }
}

这个代码示例展示了如何使用Next.js 13创建一个简单的CRUD API应用。它使用了客户端路由，以及在服务器端获取初始数据。注意，示例中的apiClient是假设存在的，需要在项目中实现相应的API客户端逻辑。

- 阅读更多 -
如何在JavaScript中获取当前时间yyyymmddhhmmss? (六种实现方式)
System
2024-08-12
所有,javascript



// 方法1: 使用toISOString()并进行字符串替换
let date1 = new Date().toISOString().slice(0, 19).replace('T', ' ');
console.log(date1);
 
// 方法2: 使用Date.prototype.getTimezoneOffset()修正时间
let date2 = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000);
console.log(date2.toISOString().slice(0, 19).replace('T', ' '));
 
// 方法3: 使用moment.js库
let date3 = moment().format('YYYYMMDDHHmmss');
console.log(date3);
 
// 方法4: 使用Date.prototype.toLocaleString()
let date4 = new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\D/g, '');
console.log(date4);
 
// 方法5: 使用Date.prototype.getFullYear()等方法手动构建
let date5 = new Date();
let year = date5.getFullYear();
let month = (date5.getMonth() + 1).toString().padStart(2, '0');
let day = date5.getDate().toString().padStart(2, '0');
let hour = date5.getHours().toString().padStart(2, '0');
let minute = date5.getMinutes().toString().padStart(2, '0');
let second = date5.getSeconds().toString().padStart(2, '0');
let date6 = `${year}${month}${day}${hour}${minute}${second}`;
console.log(date6);
 
// 方法6: 使用Function.prototype.call()和Date.prototype.getTime()
let date7 = Function.prototype.call.bind(Date.prototype.getTime)({ getTime: Date.prototype.getTime }).call() / 1000 | 0;
console.log(date7.toString().padStart(14, '0'));

每种方法都有其特点，可以根据实际需求选择合适的方法。

- 阅读更多 -
js中的防抖（debounce）和节流（throttle）
System
2024-08-12
所有,javascript

防抖（debounce）和节流（throttle）是前端开发中常用的性能优化手段，用以控制函数执行的频率，以减少计算资源的使用。

防抖：指的是在一定时间内，若函数被连续调用，则会把前面的调用忽略，只执行最后一次。

节流：指的是在一定时间内，无论函数被调用多少次，都只在指定的时间间隔内执行一次。

以下是实现防抖和节流的示例代码：

防抖：




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 使用
let myFunc = debounce(function() {
    console.log('防抖函数被调用');
}, 200);
window.addEventListener('resize', myFunc);

节流：




function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用
let myFunc = throttle(function() {
    console.log('节流函数被调用');
}, 200);
window.addEventListener('mousemove', myFunc);
- 阅读更多 -
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目（保姆级）
System
2024-08-12
所有,vue.js

在macOS上搭建Vue开发环境，你需要安装Node.js、npm/yarn、Vue CLI，并创建一个新的Vue项目。以下是详细步骤：

  1. 安装Node.js和npm/yarn

    • 访问Node.js官网下载安装包：https://nodejs.org/
    • 安装Node.js后，npm会自动安装。你也可以选择安装yarn，一个替代npm的包管理工具。

  2. 使用npm或yarn安装Vue CLI

    


npm install -g @vue/cli

    或者如果你使用yarn：

    


yarn global add @vue/cli

  3. 创建一个新的Vue项目

    


vue create my-vue-project

    其中my-vue-project是你的项目名称。

  4. 运行Vue项目

    进入项目目录：

    


cd my-vue-project

    启动开发服务器：

    


npm run serve

    或者如果你使用yarn：

    


yarn serve

完成以上步骤后，你将拥有一个运行中的Vue项目，可以在浏览器中访问 http://localhost:8080 查看。

- 阅读更多 -
vue+elementUI 设置el-descriptions固定长度并对齐
System
2024-08-12
所有,vue.js

在Vue中使用Element UI的<el-descriptions>组件时，若需要设置固定长度并对齐，可以通过CSS样式来实现。以下是一个实现固定长度并对齐的例子：




<template>
  <el-descriptions
    :border="true"
    class="fixed-length-alignment"
    :column="3"
    size="small"
    :label-style="{ width: '100px' }"
  >
    <el-descriptions-item label="用户名">koala</el-descriptions-item>
    <el-descriptions-item label="所属部门">技术部</el-descriptions-item>
    <el-descriptions-item label="工作地点">广州市天河区</el-descriptions-item>
    <el-descriptions-item label="注册时间">2023-01-01</el-descriptions-item>
  </el-descriptions>
</template>
 
<style scoped>
.fixed-length-alignment {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 根据需要的列数调整 */
  align-items: center; /* 垂直居中 */
}
 
.fixed-length-alignment .el-descriptions__body {
  display: flex;
  flex-wrap: wrap;
}
 
.fixed-length-alignment .el-descriptions-item__label {
  justify-content: flex-start; /* 水平左对齐 */
}
 
.fixed-length-alignment .el-descriptions-item__content {
  margin-left: 10px; /* 根据label宽度调整间距 */
}
</style>

在这个例子中，<el-descriptions>组件被设置了class="fixed-length-alignment"，并通过CSS样式使得每行显示固定数量的条目（这里设置为3列），同时通过justify-content: flex-start;实现了标签的左对齐。通过调整CSS中的grid-template-columns和margin-left属性，可以进一步调整条目的排列方式和间距。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号