一、实现思路
-
键盘的生成
①通过JS的for循环生成一个一个的字母，而不是直接写在html中，这样会方便很多；
②字母、网址的图标（https:// + domain + /favicon.ico）、编辑按钮都是通过JS创建生成，再append到键盘的小格格中；
③最后通过CSS写样式整理它们的布局。 -
存储问题
①存储问题就要用到localStorage这个对象，它是HTML5新加的特性，主要用来作为本地存储使用；要注意引用的类型！！！
②要存储到本地浏览器时：localStorage.setItem('key',JSON.stringify(value));
③要从本地储存中获取数据时：JSON.parse(localStorage.getItem(name) || 'null')
编辑过网址后要重新存储一下当前数据；获取网址数据时也要检验一下本地是否存储过数据（当然，这个数据的名字要自己命名）
二、代码知识点
-
<kbd></kbd>
①<kbd></kbd>定义键盘文字，表示文本是从键盘上键入的，是行内元素。若要定义宽高，要用display: inline-block转化为行内块状元素。
②<kbd>定义的字母和<div>定义的字母的区别：
image.png
-
text-transform: uppercase;把小写转换成大写； -
background: linear-gradient(to bottom, #292929 0%,#111111 100%);背景渐变色； -
键盘点击事件
document.onkeypress = function(e){} -
textContent与innerHTML、innerText
//HTML
<ul id="myList">
<li id="item1">Coffee</li>
<li id="item2">Tea</li>
</ul>
//JS
var list = document.getElementById('myList')
console.log(list.textContent)
console.log(list.innerHTML)
console.log(list.innerText)
结果.png
-
block,inline和inline-block
①block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始;
②inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行;
③inline-block将元素显示为行内块状元素，既有行内元素的特性，也有块状元素的特性；设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。 -
alert(),confirm()和prompt()
alert()--警告消息框；
confirm()--确认消息框；
prompt()--提示消息框，用户可写值；
网友评论