分类前端技术下的文章

css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has

2024-08-13

要实现不改变HTML结构的前提下，为输入框添加自定义的星号标识并在输入框聚焦时修改父元素的样式，可以使用CSS属性选择器和相邻兄弟选择器。以下是实现这一功能的CSS代码示例：




/* 当输入框的前一个兄弟元素是带有特定类的星号时，并且当前输入框处于聚焦状态时，修改其父元素的样式 */
.input-container > input:focus + .required-marker:before,
.input-container > input:valid + .required-marker:before {
  /* 这里添加你希望在聚焦时应用的样式 */
  color: red; /* 仅作为样式示例 */
}
 
/* 星号标记的样式 */
.required-marker:before {
  content: "*";
  color: grey; /* 默认颜色 */
  margin-left: 4px; /* 示例间隔 */
}

HTML结构示例：




<div class="input-container">
  <input type="text" required>
  <span class="required-marker"></span> <!-- 星号标识 -->
</div>

在这个例子中，.input-container 是父元素，其内包含一个输入框和一个带有 .required-marker 类的span元素，用于显示星号。当输入框聚焦或者输入内容合法时，通过CSS伪元素 ::before 添加的星号会改变颜色，表示其所属的输入框为必填项。这个例子不改变HTML结构，并且可以通过CSS实现视觉效果，不需要额外的JavaScript代码。

- 阅读更多 -

CSS设置背景透明属性

System

2024-08-13

所有,css

在CSS中，设置元素的背景透明可以使用background-color属性，并将其值设置为transparent。这将使得元素的背景完全透明，从而显示出它的父元素背景。

下面是一个简单的例子：




.transparent-background {
  background-color: transparent;
}

HTML使用这个类：




<div class="transparent-background">
  这个元素的背景是透明的。
</div>

在这个例子中，.transparent-background 类被应用到一个div元素上，使得这个div的背景色变成了透明。如果div有父元素，透明的背景将允许你看到父元素的背景色或者背景图片。

- 阅读更多 -

css自制icon图标（最简单的一种方式）

System

2024-08-13

所有,css

CSS 自制图标可以通过使用字符实体或者图标字体来实现。以下是使用字符实体创建简单图标的方法：

选择一个字符，这个字符代表了你想要的图标。
使用 CSS 将这个字符放置在页面上，并设置样式使其看起来像一个图标。

例如，创建一个表示心形图标的方法：

HTML:




<div class="icon-heart"></div>

CSS:




.icon-heart {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: red;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 100%, 61% 65%, 32% 100%, 30% 57%, 2% 35%, 39% 35%);
}

这段代码使用了 clip-path 属性来裁剪一个 div 元素，将其变成了一个心形图标。这是最直接的方法之一，不需要额外的图标字体或图像文件。

- 阅读更多 -

CSS文本超出显示3个点的方法

System

2024-08-13

所有,css

您可以使用CSS的text-overflow属性来实现文本超出部分显示为3个点的效果。这通常与white-space和overflow属性一起使用。

以下是实现这种效果的CSS代码示例：




.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis;  /* 使用省略号表示文本超出 */
  max-width: 100px;         /* 设置最大宽度，确定超出时的显示效果 */
}

接下来，您需要将这个类应用到您想要显示省略号的HTML元素上：




<div class="ellipsis">这是一段很长的文本，需要显示省略号...</div>

在这个例子中，当文本超出div的宽度时，超出的部分会被省略号...代替。

- 阅读更多 -

CSS全局样式中用了!important，如何修改局部样式（亲测有效）

System

2024-08-13

所有,css

在CSS中，使用!important可以提升指定样式规则的应用优先级，使其覆盖其他同等权重的规则。如果想要在已有!important的全局样式中添加没有!important的局部样式来覆盖全局样式，可以通过以下几种方法：

使用更具体的选择器：
如果可以提供一个比全局样式更具体的选择器，那么就可以覆盖!important规则。例如，如果全局样式使用的是类选择器，则在特定元素上直接使用id选择器可以提升优先级。
使用CSS变量（也称为CSS自定义属性）：
通过变量，可以在全局样式中定义一个变量，然后在局部样式中重新赋值。
通过JavaScript动态添加样式：
使用JavaScript可以动态地给元素添加样式，这样可以避开!important。
使用scoped属性（仅适用于<style>标签内部的CSS）：
如果在HTML文档中使用<style>标签定义局部样式，可以给这个<style>标签添加scoped属性，这样其内部的样式只会影响<style>标签包含的区域。

