当前位置：首页 > news >正文

【前端下拉框】获取国家国旗

news 来源：原创 2025/5/10 7:08:34

一、先看效果

二、代码实现（含国旗）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择国家</title><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css"><style>.country-select {width: 300px;padding: 10px;font-size: 16px;}</style>
</head>
<body><h2>选择国家</h2><label for="country">选择国家:</label><select id="country" class="country-select"><option value="AF" data-flag="af">阿富汗</option><option value="AL" data-flag="al">阿尔巴尼亚</option><option value="DZ" data-flag="dz">阿尔及利亚</option><option value="US" data-flag="us">美国</option><option value="CN" data-flag="cn">中国</option><option value="IN" data-flag="in">印度</option><option value="JP" data-flag="jp">日本</option><option value="BR" data-flag="br">巴西</option><option value="GB" data-flag="gb">英国</option><option value="CA" data-flag="ca">加拿大</option><option value="IT" data-flag="it">意大利</option><option value="JO" data-flag="jo">约旦</option></select><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script><script>$(document).ready(function() {$('#country').select2({templateResult: formatState,templateSelection: formatState});function formatState(state) {if (!state.id) {return state.text;}var $state = $('<span><span class="flag-icon flag-icon-' + $(state.element).data('flag') + '"></span> ' + state.text + '</span>');return $state;}});</script></body>
</html>

2.1说明其余国家自行补充

步骤访问该地址或者ISO 替换value值即可

https://en.wikipedia.org/wiki/ISO_3166-1

<option value="DZ" data-flag="dz">阿尔及利亚</option>

或者参考

全国国家国家码-CSDN博客

三、代码实现（不含国旗）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择国家及电话号码区号</title><!-- 使用不同的 CDN --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/5.0.0/css/flag-icons.min.css"><style>.country-select {width: 350px;padding: 10px;font-size: 16px;}/* 添加必要的样式来确保国旗显示 */.country-option {display: flex;align-items: center;padding: 5px;}.country-option span {margin-left: 10px;}.flag-icon {width: 20px;  /* 调整大小 */height: 20px;display: inline-block;}</style>
</head>
<body><h2>选择国家及电话号码区号</h2><label for="country">选择国家:</label><select id="country" class="country-select"><option value="+86"><span class="flag-icon flag-icon-cn"></span> 中国 (+86)</option><option value="+1"><span class="flag-icon flag-icon-us"></span> 美国 (+1)</option><option value="+44"><span class="flag-icon flag-icon-gb"></span> 英国 (+44)</option><option value="+91"><span class="flag-icon flag-icon-in"></span> 印度 (+91)</option><option value="+81"><span class="flag-icon flag-icon-jp"></span> 日本 (+81)</option><option value="+49"><span class="flag-icon flag-icon-de"></span> 德国 (+49)</option><option value="+33"><span class="flag-icon flag-icon-fr"></span> 法国 (+33)</option><option value="+61"><span class="flag-icon flag-icon-au"></span> 澳大利亚 (+61)</option><option value="+55"><span class="flag-icon flag-icon-br"></span> 巴西 (+55)</option><option value="+27"><span class="flag-icon flag-icon-za"></span> 南非 (+27)</option></select><script>// 如果需要对选择的国家做更多操作，可以通过 JavaScript 来处理document.getElementById("country").addEventListener("change", function() {const selectedCountryCode = this.value;console.log("选择的国家电话区号:", selectedCountryCode);});</script></body>
</html>

【前端下拉框】获取国家国旗

一、先看效果二、代码实现（含国旗） <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2025/5/10 7:08:34

Elasticsearch 操作文档对数据的增删改查操作索引库文档操作数据 CRUD

