妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 9104|回复: 3

妙味JS班学员刘兴龙作品:WebQQ

[复制链接]
leo 发表于 2016-7-12 20:24:27 | 显示全部楼层 |阅读模式


有时候,完成一件作品,是给自己一个交待。
辛辛苦苦从最基础的JS代码开始学习、到最终课程结束,
花费了几个月时光,必须以最直观的方式,递交一份满意的答卷;

在完成作品以后,才能具备自信满满的状态。
求职过程中,永远拿作品说话、亮明技术功底,才是最有实力的证明方式!


妙味JS班学员 刘兴龙 个人作品:WebQQ

1.png


2.png


3.png



4.png

5.png

6.png

7.png
在线地址:http://2013.miaov.com/student/lxl_webqq/index.html


-项目说明-
开发周期:20天
使用原生javascript进行开发,将开发中用到的js文件进行了归类
其中常用函数调用封装为common.js,运动中用到的函数封装为move.js,天气效果单独封装为weather.js,主要文件为main.js
其中有的功能使用HTML5的拖拽事件,HTML5存储等等
该作品对于交互效果也做了考虑,实现了一些相应的功能
1.桌面图标功能
(1)点击桌面图标可以出现对应的弹出窗口
(2)桌面图标可以自由拖动,拖动到一定位置处可以匀速运动会原位置
(3)桌面图标可以根据可视区的大小进行排列,运动window.onresize事件
(4)桌面图标可以互换位置,当有多个图标发生位置重合时,与重合面积最大的交换位置
(5)左边菜单模拟苹果导航效果,侧边栏上面的图标点击也可以出现对应的弹出窗口
2.弹出窗口和折叠菜单
(1)点击图标出现弹出窗口,弹出窗口可以任意拖拽,但是限定范围(不能向上超出可视区)
(2)弹出窗口可以最大化,最小化,关闭
(3)点击最小化后出现折叠任务菜单,鼠标滑到上面可以继续选择还原或者关闭
3.顶部菜单
(1)换肤功能:模拟百度一下换肤,实现了可以预览,选择皮肤,点击即可切换页面背景,并且用cookie进行存储
(2)注册功能:用户名为个人手机号,验证方式采用正则表达式,用户名只能为有效的大陆手机号,密码为6-12
   且为数字、字母或者它们的组合,还可以选择性别
   如果注册信息错误,会出现红色提示文字输入框页显示红色,存储方式为HTML5 本地存储locaStorage
(3)登陆功能:获取输入的手机号和密码,与之前存储的进行对比,一样则登陆成功,否则提示用户名或密码错误
   如果用户名不存在则提示请注册
(4)登陆成功时:在桌面顶部左边会出先一个用户登陆成功状态的一个展现,头像可以分辨用户群体,可以选择修改密码,注销登陆
(5)修改密码:通过跟存储的数据进行比对如果密码重复则提示密码错误
   如果密码为6-12且符合规则,则提示密码修改成功
(6)天气功能:通过ajax跨域请求天气数据,可以显示当前城市天气指数和未来两天的天气,还可以切换城市
   通过联动菜单选择对应的城市,运用HTML5本地存储,页面刷新不会发生更改
(7)换肤界面展示应用了tween.js中的匀速运动登陆、注册、天气的界面展示应用了tween.js中的减震动画
4.切换桌面
点击焦点数字切花桌面
5.自定义系统右键功能
(1)用document.oncontextmenu事件自定义右键功能
(2)查看:可以查看小图标、中等图标和大图标,默认是中等图标
(3)排列方式:可以设置为横向、纵向、自由排列
(4)模拟window刷新功能
(5)文件上传预览:可以通过点击上传按钮进行上传预览,还可以进行拖拽上传预览
   a:上传的图片大小、文件类型(必须是图片)、最多上传的图片张数
   b:上传完毕后显示上传后的状态、图片的上传地址、图片的尺寸信息,所有图片上传完可以继续上传
(6)新建文件夹:可以根据所在桌面创建文件夹,用HTML5本地存储,模拟真实数据
(7)个性化设置:可以自定义主题,通过cookie存储,有限期为30天
(8)便签功能:便签对话框显示的位置可以跟着右键菜单的位置定位,可以设置便
   通过HTML5存储便签内容,等页面刷新的时候,可以加载内容,还可以右键取消便签对话框
(9)注销:注销掉用户,会停留在当前页面
6.文件夹右键功能
(1)打开:右键点击打开弹出对应的应用窗口
(2)删除文件夹:删除后文件夹带有透明度变化的消失,消失后剩余的文件夹位置会自动重新排列
   等页面在刷新的时候会恢复删除后的文件夹
(3)重命名:右键重命名.
   a:会将当前文件夹的文件名默认选中,可以更改文件名,更改后会对文件名存储,页面再次载入时会显示更改后的文件名
   b:如果后来更改并且删除,再次载入时会显示最后更改的文件名
7.时钟:
(1)通过HTML5canvas绘制时钟,并且根据时间对象获取当前时间,进行具体的绘制,可以在有效的范围内自由拖动
整个webQQ是一边学一边写完成的,其中可能存在某些bug或不合理地方
以后将慢慢改进,网页中使用了HTML5中的拖拽和本地存储,建议使用标准浏览器浏览


或许有人会想:之前妙味JS班学员做过类似作品,这有没有可能是直接拿别人代码来改呢?
其实在技术领域,会就是会,不会就是不会,在懂的人眼里,一问便知。

该项目源码截图:



从这次作品来看,所有JS文件均显示用原生JS开发,并且JS代码中标注大量注释,
对于招聘公司而言,你只需要随意摘出其中几个功能,询问一下该功能的实现过程、遇到什么技术难点、如何解决的,即可判定其技术水准。





现如今的IT培训行业,绝大多数培训机构在学员毕业后,替学员包装简历甚至做假、帮学员准备不属于自己开发的作品、找面试题让学员死记硬背、甚至远程帮助学员做面试题……此等怪象层出不穷,企业招聘人才往往防不胜防,HR们以及技术负责人每天都要浪费大量时间精力,去和这些为学员做假背后的培训机构周旋……时间一久,自然对外宣称不再招聘IT培训机构的学员,这种短视的做法无异于自绝坟墓,其脑残程度无法用言语描述!

就让实实在在的技术来辗压这个做假成疯的时代吧!还原最本质的初衷,以作品说话,以实力获取高薪!





请有意向的公司速度与他联系:

妙味JS班学员:刘兴龙
手机:186-0031-3461
Email:aling_feng@163.com
QQ:1429365245



想招聘 技术功底扎实、为人低调务实型人才 的公司们,妙味只能帮你到这里了!





希望学到真本事、想凭借技术实力堂堂正正获取高薪的同学们,可以考虑报名 妙味JS实体课程


咨询QQ:3023710192、3049266712
想听到客服妹纸们的声音?你得拨这个号:010-57269690

客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

地址:北京海淀区西二旗辉煌国际大厦(西6号楼)319室






回复

使用道具 举报

osmoy 发表于 2016-7-13 13:37:26 | 显示全部楼层
这种短视的做法无异于自绝坟墓,其脑残程度无法用言语描述!   +1
回复 支持 反对

使用道具 举报

qq702339 发表于 2016-8-3 21:05:42 | 显示全部楼层
bug有点多  排版太渣  也没做兼容
回复 支持 反对

使用道具 举报

孤独暗夜 发表于 2016-8-8 16:59:24 | 显示全部楼层
一大堆不兼容^^^^^^
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-3-22 23:06 , Processed in 0.155622 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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