由简单无门槛 js 实现一个触发按键跳转网页的导航网站,效果预览
我们都知道工欲善其事,必先利其器,所以选择好数据结构再来进行编程是很有必要的。由于是一个键盘按键对应一个网站,我们很快就会想到 key:value 所以我用对象来存储。
hash = { q: 'qq.com', w: 'w3cplus.com', e: 'edx.org.com', t: 'cloud.tencent.com', a: 'alloyteam.com', y: 'youtube.com', i: 'iconfont.cn', o: 'opera.com', z: 'zhangxinxu.com', //... }
想到键盘比较多,我就没有写键盘的 HTML 而是改用 JS 自动生成,把要用的三排键想成三个数组存储,可以用对象也可以是二维数组。
var keys = { 0: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',], 1: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',], 2: ['z', 'x', 'c', 'v', 'b', 'n', 'm',], length: 3, }
根据获取到的 keys[][] 的字母来显示键值,遍历该对象进行键盘生成
function creatButton(id) { var oBtn = tag('button') oBtn.id = id oBtn.textContent = 'E' oBtn.onclick = function (e) { //修该键盘的对应网址 } return oBtn } function generateKeyboard(keys, hash) { for (var i = 0; i < keys.length; i++) { var oDiv = tag('div') document.getElementById('main').appendChild(oDiv) for (var j = 0; j < keys[i].length; j++) { var oKbd = tag('kbd') var oBtn = creatButton(keys[i][j]) var oImg = createImage(hash[keys[i][j]]) oKbd.textContent = keys[i][j] oKbd.className = 'key' oDiv.appendChild(oKbd) oKbd.appendChild(oImg) oKbd.appendChild(oBtn) } } }
其实实现该项目最主要的其实就是监听用户按下的键盘,需要做一下监听的范围是 document ,然后就打开相应的网站,不太懂可以先 console.log(e) 可以看一下控制台。
document.onkeypress = function (e) { website = hash[e.key] //location.href = 'https://' + website if (website) { window.open('http://' + website, '_blank') } else { alert('亲, 你还没有编辑呢') } }
用户可以对其的键盘进行网站的改变,也就是对 hash 进行修改,而我们需要对其修改进行保存以防丢失
- previousSibling 为了获取上一节点
oBtn.onclick = function (e) { value = prompt('你想用 ' + (e.target.id) + ' 代表的网址:') hash[e.target.id] = value if (value != null) { setLocalStorage('myWebsite') e.target.previousSibling.src = 'http://' + value + '/favicon.ico' e.target.previousSibling.onerror = function (e) { e.target.src = './favicon.ico' } } } function getLocalStorage(e) { return JSON.parse(localStorage.getItem(e || 'null')) } function setLocalStorage(e) { return localStorage.setItem(e, JSON.stringify(hash)) }