随笔分类 - HTML5/CSS3
摘要：本节课的内容是介绍web storage，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他更好，存储的数据可以更大。有两种类型的web storage：local storage和session storage，他们使用相同的实现机制，只是可见性和生命周期不同。 1.使用local storage 我们使用localStorage对象来访问local storage，他返回Storage对象，Storage用来存储键值对的数据，他有下面一些属性和方法：clear()：清楚存储的键值对数据；getItem(<key>)：通过key获取value值；key(&l
阅读全文
摘要：今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法：getCurrentPosition(callback,errorCallback,options)：获取当前位置；watchPosition(callback,error,options)：开始监控当前位置；clearWatch(id)：停止监控当前位置。 note：下面例子使用的浏览器是chrome，使用其他浏览器我不能保证运行结果和例子显示的结果一致。 1.获取当前位置 我们将使用getCurrentPosition方...
阅读全文
摘要：本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。 1.创建拖拽对象 我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。 系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持div对象。所以，如果需要拖拽一个元素，最好还是把dragga...
阅读全文
摘要：今天的内容是关于如何操作document对象。 1.操作Document Metadata 首先我们来看看相关的属性：characterSet：获取当前document的编码方式，该属性为只读；charset：获取或者设置当前document的编码方式；compatMode：获取当前document的兼容模式；cookie：获取或者设置当前document的cookie对象；defaultCharset：获取浏览器默认的编码方式；defaultView：获取当前当前document的window对象；dir：获取或者设置当前document的文本对齐方式；domain：获取或者设置当前...
阅读全文
摘要：今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。guesses：用户猜字母的次数；message：帮助玩家如何玩游戏的说明；letters：保存26个英文字母的数组；today：当前时间；letterToGuess：系统选中的字母，也就是你需要猜中的字母；higherOrLower：提示用户当前输入的字母比答案大还是小；l...
阅读全文
摘要：今天开始一个全新的关于html5系列课程，是我读《The Definitive Guide to HTML5》的学习笔记。我会把自己觉得里面不错的章节，或者有意义的内容进行整理，以供大家学习。 一个元素可以定义自己的属性，比如a标签定义href属性，这种叫局部属性（local attribute）。相对应的我们可以通过全局属性（global attribute）为所有元素设置共有的行为，当然你也可以为单独元素设置全局属性，只是这样做没有太大的意义。下面我将逐一介绍这些全局属性。 下面的例子在chrome浏览器中运行正常，有些例子firefox不能运行，其他浏览器我没有测试，所以建议大家...
阅读全文
摘要：从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。 大家都...
阅读全文
