全面指南：用JavaScript实现复制功能的方法
最编程
2024-02-15 07:42:54
...
3、直接复制 url
<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl(){
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>
4、点击文本框时，复制文本框里面的内容
<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>
5、复制文本框或者隐藏域中的内容
<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select();
js=myimg.createTextRange();
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange();
js.execCommand("Copy");
alert("复制成功!");
}
</script>
6、复制 span 标记中的内容
<script type="text/javascript"></script>
<script type="text/javascript">
function copyText(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");
}
</script>
7、浏览器兼容 copyToClipboard("拷贝内容")
function copyToClipboard(txt) {
if (window.clipboardData) {
window.clipboardData.clearData();
clipboardData.setData("Text", txt);
alert("复制成功！");
} else if (navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor("text/unicode");
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode", str, copytext.length * 2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans, null, clipid.kGlobalClipboard);
alert("复制成功！");
}
}
8、兼容各大浏览器的复制代码（结合ZeroClipboard.js）
<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( $('fe_text').value );
});
clip.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("该地址已
经复制，你可以使用Ctrl+V 粘贴。");
});
clip.glue('clip_button', 'clip_container' );
}
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
</body>
</html>
推荐阅读
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享，主题为「敏捷需求挖掘和组织方法，交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验，完成了企业多个团队从传统模式到敏捷转型的落地和实施，积淀了很多的经验。 这次分享主要包含以下2个部分： 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis（以下简称EDBA） 用户影响地图，是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题，比如大家使用不同的业务语言、技术语言，造成角色间的沟通阻碍，还会导致一些问题，比如需求误解、需求传递错误等；这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间，研发人员必须要将这些需求实现交付，他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案，需要把它实现，但没有和业务侧一起去思考解决方案是否正确，能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设，也就是功能需求。首先把它先实现，再逐步去验证我们每一个小目标是否已经实现，再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题，我们如何避免？先简单介绍做敏捷转型的常规思路： 先做团队级的敏捷，首先把产品、开发、测试人员，还有一些更后端的人员比如交互运维的同学放在一起，组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的，第一层是业务需求，在这个层级是以用户目标和业务目标作为输入进行规划，同时需要去考虑客户的诉求。业务人员通过获取到的业务需求，进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元，它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能，它是我们集成和测试的对象，也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队，映射到迭代计划会上要把它分解为相应的技术任务，包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来，形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程，最后生产。另外产品需求包含了操作流程和业务规则，具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图，在敏捷江湖上其实有一个传说，大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉，在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前，先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后，用户故事地图才去梳理我们整个的业务工作流，以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题，我们包括以下这些： 首先是范围蔓延，我们在整张地图上，功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上，那大家都有不同想法些立场，会提出很多需求（正确以及错误的需求）。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求，比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话，就需要降低优先级或弃掉。另外，通常我们去制定解决方案的时候，会考虑较完美的实现，导致解决方案括很多的功能。这个时候关键目标至关重要，会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构： 第一层why，你的业务目标哪个是最重要的，为什么？涉及到的角色有哪些？ 第二层how ，怎样产生影响？影响用户角色什么样的行为? （不需要去列出所有的影响，基于业务目标） 第三层what，最关键的是在梳理需求时不需一次把所有细节想全，这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图，业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的，specific非常的具体，miserable 是可以衡量的，action reoriented是面向活动的， real list 也是很实际的。 量化的目标会指引我们接下来的行动，梳理一个业务目标，尽量去量化，比如 ：我们通过打造一条什么样的流水线，能够提高整个部署的效率，时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图， how 层级识别出来的内容，客服角色：想要对它施加的影响，把客户引导到论坛上，帮助客户更容易的跟踪问题，更快速的去定位问题。初级用户：方论坛上找到问题。高级用户：在论坛上回答问题。通过我们这些用户角色，进行活动，完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级，才是我们日常接触比较多的真正的功能的特性和需求，比如引导到客户到论坛上，其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付，在每个迭代之前做进一步的梳理，细化成相应的用户故事。 这个是云智慧团队中，自己做的影响地图的范例，可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为：
-
41 个下载免费 3D 模型的最佳网站-使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台，也是一个培养新 3D 艺术家的社区。Clara.io 提供+100，000个免费的3D模型，包括OBJ，Blend，STL，FBX，DAE，Babylon.JS，Three.JS格式，用于 Clara.io，Unity 3D，Blender，Sketchup，Cinema 4D，3DS Max和Maya。 使用说明：免费，标准和专业帐户仅供个人使用，如果您需要将 clara.io 用于商业用途，请与销售团队联系。 18. 3DExport 3DExport是一个市场，您可以在其中购买和销售用于CG项目的3D模型，3D打印模型和纹理。它提供15 +不同的3D格式供下载，如3DS MAX（.max），Cinema4D（.c4d），Maya（.mb，.ma），Lightwave（.lwo），Softimage（.xsi），Wavefront OBJ（.obj），Autodesk FBX（.fbx）等。它还提供15种不同的语言！ 使用说明：免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库，允许用户共享和下载SketchUp 3D模型，用于建筑，设计，施工和娱乐！任何人都可以免费制作，修改和重新上传内容到3D仓库，您可以找到任何您能想到的东西，如家具，电子产品，室内产品等。 使用说明：3D Warehouse中的所有模型都是免费的，因此任何人都可以下载文件以用于SketchUp甚至其他软件，如AutoCAD，Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库，我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上，您可以下载高质量的多边形网格3D模型，3D CAD实体对象，纹理，Vray材料，3D作品，CAD图纸等。 使用说明：免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样，它提供免费的3D模型，还包括Vray材料，CAD块，2d和3d纹理集合，无需注册即可免费下载。它是不断更新的，因此您可以查找或请求3DS，MAX，C4D，skp，OBJ，FBX，MTL等格式的模型。 使用说明：所有资源均不允许用于商业用途，否则您将承担责任。 22. Hum3D 自2005年以来，Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间，并制作逼真的3D模型，用于电影，视频游戏，AR应用程序和可视化。所有模型均由首席3D艺术家进行验证，他们检查其是否符合专业要求和最新的3D建模标准。 使用说明：免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样，它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型！它提供3ds，wavefront，bryce，poser，lightwave，md2和unity3d格式的模型。还有一个很棒的纹理集合，可以在您最喜欢的建模和渲染程序中使用。 使用说明：您从这里下载的所有内容都可以免费使用，除非它不能包含在另一个免费的网络或CD收藏中，也不能单独出售。否则，您可以在商业游戏，3D应用程序或渲染作品中使用它。您不必提供信用，但如果您这样做，那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频，您可以找到许多为CGI工作的信息架构设计的模型，所有这些都可以在现实生活中使用。您可以免费下载它们，但是，如果您想一次下载它们，您可以支付 3 到 9 欧元。 使用说明：您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上，您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人！环境CG是使用许多不同的方法和资产类型创建的，例如照片纹理（PBR），贴花（PBR），图集（PBR），照片纹理（普通），物质存档（SBSAR），雕刻画笔，3D模型和地形。您可以在所有项目中*使用它们！ 使用说明：在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品，即使是出于商业目的，也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站：皮克斯，创建于 1993 年，该纹理库包括 128 个重复纹理，现在免费提供。 它包含您来到的纹理，包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明：皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的，您也可以重新混合、调整和构建您的作品，只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载！ 28. 3DXO 即使有近 620 个免费贴纸可供下载，3DXO 也不是最大的资源，但它的内容非常有用，不需要注册。无论是简单的墙壁或地板，还是一些奇怪的小东西，您都需要的纹理都可以在此网站上看到。 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型，并且本网站上的所有内容都是免费的，完全是公共领域！使用我们的模型时无需信用或归属！ 使用说明：为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站，由3D社区的图像促进协会管理，特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术，以及所有正在学习3D可视化的人。 使用说明：您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发，即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场，您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产！ 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户，提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的，并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型，包括 OBJ、STL 和 FBX，只需单击下载按钮即可。 使用说明： 要下载模型，只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站，包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型，使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO，设计师只需在网站上搜索他们正在寻找的模型类型，然后下载 STL 格式的文件。 使用说明： 要使用 3DAGOGO，只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型，并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件，可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用，它提供了广泛的工具和功能，可用于创建用于各种目的的3D模型。 该网站易于浏览，您可以找到开始使用FreeCAD的所有必要信息。此外，该网站还提供一系列教程和指南，可帮助您了解 3D 建模的来龙去脉。 使用说明： 要下载模型，请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高，因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型，包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部！该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型，还可以通过分享自己的设计为社区做出贡献。此外，Pinshape 提供了一系列自定义选项，因此您可以调整和调整模型以满足您的特定需求。 使用说明： 要下载模型，请在网站上创建一个帐户，搜索所需的模型，然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型，您可以下载各种格式的模型，例如 STL、OBJ 和 FBX。该网站易于使用，您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合，从日常物品到复杂的机械，以及介于两者之间的一切。该网站的收藏量在不断增长，每天都有新的型号增加。 使用说明： 要下载模型，请在网站上搜索所需的模型，然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型，包括建筑，车辆和角色。无论您需要建筑物，汽车还是人的3D模型，都可以在此网站上找到。 该网站易于浏览，您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息，例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明： 要下载模型，请访问网站，从库中选择所需的模型，然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们，将您的 3D 项目提升到一个新的水平！ 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说，该平台是一个很好的资源。该网站有大量模型可供选择，包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览，以找到适合其项目的完美资源。此外，3DExport 还提供一系列教程和其他 3D 资源，以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明： 要使用 3DExport，只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索，以找到所需的型号。找到喜欢的模型后，只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场，提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产，以便在他们的项目中使用。 使用说明： 创建免费帐户后，您可以浏览社区上传的大量3D模型。当您找到要使用的一个时，只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场，提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型，具有不同的定价计划，允许用户访问一系列模型。 使用说明： 注册免费帐户后，只需浏览3D模型库，选择您喜欢的模型，然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说，这是一个独特的资源。该平台提供了大量3D模型，这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明：
-
用JavaScript实现10秒自动减的支付倒计时功能
-
用纯JavaScript打造倒计时功能的简易实现
-
用JavaScript轻松实现一个简单的购物车功能
-
如何轻松创建React中的倒计时功能：实现解耦与通用方法指南
-
如何在JavaScript中实现评论点赞功能的方法指南
-
用JavaScript实现中文转成拼音首字母及五笔简码的实用方法
-
使用H5实现扫码功能：通过JavaScript的quaggaJS，专攻条形码识别——方法二
-
全面理解并掌握JavaScript的forEach方法指南