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

JS 实现一键复制文本内容

news 2025/9/13 22:29:20

1、演示：

2、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一键复制</title><style>.container {display: flex;justify-content: center;>button {background-color: #fff;border: 2px solid #ccc;height: 32px;border-radius: 5px;padding: 5px 15px;}>span {line-height: 32px;}}</style>
</head>
<body><div class="container"><span>如：</span><span id="text">生活如意，事业高升。</span><button id="btn" onclick="copy()">一键复制</button></div>
</body>
<script>function openMessage(value) {const msg = document.createElement('div');msg.style.height = '35px';msg.style.lineHeight = '35px';msg.style.padding = '5px 10px';msg.style.position = 'fixed';msg.style.top = '50%';msg.style.left = '50%';msg.style.transform = 'translate(-50%, -50%)';msg.style.backgroundColor = 'rgba(0, 0, 0, .3)';msg.style.textAlign = 'center';msg.style.color = 'white';msg.style.borderRadius = '15px';msg.textContent = value;document.body.appendChild(msg);setInterval(() => {document.body.removeChild(msg);}, 5000);}function copy() {const text = document.getElementById('text')const textarea = document.createElement('textarea');textarea.readOnly = 'readonly';textarea.style.position = 'absolute';textarea.style.left = '-9999px';textarea.value = text.innerText;document.body.appendChild(textarea);textarea.select();const result = document.execCommand('Copy');if (result) {// console.log('复制成功');openMessage('复制成功')} else {openMessage('操作失败')}document.body.removeChild(textarea);}
</script></html>

相关文章：

JS 实现一键复制文本内容

1、演示&#xff1a; 2、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>一键复制</title&g…...

编程日记 2023/12/5 15:56:07

【Linux】echo命令使用

​echo命令 功能是在显示器上显示一段文字&#xff0c;一般起到一个提示的作用。此外&#xff0c;也可以直接在文件中写入要写的内容。也可以用于脚本编程时显示某一个变量的值&#xff0c;或者直接输出指定的字符串。 ​ 著者 由布莱恩福克斯和切特拉米撰写。 语法 echo […...

编程日记 2023/12/5 15:55:06

Day03 嵌入式---中断

目录 一、简单介绍 二、总体框架 三、NVIC 3.2 NVIC的寄存器 3.3 中断向量表 3.4 中断优先级 3.5 NVIC优先级分组 3.6 NVIC配置 3.6.1、设置中断分组 3.6.2、初始化 四、EXTI 外部中断 4.1.EXTI的基本概念 4.2.EXTI的⼯作原理 4.3 EXTI配置 五、SYSCFG 5.1 SYS…...

编程日记 2023/12/5 15:52:04

wpf devexpress 使用IDataErrorInfo实现input验证

此处下载源码 当form初始化显示&#xff0c;Register按钮应该启动和没有输入错误应该显示。如果用户点击注册按钮在特定的输入无效数据&#xff0c;form将显示输入错误和禁用的注册按钮。实现逻辑在标准的IDataErrorInfo接口。请查阅IDataErrorInfo接口&#xff08;System.Com…...

编程日记 2023/12/5 15:51:03

shell_81.Linux在命令行中创建使用函数

在命令行中使用函数 在命令行中创建函数 两种方法 单行方式来定义函数&#xff1a; $ function divem { echo $[ $1 / $2 ]; } $ divem 100 5 20 $ 当你在命令行中定义函数时&#xff0c;必须在每个命令后面加个分号&#xff0c;这样 shell 就能知道哪里是命令的起止了&am…...

编程日记 2023/12/5 15:49:01

鱼香ROS一键安装命令（支持微信、docker、ros等）

按照指定的数字选择即可。 wget http://fishros.com/install -O fishros && . fishros小鱼的一键安装系列 [14个ROS版本任你选]一键安装Docker使用指南...

编程日记 2023/12/5 15:46:59

深入理解 Go 函数：从基础到高级

一、函数基础 1、函数定义 函数是组织好的、可重复使用的、用于执行指定任务的代码块Go 语言中支持&#xff1a;函数、匿名函数和闭包 package mainimport "fmt"func main(){ret : intSum(1,2)fmt.PrintIn(ret) //3 }func instSum(x,y int) int {return x y }…...

编程日记 2023/12/5 15:45:58

开启三层交换机DHCP服务

二层交换机上不需要配置任何东西&#xff0c;只需要在pc机上开启dhcp服务&#xff0c;配置好LSW1后就可以自动获取到IP地址。 sys Enter system view, return user view with CtrlZ. [Huawei]sys sw1 [sw1]dhcp enable Info: The operation may take a few seconds. Please wai…...

编程日记 2023/12/5 15:44:57

jspdf+html2canvas浏览器缩放问题

之前在弄页面导出为pdf的时候,jspdf配合html2canvas貌似很好用,我自己在使用的时候也没有觉得有什么问题,但是客户那边反馈说下载下来的pdf不全. 后来问了客户才发现客户的浏览器比例缩放到了125%;这就导致了pdf不全, 先看看原来的代码: download() {let jsPDF jspdf.jsPDF;l…...

编程日记 2023/12/5 15:43:56

西南科技大学模拟电子技术实验六（BJT电压串联负反馈放大电路）预习报告

一、计算/设计过程 BJT电压串联负反馈放大电路图1-1-1-1为BJT电压串联负反馈放大实验电路，若需稳定输出电压，减小从信号源所取电流，可引入电压串联负反馈闭合开关。 图1-1-1-1 理论算法公式（1）闭环电压放大倍数 （2）反馈系数 （3）输入电阻 （4）输出电阻 计算过程。开环…...

编程日记 2023/12/5 15:42:55

JS的监听事件

在JavaScript中&#xff0c;你可以使用监听器来捕获和处理不同类型的事件。通过添加事件监听器&#xff0c;你可以指定当特定事件发生时要执行的函数。 以下是几种常见的监听事件的方法&#xff1a; 1. addEventListener()&#xff1a;用于在目标元素上添加事件监听器。它接受…...

编程日记 2023/12/5 15:40:54

JS Object.values()

一、官方定义 返回一个给定对象的自有可枚举字符串键属性值组成的数组 二、语法 Object.values(obj)参数 obj 被返回可枚举属性值的对象。返回值 一个包含对象自身的所有可枚举属性值的数组。描述 Object.values() 返回一个数组&#xff0c;其元素是在对象上找到的可枚举…...

编程日记 2023/12/5 15:39:53

基于Java SSM人力资源管理系统

人力资源管理系统实现对企业人力资源的科学管理。企业有多个部门&#xff0c;每个部门有——名经理和多名员工&#xff0c;公司设置多级岗位&#xff0c;对应不同薪酬标准&#xff0c;员工日常工作进行考勤&#xff0c;岗位变动需要进行登记。系统管理的对象及操作主要有&#…...

编程日记 2023/12/5 15:38:52

人工智能和程序员

一、介绍人工智能和程序员 人工智能&#xff08;AI&#xff09;是一种模拟人类智能的计算机系统&#xff0c;其目的是让计算机具备类似人类的学习、推理、规划和理解能力。人工智能致力于创建能够感知、适应环境并作出决策的智能体&#xff0c;以解决各种复杂的问题。程序员是…...

编程日记 2023/12/5 15:37:52

Unity优化篇：对于unity DrawCall/Mesh/纹理压缩/内存等方面的常规调试和优化手段

对于Unity的DrawCall、Mesh、纹理压缩、内存等方面的常规调试和优化手段&#xff0c;我都有一定的了解。以下是一些常见的优化手段&#xff1a; 减少DrawCall&#xff1a;这是提高性能的关键。尽可能合并相同的材质和纹理&#xff0c;使用LOD&#xff08;Levels of Detail&…...

编程日记 2023/12/5 15:36:51

学生信息管理系统

摘 要 学生成绩管理系统是典型的信息管理系统(MIS)&#xff0c;其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。经过分析&#xff0c;我们使用Microsoft公司的C语言开发工具&#xff0c;将与C语言技术与数据库SQL2008相结合进行设计。首先&#xff0c;…...

编程日记 2023/12/5 15:35:50

纯代码压缩WordPress前端Html

易于阅读的前端代码对开发而言是无比重要的&#xff0c;但对于浏览器来说就显得无比鸡肋了&#xff0c;毕竟浏览器不是像人眼一样看代码&#xff0c;过多的换行和空格&#xff0c;对前台加载是有一定影响的&#xff0c;对使用大带宽高配置服务器的网站&#xff0c;这么点影响可…...

编程日记 2023/12/5 15:33:48

Elasticsearch分词器--空格分词器(whitespace analyzer)

介绍 文本分析&#xff0c;是将全文本转换为一系列单词的过程&#xff0c;也叫分词。analysis是通过analyzer(分词器)来实现的&#xff0c;可以使用Elasticearch内置的分词器&#xff0c;也可以自己去定制一些分词器。除了在数据写入时将词条进行转换&#xff0c;那么在查询的时…...

编程日记 2023/12/5 15:31:44

【LeetCode】692. 前K个高频单词

692. 前K个高频单词 描述示例解题思路及事项思路一思路二 描述 给定一个单词列表 words 和一个整数 k &#xff0c;返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c; 按字典顺序 排序 示例 示例1 输…...

编程日记 2023/12/5 15:30:44

在Windows操作系统上使用rtsp simple server和ffmpeg推送录屏视频流

大纲 1 搭建启动rtsp server2 推送录屏视频流下载FFmpeg 3 检验3.1 获取本机IP3.2 检测 1 搭建启动rtsp server 从https://github.com/aler9/rtsp-simple-server/releases下载Windows版本的编译结果。 解压&#xff0c;然后启动该程序 2 推送录屏视频流 下载FFmpeg 从htt…...

编程日记 2023/12/5 15:29:43

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/9/12 20:17:08

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/10 21:40:39

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/7/8 3:08:09

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/8/11 2:57:01

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/9/3 21:36:33

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2025/9/9 10:08:50

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/9/9 10:08:03