白嫖 worker 自建短链服务 Url-Shorten-Worker 增加按钮可以删除指定短链
源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker
localStorage 里只写短链的随机字符串
略
显示 urlList 的部分不用 <ul> 里面套 <li> 了。改为 <div> 里面套 <div>
略
显示短链的时候,前面加个删除按钮
先把自动加载
<div class="card-text"><div classs="list-group" id="urlList"><div class="list-group-item"><button type="button" class="btn btn-danger">X</button><span>some text</span></div><div class="list-group-item"><button type="button" class="btn btn-danger">X</button><span>some text some text some text some text some text some text some text some text some text some text some text </span></div></div></div>
API 支持删除短链
POST
cmd: 取值
keyPhrase: 在
显示 urlList 的部分 按钮里面加 onclick 事件
<div classs="list-group" id="urlList"><div class="list-group-item"><button type="button" class="btn btn-danger" onclick='deleteShortUrl("4rEbzm")'>X</button><span>some text</span></div><div class="list-group-item"><button type="button" class="btn btn-danger" onclick='deleteShortUrl("8NKY34")'>X</button><span>some text some text some text some text some text some text some text some text some text some text some text </span></div></div>
测试了一下效果,能生效,修改
加载 localStorage 到 urlList 的部分,用 JS 实现
function addUrlToList(shortUrl, longUrl) {let urlList = document.querySelector("#urlList")let child = document.createElement('div')child.classList.add("list-group-item")let btn = document.createElement('button')btn.setAttribute('type', 'button')btn.classList.add("btn", "btn-danger")btn.setAttribute('onclick', 'deleteShortUrl(\"' + shortUrl + '\")')btn.innerText = "X"child.appendChild(btn)let text = document.createElement('span')text.innerText = window.location.host + "/" +shortUrl + " " + longUrlchild.appendChild(text)urlList.append(child)}
规范 API
API 添加短链出错时,status
API 添加短链成功时,status
显示
略
评论
发表评论