08 2011 档案
摘要：这节课主要给大家展示两个实例，当然，都是灰常简单的。 首先是第一个效果，颜色选择器，这个效果如下 我想大家，很多人都做过其他版本的这个东东吧，对了，这次就是要在HTML5里面简单的实现一下 首先要做的就是准备工作了 <canvas id="text" width="100" height="100"></canvas> <p>Red： <input type="range" id="red" min="0" max="255
阅读全文
摘要：这节课给大家补充一下，一些 前些课程没有接触的知识。 在XHTML中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把他们书写在页面上任何地方，然后给元素制定一个form属性，属性值为该表单单位的id，这样就可以声明该元素从属于指定表单了。 这个我想对于我们来说，应该是个很新奇的玩意吧 <!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title>form属性</title> </head> <body> &l
阅读全文
摘要：新的课程又开始，哈哈，最近的文章更新比较快，希望大家跟上俺的步伐啊，呵呵，但是每当看到阅读量，哎，还真不多，可是俺还要坚持写下去，不知道，大家是不是都没有在研究HTML5呢？ 这节课程，讲的是 From 表单 新增加的几个新的元素，他和前面的两节课程 同属于一个范围，只不过长的比较特殊。所以就提炼出来了。 旁白：俺不是前端工程师啊，学习HTML5完全是因为，哈哈，这个东西太酷了。俺是正宗滴NET程序员 好了第一个出现的新元素是 datalist 哈哈，这个好解释了，前面我们已经使用过了。 还是用一个例子说明吧 <input type="text" name="
阅读全文
摘要：我们继续讲解 这些新增加的 Input 吧。 1>tel 这个就简单多了 <input type="tel" value="1" list="list"/> <datalist id="list"> <option value="860866679" label="QQ号"></option> <option value="11222333" label="NO"><
阅读全文
摘要：好了，我们这节课讲解的可能有些难以测试，因为目前很多浏览器都不支持，这些新增加的标签，我也只能，尽可能的去找支持的浏览器给大家测试展示效果。 HTML5中新增加了很多 Input 的种类。 1.<input type="search"> 查询文本框 2.<input type="number"> 数字文本框 3.<input type="range"> 滑动条 4.<input type="color"> 颜色文本框 5.<input type="te
阅读全文
摘要：好了，今天有事崭新的一天啊，经过前面几个课程的学习，我想大伙应该差不多已经可以写一些HTML5的应用了，Canvas 的用途太多了，我以后和大家慢慢的谈论，呵呵 弄不好，开个专题，也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。 大家都应该知道 Cookies 这个东东哦，但是太郁闷了，他只有 4K ？ 真的啊，呵呵，要是工资底薪还可以。。哈哈 这节课，俺说的这个和COOKIES 差不多。好了，废话不多说，我们讲课。 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage -...
阅读全文
摘要：这篇文章写了又一年多的时间了，哈哈，今天更新一次此处修正的下面教程的【第五步】Babel Language Pack Update Site for Helios http://download.eclipse.org/technology/babel/update-site/R0.10.0/helios 哎，昨天想找一个 好一点的 HTML5的编辑器，结果 在网上找了 一个 Aptana Studio 3 据说很好用，可是下载了一个，发现是英文版的，郁闷 偶滴英文知识一般。 所以，就想找个 中文版的，哎，找了半天也找不到。网上那个唯一的办法 还过期了，更加郁闷~~~~~ 无奈，还是自己...
阅读全文
摘要：初看到题目大家怎么个反应啊，哇塞，这么多啊，可是看完这节课程之后，你会发现这些功能不过如此。 1》移动 translate(x, y) 简单的说明一下 ，X 左右偏移量 Y 上下偏移量 说白了，就是说，假如原先的坐标在 （0,0） 那么 使用 translate(100,100) 之后，坐标就到 (100,100)这个点了 。 然后，我们首先呢，我先写个 “王” 哈哈，俺的姓。 效果图 哈哈。 大家可以看到，这是的坐标是以（0,0）为原点的。下面我们就想办法，将他更改 function draw() { var c = document....
阅读全文
摘要：阴影效果 我们首先看一下，如何实现一个阴影效果，呵呵，看效果吧 好了 ，先给大家展示一下代码，在说明一下。 <! doctype html><html><head> <script type="text/javascript"> function draw() { var c = document.getElementById("mycanvas"); var cxt = c.getContext("2d"); cxt.shadowOffsetX = 5; cxt.shadow...
阅读全文
摘要：大家好，这节课咱们继续讲解 canvas 这个标签的一些常见的使用，呵呵，这个标签还是真的挺有用途的。 这节课程首先说明的是 如何才 canvas 中插入图像。 canvas 插入图像的步骤：呵呵，又来了。 1.首先当然准备一张图片了。 2.用 drawImage 方法将图像插入到 canvas 中。 drawImage 方法 有三种形态的参数可以选择 第一种： 我们先用最简单的方法写一个例子 drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标 下面我们写一个例...
阅读全文
摘要：哈哈，开始吧，这节课第一个内容是 路径。路径，顾名思义，就是俺拿着画笔，划线呗。 画图的几个步骤。 第一步：找个起点开始画图。----beginPath; 第二步 : 划线，画出自己想要的图像 。 第三步：完成图形，关闭路径。 当然也可以什么都不做，就是画一个点或者一条线 ----- closePath 第四步：填颜色。 哈哈，对不对啊，俺上小学，美术老师就是这么教的。 好了，先随便画一个图形吧。---画一条线，(*^__^*) 嘻嘻…… <script type="text/javascript"> function draw() { ...
阅读全文
摘要：继续更新我们的教程，哈哈，个人觉得 ，这个HTML5 的官方 LOGO 怎么看，怎么像变形金刚。 神马关系~~~~~~~~~~~ <Canvas> 是HTML5中新出现的一个元素。就是可以通过 JS绘制图形。 目前浏览器对 Canvas 的支持情况如下 IE FF Chrome Safari Opera IPhone Android 版本7.0以上 版本3.0以上 版本3.0以上 版本3.0以上 ...
阅读全文
摘要：呵呵，大家别见怪啊，这篇文章可不是和这两个标签 说BYE-BYE 而是，进一步的 运用这两个标签。 好了，我们这节课一开始，第一个例子，用JS控制 这两个标签，哦，对了，我之讲解一个了，这两个哥们的功能太像了，其他的大伙自己去理解吧。 <! DOCTYPE HTML><html><head> <script type="text/javascript"> function Show() { var video = document.createElement('video'); video.src = '
阅读全文
摘要：哈哈，最进打算写一些关于HTML5的文章，写的不好，请见谅，开始吧。 我想来看 我教程的 童鞋 应该对 HTML5有一定的了解了吧，所以我就不罗嗦的讲，HTML5的“昨天”，“今天”，“明天”了 呵呵，首先，我们用任意的 文本编辑器，新建一个网页 我用的是 NotePad++ 你要是懒得找呢，用记事本也没有关系的。哦~~~ 目前浏览器对 HTML5的支持情况也不相同。建议大家用 Chrome、Firefox 微软的 IE9 支持不太好，所以大家还是等一段时间在测试。 HTML5 支持视频格式 video 元素 video 目前支持的格式有 ogg = 带有 ...
阅读全文
摘要：哎，这节课程本来想继续完善AJAX那个无刷新上传头像的，可以后来测试了半天，觉得上传图片这个，效果可能不太好，所以今天得这个节课程，先实现AJAX修改资料，后面的课程中 将分开实现AJAX上传大文件课程，然后，在哪里重点实现一下，这个进度显示的功能。 好了，我们继续我们的修改用户资料，修改用户资料，首先第一个需要我们做的就是，先显示出所有的用户信息。 最新的网站结构，下面用箭头标注的就是今天新增加了几个文件。 ShowStudent.htm增加如下代码。 <link href="Style/BaseStyle.css" rel="stylesheet&quo
阅读全文
摘要：哈哈，继续了，这节课程不多说了，大家常常说到得无刷新上传。 上节课我们做的那个 简单的注册，真的是及其简单的，还有很多功能我没有调整，但是请大家记住 我一定会慢慢的去完善 它的功能的，只不过暂时没有 他们和 AJAX 联系不太大，我就没有实现。 好了，我们开始我们的无刷新上传吧，顺便生成一个微缩图片，哈哈。 准备：一张美女头像图片 然后，一双手。哈哈。 首先，记得创建一个 Upload文件夹啊。 最新的项目结构 好了，首先我们改造我们的 那个上传的 <input> <tr><td>头像：</td><td> <form id=&q
阅读全文
摘要：我们这节课程讨论一下AJAX实现注册，当然，这个全当练习了，后面，下节课程我们在讲AJAX的无刷新上传文件。 我们首先打开我们的 数据库，我用的 08R2 的，当然，你可以用自己的数据库版本 ，或者ACCESS的，这个俺就不管了。 首先是UserTable 上面就是简单的结构了，下面我们搭建一个简单的HTML页面 这里注意大家不要用<form>那种方式传值了，我们做的是AJAX的那么，我们需要的结构是这种情况 Register.htm ----> Register.ashx -----> 数据库中 好了，贮备工作做好了，下面我们就开始我们的程序，这里，我需要首先...
阅读全文
摘要：上节课程我们实现了 AJAX的一个简单的登陆，那么我们下面继续去完善这个登陆的界面，我们需要做一些什么的改造呢？好了,我先说一下自己的想法啊，大家可以在评论中去提要求， 我会尽量给大家完善好了。 首先，少不了的就是 “记住密码功能” 我们下面实现一下 ....... 记住密码，我想应该就是AJAX操作COOKIES了。 先看一下效果图 好了，为了实现这个效果，我们继续我们的项目，其实我发现，这个实现 “记住密码”功能大概和AJAX联系不大，但是为了我们项目最后的完整性，我就添加上了。 首先先写一个 JS操作 cookie的 函数 function setCookies(username, p.
阅读全文
摘要：学习了前面的两节课程之后，我们应该对AJAX有了一个比较简单的印象了。学习技术就是为了应用，下面我们继续，以后的课程我们可能会慢慢的做一些小实例了。这些例子不会太大，但是我预期就是给大家完成一个完全采用AJAX与服务器交互的例子，希望大家跟上学习。当然我说了，我是基于ASP.NET的原生态AJAX，所以后面的实例中我难免用.NET技术与C#开发语言。请大家谅解，所以，希望对.NET开发有一定基础的童鞋们不要错过啊。这节课，终于在废话连篇中开始了。好了，我们最常见得应用是什么呢，哈哈，登陆。你想想，假如一个登陆需要去服务器端实现，那么可能会出现一个问题，就是，我单击登陆按钮之后，郁闷~~~网速.
阅读全文
摘要：上节课说到了一个简单的例子，并且简单的分析了一下 如何创建一个XMLHttpRequest对象。 这节课，我们在详细的说明一下XMLHttpRequest对象 大家首先看一下上节课遇到的 xmlHttp.send(); 方法。 这个 send(string) 是可以带一个参数的 ，但是 ，必须 “POST”的模式下。我上面的截图中，应该写成 xmlHttp.send(null); 大家可以试一下，结果正确吗？ 那么大家可能有一个问题？POST和GET都在什么情况下使用呢？ 首先，我们知道 提交Form表单 有这两种方式，呵呵，那么我们就可以用提交表单的方式去理解 ...
阅读全文
浙公网安备 33010602011771号