注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

用HTML5创建一个网页便利贴  

2011-03-15 14:09:44|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

http://www.daqianduan.com/html5-web-post-it/

https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_of_contenteditable_and_localstorage_create_a_web_sticky_note?lang=en

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

1 <html>
2 <head>
3 <title>HTML5 contenteditable example</title>
4
5 <style type="text/css">
6 #scribble-pad {
7 margin-left:auto;
8 margin-right:auto;
9 height: 475px;
10 width: 475px;
11 background-image:url(https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg);
12 background-repeat: no-repeat;
13 }
14
15 #scribble {
16 height: 300px;
17 width: 300px;
18 padding: 120px 100px 100px 75px;
19 color: #486891;
20 font-family: Arial,sans-serif;
21 font-size: 140%;
22 font-style: italic;
23 font-weight:bold;
24 line-height: 1.5em;
25 }
26
27 #c-link {
28 color: #486891;
29 font-family: Arial,sans-serif;
30 font-size: 95%;
31 font-weight:bold;
32 text-decoration: none;
33 }
34 </style>
35
36
37
38 <script>
39 function storeUserScribble(id) {
40 var scribble = document.getElementById('scribble').innerHTML;
41 localStorage.setItem('userScribble',scribble);
42 }
43
44 function getUserScribble() {
45 if ( localStorage.getItem('userScribble')) {
46 var scribble = localStorage.getItem('userScribble');
47 }
48 else {
49 var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
50 }
51 document.getElementById('scribble').innerHTML = scribble;
52 }
53
54 function clearLocal() {
55 clear: localStorage.clear();
56 return false;
57 }
58 </script>
59
60 </head>
61 <body>
62
63 <a id="c-link" href='' onclick='clearLocal();'>Clear local storage</a>
64
65 <div id="scribble-pad">
66 <div id="scribble" contenteditable="true" onkeyup=storeUserScribble(this.id)>
67 </div>
68 </div>
69
70
71 <script>
72 getUserScribble();
73 </script>
74
75 </body>
76 </html>

  评论这张
 
阅读(1014)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017