介绍在 Elasticsearch 中，文档的增、删、改、查操作是核心的基本功能。Elasticsearch 使用 RESTful API 提供这些操作，通常通过 HTTP 请求与 Elasticsearch 集群进行交互。索引库 {"mappings": {"properties": {"title&qu…...

编程日记 2025/5/10 7:00:59

【动手学电机驱动】STM32-MBD（2）将 Simulink 模型部署到 STM32G431 开发板

STM32-MBD（1）安装 STM32 硬件支持包 STM32-MBD（2）Simulink 模型部署入门 STM32-MBD（3）Simulink 状态机模型部署【动手学电机驱动】STM32-MBD（2）Simulink 模型部署入门 1. 软硬件条件…...

编程日记 2025/5/9 1:04:08

小试牛刀-SpringBoot集成SOL链

目录一、什么是solanaj? 二、Pom依赖三、主要类 3.1 RpcClient 3.2 PublicKey 3.3 Transaction 3.4 TransactionInstruction 四、示例代码 Welcome to Code Blocks blog 本篇文章主要介绍了 [小试牛刀-SpringBoot集成SOL链] ❤博主广交技术好友，喜欢文章的…...

编程日记 2025/5/8 4:14:18

数据结构大作业——家谱管理系统（超详细！完整代码！）

目录设计思路： 一、项目背景二、功能分析查询功能流程图： 管理功能流程图： 三、设计四、实现代码实现： 头文件结构体函数声明及定义创建家谱树头结点绘制家谱树（打印） 建立右兄弟…...

编程日记 2025/5/6 10:28:22

【计算机网络】课程实验二交换机基本配置和VLAN 间路由实现

实验二交换机基本配置和VLAN 间路由实现一、实验目的 1．了解交换机的管理方式。 2．掌握通过Console接口对交换机进行配置的方法。 3．掌握交换机命令行各种模式的区别，能够使用各种帮助信息以及命令进行基本的配置。 4&…...

编程日记 2025/5/7 6:01:16

Unity-Mirror网络框架-从入门到精通之AdditiveScenes 示例

文章目录前言Additive Levels和Additive ScenesAdditive Levels场景介绍Portal传送门FadeInOut特效 Additive Scenes示例介绍ZoneHandlerSceneMassage 最后前言在现代游戏开发中，网络功能日益成为提升游戏体验的关键组成部分。Mirror是一个用于Unity的开源网络框…...

编程日记 2025/5/10 6:58:30

java 转义反斜杠 Unexpected internal error near index 1

代码： String str"a\\c"; //出现异常，Unexpected internal error near index 1 //System.out.println(str.replaceAll("\\", "c"));//以下三种都正确 System.out.println(str.replace(\\, c)); System.out.println(str.r…...

编程日记 2025/5/4 10:39:09

html内容过长，实现向上循环滑动效果

以下是几种实现 HTML 内容过长时向上循环滑动的常见方法，你可以根据具体需求和项目场景来选择合适的实现方式： 一、使用 CSS3 animation 实现简单的向上循环滑动（适用于简单的文本等内容滑动场景） 原理通过 CSS3 的 keyframes…...

编程日记 2025/5/10 7:07:30

RAG（Retrieval-Augmented Generation，检索增强生成）流程

目录一、知识文档的准备二、OCR转换三、分词处理四、创建向量数据库五、初始化语言聊天模型1.prompt2.检索链3.对话完整代码知识文档的准备：首先需要准备知识文档，这些文档可以是多种格式，如Word、TXT、PDF等。使用文档加载器或多模态模型…...

编程日记 2025/5/6 17:52:49

数据库系统概论期末复习

期末考试题型： 选择题 20题 20分判断题 10题 10分简答题 4题 20分 SQL语句： （select delete update）30分设计题：ER图和关系模式 ER转关系模式，注意主码，外码的标注 15分应用题：…...

编程日记 2025/5/5 13:13:19

B树与B+树：数据库索引的秘密武器

想象一下，你正在构建一个超级大的图书馆，里面摆满了各种各样的书籍。B树和B树就像是两种不同的图书分类和摆放方式，它们都能帮助你快速找到想要的书籍，但各有特点。 B树就像是一个传统的图书馆摆放方式： 1. 书籍摆放&…...

编程日记 2025/5/4 11:14:17

数据结构-栈与队列笔记

普通的双端队列验证图书取出顺序 class Solution {/*** 验证书籍的借阅顺序是否合法。* * param putIn 表示放入书架的书籍序列。* param takeOut 表示从书架取出的书籍序列。* return 如果书籍的借阅顺序合法，返回 true；否则返回 false。*/public boo…...

编程日记 2025/5/9 0:28:45

Netty中用了哪些设计模式？

大家好，我是锋哥。今天分享关于【Netty中用了哪些设计模式？】面试题。希望对大家有帮助； Netty中用了哪些设计模式？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Netty 是一个高性能的网络通信框架，广泛…...

编程日记 2025/5/6 5:19:47

设计模式与游戏完美开发(3)

更多内容可以浏览本人博客：https://azureblog.cn/ 😊 该文章主体内容来自《设计模式与游戏完美开发》—蔡升达第二篇基础系统第五章获取游戏服务的唯一对象——单例模式（Singleton） 游戏实现中的唯一对象在游戏开发过程中…...

编程日记 2025/5/10 7:03:12

人工智能的发展领域之GPU加速计算的应用概述、架构介绍与教学过程

文章目录一、架构介绍GPU算力平台概述优势与特点二、注册与登录账号注册流程GPU服务器类型配置选择指南内存和存储容量网络带宽CPU配置三、创建实例实例创建步骤镜像选择与设置四、连接实例SSH连接方法远程桌面配置一、架构介绍 GPU算力平台概述一个专注于GPU加速计算的…...

编程日记 2025/5/5 9:11:01

【51单片机零基础-chapter5:模块化编程】

模块化编程将以往main中泛型的代码,放在与main平级的c文件中,在h中引用. 简化main函数将原来main中的delay抽出然后将delay放入单独c文件,并单独开一个delay头文件,里面放置函数的声明,相当于收纳delay的c文件里面写的函数的接口. 注意,单个c文件所有用到的变量需要在该文…...

编程日记 2025/5/9 10:34:49

彻底学会Gradle插件版本和Gradle版本及对应关系

看完这篇，保你彻底学会Gradle插件版本和Gradle版本及对应关系，超详细超全的对应关系表需要知道Gradle插件版本和Gradle版本的对应关系，其实就是需要知道Gradle插件版本对应所需的gradle最低版本，详细对应关系如下表格&#xff0…...

编程日记 2025/5/8 13:23:08

容器技术思想 Docker K8S

容器技术介绍以Docker为代表的容器技术解决了程序部署运行方面的问题。在容器技术出现前，程序直接部署在物理服务器上，依赖管理复杂，包括各类运行依赖，且易变，多程序混合部署时还可能产生依赖冲突，给程序…...

编程日记 2025/5/9 13:14:29

在C程序中实现类似Redis的SCAN机制的LevelDB大规模key分批扫描

在C程序中实现类似Redis的SCAN机制的LevelDB大规模key分批扫描，需要充分利用LevelDB的迭代器（iterator）功能，以便能够高效地扫描和处理大量的键值对。下面是一个详细的实现指南。环境准备首先，确保已经安装了Level…...

编程日记 2025/5/7 6:42:52

多模态论文笔记——CogVLM和CogVLM2

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍多模态模型的LoRA版本——CogVLM和CogVLM2。在SD 3中使用其作为captioner基准模型的原因和优势。文章目录 CogVLM论文背景VLMs 的任务与挑战现有方法及…...

编程日记 2025/5/4 12:23:21

BLDC无感控制的驱动逻辑

如何知道转子已经到达预定位置，因为我们只有知道了转子到达了预定位置之后才能进行换相，这样电机才能顺滑的运转。转子位置检测常用的有三种方式。方式一：通过过零检测，三相相电压与电机中性点电压进行比较。过零检测的优点在于…...

编程日记 2025/5/10 5:12:44

分布式多机多卡训练全景指南：MPI、DeepSpeed 与 Colossal-AI 深度解析

分布式多机多卡训练技术是深度学习领域提高训练效率和加快模型收敛的重要手段。以下是几个流行的框架和工具： 1. MPI（Message Passing Interface） 概述 MPI 是一种标准化的消息传递协议，用于多机多卡之间的通信与协作&#xff0c…...

编程日记 2025/5/6 19:54:11

1.安装: 从GitHub上下载Xlua源码 Tencent/xLua: xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc. (github.com) 下载Xlua压缩包，并解压将Aseet文件夹中的Xlua和Plugins文件夹复制到Unit…...

编程日记 2025/5/6 12:42:11

在调用 borrowObject 方法时，Apache Commons Pool 会根据连接池的配置触发一系列相关的方法

在调用 borrowObject 方法时，Apache Commons Pool 会根据连接池的配置触发一系列相关的方法 1. GrpcChannel 的概念 GrpcChannel 是 gRPC 客户端与服务器之间通信的核心组件。它是基于 HTTP/2 的连接，支持多路复用，即通过单个通道可以发送多…...

编程日记 2025/5/10 2:53:46

【数据结构与算法:八、排序】

第8章排序排序是计算机科学中最基本且最常用的操作之一。本章详细介绍了排序算法的概念、分类、每种算法的定义、图示、代码实现及其应用场景。 8.1 基本概念和排序方法概述 8.1.1 排序的基本概念排序是指将一组无序的记录按照某种指定的顺序重新排列的过程。排序的目…...

编程日记 2025/5/9 15:29:35

Unity学习笔记（六）使用状态机重构角色移动、跳跃、冲刺

前言本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记整体状态框架(简化) Player 是操作对象的类： 继承了 MonoBehaviour 用于定义游戏对象的行为，每个挂载在 Unity 游戏对象上的脚本都需要继承自 MonoBehaviour&#x…...

编程日记 2025/5/4 23:05:14

搭建Golang gRPC环境：protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

参考文章： 安装protoc、protoc-gen-go、protoc-gen-go-grpc-CSDN博客一、简单介绍本文开发环境，均为 windows 环境，mac 环境其实也类似 ~ ① 编译proto文件，相关插件简单介绍： protoc 是编译器，用于将…...

编程日记 2025/5/9 16:03:12

策略模式（strategy)

一.策略模式是什么策略模式是一种行为型对象模式，它定义了一系列算法，并将每一个算法封装起来，使它们可以相互替换。这样，算法可以独立于使用它的客户端而变化‌‌。策略者模式的核心思想是将一系列的算法封装到一系列的策略类里…...

编程日记 2025/5/7 14:32:10

Centos源码安装MariaDB 基于GTID主从部署（一遍过）

MariaDB安装安装依赖 yum install cmake ncurses ncurses-devel bison 下载源码 // 下载源码 wget https://downloads.mariadb.org/interstitial/mariadb-10.6.20/source/mariadb-10.6.20.tar.gz // 解压源码 tar xzvf mariadb-10.5.9.tar.gz 编译安装 cmake -DCMAKE_INSTA…...

编程日记 2025/4/29 23:08:00

如何在 VSCode 中配置 C++ 开发环境：详细教程

如何在 VSCode 中配置 C 开发环境：详细教程在软件开发的过程中，选择一个合适的开发环境是非常重要的。Visual Studio Code（VSCode）作为一款轻量级的代码编辑器，凭借其强大的扩展性和灵活性，受到许多开发者…...

编程日记 2025/5/9 17:45:27

信息安全、网络安全和数据安全的区别和联系

1. 前言有次有朋友问我信息安全、网络安全和数据安全，这三个词平时写文档时怎么用？ 我想很多人都说不清。这次我查阅了资料，尽量讲清楚这三者之间的区别和联系。 2. 信息安全 2.1 定义信息安全是指为数据处理系统建立和采用的技术和管…...

编程日记 2025/5/4 15:29:16

路由组件与一般组件的区别

路由组件与一般组件的区别 1. 基本概念 1.1 路由组件路由组件是指通过路由规则映射的组件，通常放在 pages 或 views 文件夹中。 1.2 一般组件一般组件是指通过 import 导入后直接使用的组件，通常放在 components 文件夹中。 2. 主要区别 2.1 存…...

编程日记 2025/5/10 6:26:48

【微服务】4、服务保护

微服务架构与组件介绍单体架构拆分：黑马商城早期为单体架构，后拆分为微服务架构。跨服务调用与组件使用服务拆分后存在跨服务远程调用，如下单需查询商品信息，使用openfeign组件解决。服务间调用关系复杂，需维护服务…...

编程日记 2025/5/8 9:58:15

6_TypeScript 函数 --[深入浅出 TypeScript 测试]

在 TypeScript 中，函数是编程的核心组成部分之一。TypeScript 不仅继承了 JavaScript 的所有函数特性，还添加了静态类型检查和其他一些增强功能，使得函数更加安全和易于理解。以下是关于 TypeScript 函数的一些关键点和两个具体的示例&#x…...

编程日记 2025/5/9 2:32:52

Apifox=Postman+Swagger+Jmeter+Mock

A. 开发人员接口管理使用(Swagger 工具管理接口) B. 后端开发人员通过Postman 工具，一边开发一边测试 C. 前端开发人员需要Mock 工具提供前端调用 D. 测试人员通过(Postman、Jmeter)等工具进行接口测试为了后台开发、前端开发、测试工程师等不同角色更加便捷管理…...

编程日记 2025/5/6 11:01:24

升级 Spring Boot 3 配置讲解 —— Spring Boot 3 核心源码专讲

学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ Spring Boot 3 是 Spring 生态中的重要里程碑，它不仅全面支持 Java 17，还引入了许多新特性，如对 GraalVM 原生镜像的支持、改进的性能优化以及更灵活的…...

编程日记 2025/5/7 22:11:39

接口开发完后，个人对于接下来接口优化的一些思考

优化点入参的合法性和长度范围，必填项的检查验证因为没有入参，所以不需要考虑。批量思想解决N1问题 // 假设要查询100个订单及其对应的用户信息 List<Order> orders orderMapper.selectList(new QueryWrapper<>().last("limit …...

编程日记 2025/5/6 17:52:59

jenkins 使用 ssh-agent向windows进行部署

背景： jenkins在linux的docker环境内，应用服务部署在windows。需要使用jenkins实现自动化部署。实现方式： jenkins上构建pipeline任务，脚本如下： 遇到问题： 1、问题：jenkins 调用部署bat脚…...

编程日记 2025/5/9 9:18:35

音视频入门基础：MPEG2-PS专题（6）——FFmpeg源码中，获取PS流的视频信息的实现

一、引言通过FFmpeg命令可以获取到PS文件/PS流的视频压缩编码格式、色彩格式（像素格式）、分辨率、帧率信息： ./ffmpeg -i XXX.ps 本文以H.264为例讲述FFmpeg到底是从哪个地方获取到这些视频信息的。二、视频压缩编码格式 （…...

编程日记 2025/5/5 8:22:56

如果Adobe 退出中国后怎么办

最近听说Adobe要退出中国了?那咱们的设计师们可得好好想想怎么搞到正版软件了。别急，今天教大家一个超酷的福利——Edu邮箱！ Edu邮箱是什么？有什么好处？ Edu邮箱就是学校给学生和老师们发的邮箱，一般结尾是.edu。有了…...

编程日记 2025/5/8 7:06:11

欧几里得距离在权重矩阵中的物理意义

欧几里得距离在权重矩阵中的物理意义目录欧几里得距离在权重矩阵中的物理意义**衡量神经元差异程度**：**反映模型变化程度**：**聚类和分组的依据**：自然语言处理中的模型更新：**神经网络聚类分组**：欧几里得距离在权重矩阵中的物理意义衡量神经元差异程度：在神经网络中…...

编程日记 2025/5/9 7:04:25

玩转大语言模型——ollama导入huggingface下载的模型

ollama导入huggingface模型前言gguf模型查找相关模型下载模型导入Ollama配置参数文件导入模型查看导入情况 safetensfors模型下载模型下载llama.cpp配置环境并转换前言 ollama在大语言模型的应用中十分的方便，但是也存在一定的问题，比如不能使用自己…...

编程日记 2025/5/5 4:32:06

Linux-----进程通讯（管道Pipe）

目录进程不共享内存匿名管道通过匿名管道实现通讯有名管道库函数mkfifo() 案例进程不共享内存不同进程之间内存是不共享的。是相互独立的。 #include <stdio.h> #include <stdlib.h> #include <errno.h>int num 0;int main(int argc, char con…...

编程日记 2025/5/5 7:53:04

【C++11】列表初始化、右值引用和移动语义、引用折叠、完美转发

C11 一.C的发展历史二.列表初始化1.C98的{}2.C11的{}3.C11中的std::initializer_list 三.右值引用和移动语义1.左值和右值2.左值引用和右值引用3.引用延长生命周期4.左值和右值的参数匹配5.右值引用和移动语义使用场景1.左值引用使用场景2.移动构造和移动赋值3.右值引用和移动语…...

编程日记 2025/5/9 13:14:34

Openssl1.1.1s rpm包构建与升级

rpmbuild入门知识 openssh/ssl二进制升级文章目录前言一、资源准备1.下载openssh、openssl二进制包2.安装rpmbuild工具3.拷贝源码包到SOURCES目录下4.系统开启telnet，防止意外导致shh无法连接5.编译工具安装6.补充说明二、制作 OpenSSL RPM 包1.编写 SPEC 文件2.…...

编程日记 2025/5/8 13:22:33