实现功能:实现点击转换为固定格式的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>