Naccl
66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>短链接生成</title>
|
|
<link rel="icon" href="/img/favicon.ico">
|
|
<link rel="stylesheet" href="/css/base.css">
|
|
</head>
|
|
<body>
|
|
<div class="box">
|
|
<label for="long" class="inp">
|
|
<input type="text" id="long" placeholder=" ">
|
|
<span class="label">长链接</span>
|
|
<span class="focus-bg"></span>
|
|
</label>
|
|
<button type="button" id="generate">生成短链接</button>
|
|
<div style="text-align: center;">
|
|
<label for="short" class="inp short">
|
|
<input type="text" id="short" placeholder=" ">
|
|
<span class="label">短链接</span>
|
|
<span class="focus-bg"></span>
|
|
</label>
|
|
<button type="button" id="copy" style="width:100px;" data-clipboard-action="copy" data-clipboard-target="#short">Copy</button>
|
|
</div>
|
|
</div>
|
|
<script src="/js/jquery.min.js"></script>
|
|
<script src="/js/clipboard.min.js"></script>
|
|
<script>
|
|
$('#generate').click(() => {
|
|
let longURL = $('#long').val();
|
|
if (longURL) {
|
|
$.ajax({
|
|
url: "/generate",
|
|
type: "POST",
|
|
contentType: "application/json",
|
|
data: JSON.stringify({
|
|
longURL: longURL
|
|
}),
|
|
dataType: "json",
|
|
success: function (res) {
|
|
if (res.code === 200) {
|
|
$('#short').val(res.data);
|
|
} else {
|
|
alert(res.msg);
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('异常错误');
|
|
}
|
|
});
|
|
} else {
|
|
alert('请输入原始链接');
|
|
}
|
|
})
|
|
let clipboard = new ClipboardJS('#copy');
|
|
clipboard.on('success', function (e) {
|
|
e.clearSelection();
|
|
$('#copy').text('Copied!');
|
|
setTimeout(() => {
|
|
$('#copy').text('Copy');
|
|
}, 2000)
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|