以下是使用JavaScript动态添加样式的例子：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .important-style {
            color: red !important;
        }
    </style>
</head>
<body>
    <div class="important-style" id="my-element">Some text</div>
 
    <script>
        // 获取元素
        var element = document.getElementById('my-element');
        // 添加新样式，不使用!important
        element.style.color = 'blue';
    </script>
</body>
</html>

在这个例子中，虽然全局样式使用了!important，但是通过JavaScript直接设置元素的style属性来覆盖颜色，没有使用!important，因此优先级高于全局样式。

- 阅读更多 -

JavaScript的Ajax案例代码——新闻列表案例

System

2024-08-13

所有,ajax




// 假设我们已经有了一个用于发送AJAX请求的函数sendAjax
 
// 发送AJAX请求获取新闻列表
function loadNewsList(pageNo) {
    sendAjax({
        url: '/getNewsList', // 新闻列表接口URL
        data: {
            pageNo: pageNo // 当前页码
        },
        success: function(result) {
            // 假设result是从服务器返回的数据
            if (result.status === 'ok') {
                // 数据加载成功，处理数据并显示到页面
                showNewsList(result.data);
            } else {
                // 数据加载失败，处理错误
                console.error('加载新闻列表失败:', result.message);
            }
        },
        error: function(error) {
            // 请求过程中发生错误，处理错误
            console.error('加载新闻列表时发生错误:', error);
        }
    });
}
 
// 显示新闻列表到页面
function showNewsList(newsList) {
    // 假设我们有一个用于渲染新闻列表的函数renderNewsList
    const newsListContainer = document.getElementById('newsListContainer');
    newsListContainer.innerHTML = renderNewsList(newsList);
}
 
// 假设这是渲染新闻列表的函数，返回HTML字符串
function renderNewsList(newsList) {
    let html = '<ul>';
    newsList.forEach(news => {
        html += `<li>${news.title}</li>`;
    });
    html += '</ul>';
    return html;
}
 
// 假设这是页面加载时初始化新闻列表的函数
function initNewsList() {
    loadNewsList(1); // 默认加载第一页的新闻列表
}
 
// 页面加载完成后执行初始化函数
window.onload = initNewsList;

这个代码示例展示了如何发送AJAX请求获取新闻列表并将其显示在页面上。其中，sendAjax是一个假设的函数，它应该被实现为能发送AJAX请求的功能。loadNewsList函数负责发送请求，showNewsList函数负责将新闻列表渲染到页面上。renderNewsList函数用于生成新闻列表的HTML。最后，initNewsList函数在页面加载时被调用，以加载新闻列表。

- 阅读更多 -

Js、ajax、html多参数（文件、图片等）上传示例

System

2024-08-13

所有,ajax

在HTML中创建一个表单，用于选择文件和图片，并使用JavaScript和AJAX发送到服务器。

HTML部分:




<form id="uploadForm">
    <input type="file" id="fileInput" name="file" multiple />
    <input type="text" id="textInput" name="text" placeholder="Enter some text" />
    <button type="button" onclick="uploadFiles()">Upload</button>
</form>

JavaScript部分:




function uploadFiles() {
    var formData = new FormData();
    var files = document.getElementById('fileInput').files;
    for (var i = 0; i < files.length; i++) {
        formData.append('file[]', files[i]);
    }
    formData.append('text', document.getElementById('textInput').value);
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
        if (this.status == 200) {
            console.log('Upload success');
        } else {
            console.error('Upload failed');
        }
    };
    xhr.send(formData);
}

这段代码会在用户点击上传按钮时被触发。它会收集文件输入和文本输入，然后通过AJAX以multipart/form-data格式发送到服务器的/upload路径。服务器需要能够处理多部分表单数据并保存文件和文本信息。

- 阅读更多 -

如何使用 jQuery 异步上传文件？

System

2024-08-13

所有,ajax

要使用 jQuery 异步上传文件，您可以使用 jQuery.ajax() 方法，并将文件数据编码为 FormData 对象。以下是一个简单的例子：

