密码管理器前端实现-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/105658249
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
	<title>	</title>
	<style>
		.hand{
			text-align: center;
			border-radius: 10px;
			width: 60px;
			height: 36px;
			line-height: 36px;
			
		}
		.hand:hover{
			cursor: pointer;
			background: #145ccd;
			color: #fff;
		}
	</style>
</head>
<body>
	
	<div class="container-fluid">
		<h2 style="padding:20px 0 40px 225px;">copy</h2>
	  <div class="row">
	     <div class="col-md-8" style="margin: 0 auto;">
			<div class="table-responsive">
			  <table class="table table-hover ">
			  	<thead>
			  		<tr>
			  			<td>序号</td>
			  			<td>平台</td>
						<td>账号</td>
						<td>操作</td>
						<td>密码</td>
						<td>操作</td>
					</tr>
			  	</thead>
			  	<tbody class="Abox">
			  	
			  	</tbody>
			    
					
			  </table>
			</div>



		  </div>
	  </div>
	</div>


	
</body>
</html>
<script src="https://cdn.bootcss.com/zui/1.8.1/lib/jquery/jquery.js"></script>
<script>
	//账号、密码数据
	let dataMsg=[{'type':"bilibili",'account':1111,'passward':16666666},
				 {'type':"腾讯视频",'account':22222,'passward':26666666},
				 {'type':"百度云",'account':33333,'passward':36666666}
				]



	/**
	 * 复制内容到粘贴板
	 * content : 需要复制的内容
	 * message : 复制完后的提示，不传则默认提示"复制成功"
	 */
	function copyToClip(clH,content, message) {
	    var aux = document.createElement("input"); 
	    aux.setAttribute("value", content); 
	    document.body.appendChild(aux); 
	    aux.select();
	    document.execCommand("copy"); 
	    document.body.removeChild(aux);
	    if (message == null) {
	        // alert("复制成功");
	     
	        clH.html("已复制")
	    } else{
	    
	    	clH.html("已复制")
	        // alert(message);
	    }
	}


	$('.Abox').on('click','.accountCopy', function(){
		let account=$(this).parents('tr').children('.account').text()
		let aHthm=$(this)
		
		copyToClip($(this),account, "已复制")
		setTimeout(function(){aHthm.html("复制")},500)


	})

	$('.Abox').on('click','.passwardCopy', function(){
		let passward=$(this).parents('tr').children('.passward').text()
		let pHthm=$(this)
		copyToClip($(this),passward, "已复制")
		setTimeout(function(){pHthm.html("复制")},500)
		

	})
	

	let strTbody=''
	let strTr=`
				<tr>
					<td>floor</td>
					<td>Type</td>
					<td class="account">accountData</td>
					<td ><div class="accountCopy hand" title="">复制</div></td>
					<td class="passward">passwardData</td>
					<td ><div class="passwardCopy hand" title="">复制</div> </td>
					
				</tr>

	`
	$('.Abox').empty()
	dataMsg.forEach(function(v,i,a){
		strTbody+=strTr.replace('floor',i+1)
						.replace('Type',a[i].type)
						.replace('accountData',a[i].account)
						.replace('passwardData',a[i].passward)

	})
	$('.Abox').append(strTbody)
	$("tr:odd").css("background-color","#cececec9");
	$("tr:even").css("background-color","#FFF");
</script>
效果展示：