209 lines
6.8 KiB
HTML
209 lines
6.8 KiB
HTML
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||
<title>主页</title>
|
||
</head>
|
||
<style>
|
||
h4 { margin:10px; }
|
||
div { user-select:none; }
|
||
a { text-decoration:none; }
|
||
span { display:inline-block; margin:5px; }
|
||
a, img { -webkit-user-drag:none; }
|
||
img { vertical-align:middle; }
|
||
.operation { color:white; }
|
||
.operation:hover { cursor:hand; color:black; }
|
||
.menu { position:absolute; background:white; border:1px solid gray; width:100px; display:none; }
|
||
.menu div:hover { background:#ddd; }
|
||
#div_logo { text-align:center; }
|
||
#div_search { text-align:center; white-space:nowrap; }
|
||
#list a { margin:10px; width:50px; height:75px; display:inline-block; text-align:center; white-space:nowrap; overflow:hidden; color:black; }
|
||
#list button { width:50px; height:50px; font-size:40px; }
|
||
#div_buttons { text-align:center; }
|
||
</style>
|
||
<body>
|
||
<div id="div_logo"><img src="logo.png"></div>
|
||
<div id="div_search">
|
||
<select id="search_engine">
|
||
<option value="https://www.baidu.com/s?wd=%s">百度</option>
|
||
<option value="https://cn.bing.com/search?q=%s">必应</option>
|
||
<option value="https://www.sogou.com/tx?query=%s">搜搜</option>
|
||
<option value="https://www.so.com/s?q=%s">360搜索</option>
|
||
<option value="https://www.sou.com/s?q=%s">360AI搜索</option>
|
||
</select>
|
||
<input type="text" id="text_search">
|
||
<button id="button_search">搜索</button>
|
||
</div>
|
||
<div id="list"></div>
|
||
<div id="menu" class="menu"><div id="menu_modify">修改</div><div id="menu_delete">删除</div></div>
|
||
<dialog id="dialog">
|
||
<h4 align="center" id="type"></h4>
|
||
<input type="text" id="title" placeholder="标题" value=""><p>
|
||
<input type="text" id="website" placeholder="https://" value=""><p>
|
||
<div id="div_buttons"><button id="button_confirm">确定</button> <button id="button_cancel">取消</button></div>
|
||
</dialog>
|
||
<script>
|
||
var json, id, timer, title1, website1, type1;
|
||
if (!localStorage.webfav)
|
||
localStorage.webfav = '[]';
|
||
var webfav = localStorage.webfav;
|
||
|
||
document.addEventListener('contextmenu', function(e){
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('click', function(e){
|
||
var rect = menu.getBoundingClientRect();
|
||
if (e.pageX < rect.left || e.pageX > rect.right || e.pageY < rect.top || e.pageY > rect.bottom){
|
||
menu.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
function genList() {
|
||
json = JSON.parse(localStorage.webfav);
|
||
list.innerHTML = '';
|
||
for (var i=0; i<json.length; i++) {
|
||
var a = document.createElement('a');
|
||
a.href = json[i].website;
|
||
a.target = '_blank';
|
||
var img = document.createElement('img');
|
||
img.src = json[i].website + '/favicon.ico';
|
||
img.style.width = '50px';
|
||
img.style.height = '50px';
|
||
img.title = json[i].title;
|
||
img.alt = json[i].title;
|
||
|
||
//长按菜单，https://www.5axxw.com/questions/simple/nyzvs3
|
||
img.addEventListener('contextmenu', function(e){
|
||
e.preventDefault(); // 阻止默认的右键菜单弹出
|
||
});
|
||
//通过时间间隔区分点击和长按，https://www.jianshu.com/p/b05d3d5d5e81
|
||
(function(i){
|
||
img.addEventListener('mousedown', function(e){
|
||
e.target.style.background = '#eee';
|
||
timer = setTimeout(function(){
|
||
menu.style.display = 'block';
|
||
menu.style.left = e.pageX + 'px';
|
||
menu.style.top = e.pageY + 'px';
|
||
id = i;
|
||
title1 = json[i].title;
|
||
website1 = json[i].website;
|
||
}, 500);
|
||
});
|
||
var t, time;
|
||
img.addEventListener('touchstart', function(e){
|
||
e.target.style.background = '#eee';
|
||
e.preventDefault();
|
||
t = e.touches[0];
|
||
time = Date.now();
|
||
timer = setTimeout(function(){
|
||
e.target.style.background = '#eee';
|
||
menu.style.display = 'block';
|
||
menu.style.left = t.pageX + 'px';
|
||
menu.style.top = t.pageY + 'px';
|
||
id = i;
|
||
title1 = json[i].title;
|
||
website1 = json[i].website;
|
||
}, 500);
|
||
});
|
||
img.addEventListener('touchend', function(e){
|
||
e.target.style.background = 'none';
|
||
clearTimeout(timer);
|
||
var dt = Date.now() - time;
|
||
if (dt < 300)
|
||
window.location.href = json[i].website;
|
||
});
|
||
})(i);
|
||
img.addEventListener('mouseup', function(e){
|
||
e.target.style.background = 'none';
|
||
clearTimeout(timer);
|
||
});
|
||
a.appendChild(img);
|
||
var br = document.createElement('br');
|
||
a.appendChild(br);
|
||
var text = document.createTextNode(json[i].title);
|
||
a.appendChild(text);
|
||
list.appendChild(a);
|
||
}
|
||
|
||
var a = document.createElement('a');
|
||
var button = document.createElement('button');
|
||
button.textContent = '+';
|
||
button.onclick = function(){
|
||
type.textContent = '添加';
|
||
type1 = 0;
|
||
title.value = '';
|
||
website.value = '';
|
||
dialog.showModal();
|
||
};
|
||
a.appendChild(button);
|
||
list.appendChild(a);
|
||
}
|
||
|
||
text_search.addEventListener('keypress', function(e){
|
||
if (e.keyCode == 13) {
|
||
var url = search_engine.options[search_engine.selectedIndex].value.replace('%s', text_search.value);
|
||
window.open(url, "_blank");
|
||
}
|
||
});
|
||
|
||
button_search.addEventListener('click', function(){
|
||
var url = search_engine.options[search_engine.selectedIndex].value.replace('%s', text_search.value);
|
||
window.open(url, "_blank");
|
||
});
|
||
|
||
menu_modify.addEventListener('click', function(){
|
||
menu.style.display = 'none';
|
||
title.value = title1;
|
||
website.value = website1;
|
||
type.textContent = '修改';
|
||
type1 = 1;
|
||
dialog.showModal();
|
||
});
|
||
|
||
menu_delete.addEventListener('click', function(){
|
||
menu.style.display = 'none';
|
||
json = JSON.parse(localStorage.webfav);
|
||
json.splice(id, 1);
|
||
localStorage.webfav = JSON.stringify(json);
|
||
genList();
|
||
});
|
||
|
||
button_confirm.addEventListener('click', function(e){
|
||
if (title.value == '') {
|
||
alert('标题不能为空');
|
||
return;
|
||
}
|
||
if (website.value == '') {
|
||
alert('网址不能为空');
|
||
return;
|
||
}
|
||
for (var i=0; i<json.length; i++) {
|
||
if (json[i].website == website.value){
|
||
alert('网址已经存在！');
|
||
return;
|
||
}
|
||
}
|
||
dialog.close();
|
||
if (type1 == 0) {//添加
|
||
json = JSON.parse(localStorage.webfav);
|
||
json.push({
|
||
title: title.value,
|
||
website: website.value
|
||
});
|
||
} else if (type1 == 1) {//修改
|
||
json[id].title = title.value;
|
||
json[id].website = website.value;
|
||
}
|
||
localStorage.webfav = JSON.stringify(json);
|
||
genList();
|
||
});
|
||
|
||
button_cancel.addEventListener('click', function(e){
|
||
dialog.close();
|
||
});
|
||
|
||
genList();
|
||
</script>
|
||
</body>
|
||
</html> |