實現功能:實現點擊轉換爲固定格式的json格式;並且實現點擊複製功能
使用前端代碼實現:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="__HOME__/js/jquery.js"></script>
<script type="text/javascript" src="__HOME__/js/layer/layer.js"></script>
</head>
<body>
<div style="margin:10px auto;border:1px solid gray;width:400px;height:200px">
<h1>小工具</h1>
<div class="left">
姓名:<input type="text" name="uname" value=""><br/>
年齡:<input type="text" name="age" value=""><br/>
愛好:<input type="text" name="hoby" value=""><br/>
</div>
<div class="right">
<button id = "trans">點擊轉化</button>
</div>
轉化結果:<input type="text" name="result" value="">
<button id ="copy">複製</button>
</div>
</body>
<script type="text/javascript">
$('#trans').on('click',function(){
var uname = $('input[name="uname"]').val();
var age = $('input[name="age"]').val();
var hoby = $('input[name="hoby"]').val();
var res ={'姓名':uname,'年齡':age,'愛好':hoby}
res = JSON.stringify(res);
$('input[name="result"]').val(res);
})
$('#copy').on('click',function(){
var data = $('input[name="result"]').val();//要複製的內容
var oInput = document.createElement('input');
oInput.value = data;
document.body.appendChild(oInput);
oInput.select(); // 選擇對象
document.execCommand("Copy"); // 執行瀏覽器複製命令document.execCommand此命令牛逼
oInput.className = 'oInput';
oInput.style.display='none';
})
</script>
</html>