妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6803|回复: 0

聚沙成塔,一起围观妙味学员如何做JS课后练习

  [复制链接]
xiayu121212 发表于 2016-4-5 21:15:48 | 显示全部楼层 |阅读模式
注意:阅读本文,请先切换一下心态~想象一下你就是一个0基础的小白~恩,对~就像我这样~

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

画马.jpg

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




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

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

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

拖拽.png

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




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

菜单.png

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



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

时钟日历.png

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



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

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


QQ20160405-2.png

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



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

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

涉及到知识点有:

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

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

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

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



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

1、上传预览

上传预览.png

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



2、ajax


ajax.png

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



3、文件的单选,多选?


checked.png

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




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


QQ20160405-4.png

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



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

一、上传预览
二、右键菜单功能(切换列表和缩略图,刷新,新建文件)
三、碰撞检测功能
四、多级文件(文件的创建删除以及生成)
五、百度搜索提示(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







回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 16:58 , Processed in 0.123255 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表