JS实现复制到剪切板效果

最新推荐文章于 2024-03-10 10:30:51 发布

a_靖

最新推荐文章于 2024-03-10 10:30:51 发布

阅读量971

点赞数

分类专栏： JS Web前端文章标签： JS实现复制功能 H5实现复制功能

本文链接：https://blog.csdn.net/qq_35713752/article/details/83107375

版权

Web前端同时被 2 个专栏收录

391 篇文章 24 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

代码：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
		<title>领取兑换码</title>
		<link rel="stylesheet" href="css/tiaoapp.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/tiaoapp.js"></script>
	</head>

	<body>
		<div class="wai">
			<img src="img/wxbook/wxbook_bg.png" alt="" class="back_img">
			<p class="tip" id="copy"></p>
			<p class="tit">复制兑换码，进入微信读书兑换</p>
			<p class="box_tit">使用方式：</p>
			<p class="mess">复制兑换码，然后打开 xxx 即会自动进入<br>活动页面领取福利</p>
			<button class="box_button" onclick="tanchuan()" id="tankuang" data-clipboard-action="copy" data-clipboard-target="#copy">复制兑换码</button>
		</div>
		<div id="help" onclick="cancelHandle()"></div>
		<div class="bg_kuang" id="kuang">
			<div class="groupAlert">
				<img class="attenion_icon" src="img/wxbook/wxBook.png" alt="">
				<p class="attenion_title">恭喜你！兑换成功</p>
				<p class="attention_txt">如果已有“xxx”App，可登录后直接使用；</p>
				<p class="attention_txt" style="margin-top: .2rem">如果没有“xxx”App，可以进入各大应用市场下载，下载后复制兑换码微信登录领取，更有惊喜红包赠送！</p>
			</div>
			<p class="attention_open_txt" onclick="submitFn()">确认</p>

		</div>
	</body>
	<script>
		$(document).ready(function() {
			var targetText = $("#copy").text();
			var clipboard = new Clipboard('#tankuang');
			clipboard.on('success', function(e) {
				console.info('Action:', e.action);
				console.info('Text:', e.text);
				console.info('Trigger:', e.trigger);
				e.clearSelection();
			});
		});
	</script>

</html>

js代码：

window.onload = function() {
	var http_url ='https://xxx'
	var params = GetQueryString("params");
	var appid = GetQueryString("appid");
	console.log('params',params)
	var url = http_url+'/v1/xxx.do';
	var data = {
		params: params,
		appid: appid
	}
	$.post(url, data, function(result) {
		console.log('result', JSON.parse(result).body)
		if(JSON.parse(result).errCode=='0000'){
		$(".wai").html('很遗憾您来晚了一步，兑换码被抢光了');
		}else{
		$("#copy").html(JSON.parse(result).body);
		}
	});
}
function GetQueryString(name) {
	var LocString = String(window.document.location.href);
    var rs = new RegExp("(^|)" + name + "=([^&]*)(&|$)", "gi").exec(LocString), tmp;
    if (tmp = rs) {
        return decodeURI(tmp[2]);
    }
    // parameter cannot be found
    return "";
}

a_靖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现复制到剪切板效果

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。代码：<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met...
复制链接

扫一扫