HTML 部分：




<form id="fileUploadForm" method="post" enctype="multipart/form-data">
    <input id="fileInput" type="file" name="file">
    <button type="submit">上传</button>
</form>

JavaScript 部分（使用 jQuery）：




$(document).ready(function() {
    $('#fileUploadForm').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var formData = new FormData($(this)[0]); // 创建FormData对象
 
        $.ajax({
            url: 'your-server-endpoint', // 服务器端点
            type: 'POST',
            data: formData,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理发送的数据
            success: function(response) {
                console.log('File uploaded successfully:', response);
            },
            error: function(xhr, status, error) {
                console.error('File upload error:', status, error);
            }
        });
    });
});

确保将 'your-server-endpoint' 替换为您的服务器端点 URL。这段代码会在用户点击提交按钮时捕获表单的提交事件，并使用 jQuery 异步上传文件。服务器应该能够处理 multipart/form-data 类型的 POST 请求，并响应上传结果。

- 阅读更多 -

SpringBoot项目调用讯飞星火认知大模型

System

2024-08-13

所有,ajax

要在SpringBoot项目中调用钉钉的认知智能服务（即钉钉的星火认知大模型），你需要按照以下步骤操作：

注册钉钉开放平台账号，并创建应用获取AppKey和AppSecret。
使用钉钉开放平台提供的SDK或直接调用API接口，发送请求到星火认知大模型服务。

以下是一个简单的例子，使用SpringBoot和钉钉开放平台SDK调用星火认知大模型：




import com.dingtalk.api.DefaultDingTalkClient;
import com.dingtalk.api.DingTalkClient;
import com.dingtalk.api.request.OapiRobotSendRequest;
import com.taobao.api.ApiException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class DingTalkController {
 
    @Autowired
    private DingTalkService dingTalkService;
 
    @PostMapping("/sendMessage")
    public String sendMessage(@RequestBody String content) {
        try {
            return dingTalkService.sendMessage(content);
        } catch (ApiException e) {
            e.printStackTrace();
            return "fail";
        }
    }
}
 
class DingTalkService {
    // 使用钉钉开放平台SDK发送消息到钉钉群
    public String sendMessage(String content) throws ApiException {
        DingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/robot/send?access_token=YOUR_ACCESS_TOKEN");
        OapiRobotSendRequest request = new OapiRobotSendRequest();
        request.setMsgtype("text");
        request.setText(new OapiRobotSendRequest.Text());
        request.getText().setContent(content);
        request.setAtMobiles(Arrays.asList("135xxxxxxxx"));
        request.setIsAtAll(false);
        OapiRobotSendResponse response = client.execute(request);
        return response.getBody();
    }
}

在这个例子中，DingTalkController 提供了一个接口 /sendMessage 用于接收文本消息并通过 DingTalkService 类发送到钉钉群。你需要替换 YOUR_ACCESS_TOKEN 为你的机器人的access token，并根据需要调整 setAtMobiles 和 setIsAtAll 方法来设置@人。

注意：这只是一个简化的例子，实际使用时你需要处理更多的错误和异常情况，并确保安全性和机器人的配置正确。

- 阅读更多 -

web开发之数据交互

System

2024-08-13

所有,ajax

在Web开发中，数据交互通常涉及客户端（如网页或应用）与服务器端的通信。以下是一个使用JavaScript和PHP进行数据交互的简单示例：

客户端JavaScript代码（假设使用jQuery库）:




$.ajax({
    url: 'server.php',
    type: 'POST',
    data: { name: 'John Doe', age: 30 },
    success: function(response) {
        console.log('Server response: ', response);
    },
    error: function(xhr, status, error) {
        console.error('An error occurred: ', status, error);
    }
});

服务器端PHP代码 (server.php):




<?php
$name = $_POST['name'] ?? '';
$age = $_POST['age'] ?? 0;
 
// 处理数据...
 
// 返回响应
echo "Hello, $name! You are $age years old.";

在这个例子中，客户端使用jQuery.ajax向服务器发送一个POST请求，发送的数据是名字和年龄。服务器端的server.php文件接收这些数据，进行必要的处理（在这里并未进行处理，只是简单的返回一个问候语），然后返回响应。

- 阅读更多 -