一起围观妙味学员如何做JS课后练习
注意:阅读本文,请先切换一下心态~想象一下你就是一个0基础的小白~恩,对~就像我这样~

先扯个题外话:请问如何画一匹马呢?

 

大家学会了吗?是不是很简单啊~




虽然是个笑话,但也说明一个事情,画马也是一步一步来的~有木有!
那咱们的前端呢?肯定的啦~任何项目也是一个一个小功能点堆积起来的。聚沙成塔嘛~

ok~今天我们一起来看看 刘磊 同学的课后练习是如何一步一步堆积的~

这一天的课后练习是拖拽~
好,我们 
刘磊 同学做了一个拖拽~


看到木有?拖拽!居然把“我的音乐”拖到了那边~



然后又一天的课后练习是鼠标事件oncontextmenu,似乎这货可以做一个右键菜单~
好,我们的 
刘磊 同学做了一个右键菜单

 

你看、这是一个鼠标右键菜单!



当然了,有天的课后练习是日历时钟~
好,我们的
 刘磊 同学做了一个日历时钟~

 

你再看、这是一个日历+时钟!一分一秒,不快不慢的走着~敬业啊~



然而,有天 刘磊 同学似乎发现了什么~为什么不把这些课后练习凑在一起,整理成一个炫酷的作品呢?!

好~注意看~Duang~我要变形了!


 


零零散散的小练习竟然也能做出酷酷的作品~为 刘磊 同学赞一个~



我们来看看它都实现了哪些功能点:

一.碰撞检测
二.元素的拖拽
三、运动
四、开始菜单(切换显示,隐藏)
五.右键菜单功能(包含刷新页面,切换背景图片、新建文件)
六.时钟和日历功能

涉及到知识点有:

onmousedown,onmousemove,onmouseup
oncontextmenu事件、地址栏对象(window.location)的修改,元素的创建createElement
日期对象的应用、定时器、canvas绘图(绘制圆形,绘制时钟刻度,利用从日期对象中获取到的值绘制画布)

看上去也没有很多高深的知识点啊?
恩、你说的很对!这些知识点好像都学过~
但是不高深的知识点不代表项目水准就不高啊!

组合、组合、组合!融会贯通,互通有无,天人合一,才有希望达到代码的最高境界!
这就好像食神告诫我们,即使是最平凡的食材,也能做出妈妈的味道!你说是不是!
好啦~这么努力的win7桌面,旁友们自己体验一把~

演示地址:http://2013.miaov.com/student/liulei/win7/index.html



介绍完这么努力的win7,我们再来看看同样很努力的百度云盘~
不用说,依然是N个课后练习~

1、上传预览

 

看吧,又可以上传,又可以预览的~真是666啊



2、ajax


 

调用的百度接口~这个练习大家熟悉不?



3、文件的单选,多选?


 

单选/多选,看着眼熟吧~修饰修饰css样式,也可以同样有格调~



好好好~我又要变形了!
Duang~!



 

眼熟吧~平时用的百度云盘,就这么被“堆”出来啦~



不用说,这个百度云盘~它同样实现了以下功能:

一、上传预览
二、右键菜单功能(切换列表和缩略图,刷新,新建文件)
三、碰撞检测功能
四、多级文件(文件的创建删除以及生成)
五、百度搜索提示(Ajax)
六、文件夹的全选、单选等
七、缩略图和列表的切换

涉及到知识点有:
利用html5提供的对象FileReader()将指的文件写入内存,从而使js可以访问文件系统。
利用jquery中contextmenu事件实现,根据鼠标坐标显示菜单列表。
利用jquery中mousedown、mousemove、mouseup得到改变的坐标实现,项目中是生成一个盒子,与文档发生碰撞,则给文档添加选中样式。
创建了一个数组,把一个json的数据存入数组,这样使得文档的生成、创建,删除都是对数据的操作,再根据数据生成对应内容,便于操作。
通过ajax跨域拿到百度搜索提示数据,并显示在列表中

不多说了,旁友们自己体验下~

演示地址:http://2013.miaov.com/student/liulei/baiduyun/baiduyun.html



说了这么多,怎么才能学会做上面的项目呢?

当然是参加 >>妙味全日制JS课程 了,你只需要学到js课程中级就可以做出以上效果啦~加上html,css入门也就是三个阶段的课程~

妙味最新4月底JS班 招生名额有限,详询妙味客服妹纸:(禁止以咨询课程为由、调戏课程顾问的妹纸们,否则学费上涨250%哦~别怪我事先没提醒你 ^_^ )



如果,如果,如果您因为种种原因没有报名参加我们的 
妙味全日制JS课程 ,没关系~还可以加入我们的 妙味课堂VIP 啊,依然可以轻松驾驭以上案例!
憋说了,点击下面链接立刻变身尊贵的>>妙味课堂VIP
猛戳:http://bbs.miaov.com/forum.php?mod=viewthread&tid=8075

好像这两天有妙味课堂公开课呢?
——恩?哪呢哪呢??来个链接地址啊??!
喏,下面这链接就是了……
>>妙味远程公开课:react 实践分享





课程咨询QQ:3049266712、3023710192
VIP会员咨询:2379848569、3315116152
咨询电话:010-57269690
妙味网友
请登录后留言,请登录注册