创建一个HTML5网页,HTML5 创建一个Web网页便利贴

在这篇文章里我将研究HTML5上2个新的功能：contenteditable 和 localStorage。当我看了HTML5、W3C规范说明后，我迫不及待的要在这同一个程序上写出例子来演示这些新功能。

当你在看我前面所写的HTML 5例子时，我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API，而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。

在九十年代中期，我曾注册了一个软件专利，它是一个“WEB便利贴”。用最简单的话来描述就是，它能创建一个“黄色的便利贴”，粘在你的网页上，就像现实生活中你贴在电脑显示器上的效果。HTML5的内容可编辑功能和本地存储(localStorage)功能使创建web便利贴的功能变得快速简单！

演示程序如何使用：

用鼠标点击便利贴的区域，敲入信息。这个程序会把你敲入的信息都存入本地存储里(不是cookie里)。当你重新访问这个页面时，你的便利贴信息就会记住你上次写的内容。请记住，没有一个浏览器完全实现了HTML5，这个例子需要在支持HTML5的浏览器上运行，比如Firefox3.5以上。

下面就是我的例子(点击，然后输入你的信息！)：

实现localStorage的关键方法很简单，就像这些：

functionstoreUserScribble(id){varscribble=document.getElementById(’scribble’).innerHTML;

localStorage.setItem(’userScribble’,scribble);

}functiongetUserScribble(){if( localStorage.getItem(’userScribble’)){varscribble=localStorage.getItem(’userScribble’);

}else{varscribble=‘你可以在这个便利贴上随意编写…而且下次你再访问我的博客时就会看到我记住了你输入的信息！’;

}

document.getElementById(’scribble’).innerHTML=scribble;

}

我选择在

上放置我的内容可编辑属性和onkeyup事件：

例子中完整的HTML代码可以点击这里下载。

在这个例子中，便利贴是可以缩放的。创建一个小便利贴，把它放在你的web网页上，这给你的网站或web应用增添了一个有趣的功能。

创建一个HTML5网页,HTML5 创建一个Web网页便利贴相关推荐

HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
HTML5+CSS+JS期末大作业：网上书店网页设计(12页) 学生DW网页设计作业成品 web课程设计网页规划与设计 web网页设计与开发
HTML5期末大作业:网上书店网页设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. ...
web前端期末大作业：青岛旅游网页主题网站设计——青岛民俗4页 HTML+CSS 民俗网页设计与制作 web网页设计实例作业 html实训大作业
年度指南-Web网页开发学习总纲-2023修订版
年度指南-Web网页开发学习总纲-2023修订版为什么学习写代码? Web网页开发的用途 Web网页开发者类型前端开发者后端开发者全栈开发者可能需要用到的工具 HTML & CSS ...
ABB机器人二次开发：使用Web网页读取机器人系统信息的操作方法
本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 概述对于ABB机器人进行远程监控,除了使用PC SDK二次开发后生成远程监控程序以外,还可以使用ABB机 ...
WEB网页短信系统建设方案
根据客户和公司的需要工作组近期进行了对短信系统的开发.在此为大家分享下一:短信平台的适用性要求 1:跨平台开发根据要求系统必须支持跨平台,苹果系统.WINDOWS系统.Linux系统必须在不下载 ...
DIV布局——爱影评在线电影(10页面) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:影视视频网站设计--爱影评在线电影(10页面) HTML+CSS+JavaScript 学生DW网页设计作业成品 web网页设计制作大作业常见网页设计作业题材有个人. 美食. ...
html5 打造桌面便签,HTML5 – 创建一个Web网页便利贴
在我之前的博客里,我给大家分享了HTML5上拖拽功能的例子.在这篇文章里我将研究HTML5上2个新的功能:contenteditable 和 localStorage.当我看了 HTML5.W3C规 ...
html5 网页便利贴,HTML5 – 创建一个Web网页便利贴
当你在看我前面所写的HTML 5例子时,我正在思考创建一个简单但又适用的例子.以一种更新奇的方式来演练这些HTML5新特性.我的目标并不是想单纯的展示这些HTML 5 API,而是想用例子来告诉开发人 ...

创建一个HTML5网页,HTML5 创建一个Web网页便利贴

创建一个HTML5网页,HTML5 创建一个Web网页便利贴相关推荐

最新文章

热门文章