You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.9 KiB
65 lines
1.9 KiB
<!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>
|
|
|