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

JS 实现一键复制文本内容

news 文章来源：https://blog.csdn.net/ggbee_/article/details/134750202 2024/11/18 14:49:23

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

互联网摸鱼日报(2023-12-05)

互联网摸鱼日报(2023-12-05) 36氪新闻 魔珐科技创始人兼CEO柴金祥&#xff1a;3D虚拟人原生产品&#xff0c;正在押注时代的“最大红利”| WISE2023商业之王大会 上市就来割韭菜&#xff1f;数十家在审企业也有“掏空式分红”之嫌&#xff0c;此前多家企业已惹众怒 历史新高…...

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

Android 项目的依赖方式

四种依赖方式 在 Android 项目中&#xff0c;有多种方式可以添加项目依赖。以下是几种常见的方式&#xff1a; Gradle 依赖&#xff1a;这是最常用和推荐的方式。在项目的 build.gradle 文件中&#xff0c;你可以使用 dependencies 块来添加依赖项。Gradle 会自动从远程仓库下…...

编程日记 2023/12/5 15:27:41

ArcGIS提取DEM中的山脉范围

已知数据&#xff1a;DEM文件ASTGTM_N00E118E.img 使用软件&#xff1a;ArcMap 要求&#xff1a;对数据进行操作&#xff0c;提取数据文件中的山脉范围 下面开始操作&#xff1a; 1、 打开ArcMap将DEM文件ASTGTM_N00E118E.img添加到数据框。 2、 接下来我们打开spatial ana…...

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

漏洞复现--万户ezoffice wpsservlet任意文件上传

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…...

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

TCPDUMP抓包明确显示IP地址和端口号

经常使用tcpdump进行抓包的同学可以忽略了&#xff0c;这篇偏于使用扫盲&#xff1b;首先&#xff0c;tcpdump抓包目的IP显示为hostname&#xff0c;如果端口是知名端口&#xff0c;显示为协议名而不是端口号。这种默认其实略有问题的&#xff1a; 如果我们使用默认的hostname…...

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

java FTP客户端获取文件流假死问题

依赖 hutool FTP配置 inspection.data.ftp.host172.26.1.41 inspection.data.ftp.port21 inspection.data.ftp.user6c inspection.data.ftp.password6cqq123 inspection.data.ftp.charsetNameGBK FTP配置类 import lombok.Data; import org.springframework.boot.context.pr…...

编程日记 2023/12/5 15:18:32

python使用记录

1、VSCode添加多个python解释器 只需要将对应的python.exe的目录&#xff0c;添加到系统环境变量的Path中即可&#xff0c;VSCode会自动识别及添加 2、pip 使用 pip常用命令和一些坑 查看已安装库的版本号 pip show 库名称 通过git 仓库安装第三方库 pip install git仓库地…...

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

【Vulnhub 靶场】【Coffee Addicts: 1】【简单-中等】【20210520】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/coffee-addicts-1,699/ 靶场下载&#xff1a;https://download.vulnhub.com/coffeeaddicts/coffeeaddicts.ova 靶场难度&#xff1a;简单 - 中等 发布日期&#xff1a;2021年5月20日 文件大小&#xff1a;1.3 …...

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

codeforces每日两道思维题（第 二 天）

第二天 1 B. Same Parity Summands 原题链接&#xff1a;Problem - 1352B - Codeforces rating : 1200 题目描述&#xff1a; 给定两个正整数 n&#xff08;1≤n≤10^9&#xff09;和 k&#xff08;1≤k≤100&#xff09;。将数字 n 表示为 k 个相同奇偶性的正整数之和&…...

编程日记 2023/12/5 15:13:27

【网络安全】-常见的网站攻击方式详解

文章目录 介绍1. SQL 注入攻击攻击原理攻击目的防范措施 2. 跨站脚本攻击&#xff08;XSS&#xff09;攻击原理攻击目的防范措施 3. CSRF 攻击攻击原理攻击目的防范措施 4. 文件上传漏洞攻击原理攻击目的防范措施 5. 点击劫持攻击原理攻击目的防范措施 结论 介绍 在数字时代&a…...

编程日记 2023/12/5 15:12:26

wordpress 缩略图截图/成都今天宣布的最新疫情消息

1.将程序内部时区设置为UTC时间.(UTC 也可以叫 GMT)PHP设置:date_default_timezone_set("UTC");Yii设置:config/main.php 中添加 :timeZone>UTC,如此设置后,PHP生成的时间基本都是UTC时间了.例如://输出当前UTC时间date("Y-m-d H:i:s");2.数据库中存储U…...

编程日记 2024/11/18 13:29:16

微商城网站建设方案/廊坊seo外包公司费用

多线程 单线程的程序只有一个顺序执行流。多个顺序流之间互不干扰。 多线程的创建 定义Thread类的子类&#xff0c;重写该类的run()方法。创建Thread子类的实例。调用线程对象的start()方法来启动多线程。package ch16;/*** Created by Jiqing on 2017/1/2.*/ public class Fir…...

编程日记 2024/11/18 13:09:59

黔江城乡建设委员会的网站/网站seo推广招聘

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 new Vue({el:#root, //第一种写法data:{name:尚硅谷}})(2).先创建Vue实例&#xff0c;随后再通过vm.$mount(#root)指定el的值。 const v new Vue({data:{name:尚硅谷} })console.log(v) v.$mount(#root) //第…...

编程日记 2024/11/18 13:06:57

临朐网站建设定制/搜索数据

第五十三天打卡 1143. 最长公共子序列 提示 中等 1.3K company 字节跳动 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是…...

编程日记 2024/11/18 11:48:43

建设网站项目概况/深圳竞价托管

文章目录什么是源代码管理工具一.为什么会出现源代码管理工具&#xff1f;二.源代码会引发哪些问题&#xff1f;三.源代码管理工具的作用&#xff1a;源代码管理工具的应用1&#xff0c;主流&#xff1a;git2&#xff0c;CVS3&#xff0c;SVNSVN的基本操作SVN与CVS比较4&#x…...

编程日记 2024/11/18 8:56:56

服务器建设网站/链接交换平台

需求&#xff1a;动态修改二维码以及标题头像等内容 1.海报&#xff08;海报标题超过两行省略&#xff0c;副标题超过三行省略&#xff0c;头像圆角&#xff09; 海报效果如下&#xff1a; 具体代码如下&#xff1a; <template><view class"page"><…...

编程日记 2024/11/18 8:47:48