learnJavaScript

前言

---

本项目库是用来记录学习HTML/CSS/JavaScript及其他前端相关方面知识时做的一些小练习。

主要集中于miaov文件库
（注：在本库下的练习题中为了便于查看效果，CSS及JavaScript采用的都是内联式，在正式项目中都按标准采用外联式）

浏览说明：各练习题下demo链接直接指向该练习题的代码文件（部分练习题下有思路总结及涉及知识的归纳summary文件）；预览链接直接指向HTML文件网页显示效果，方便查看。

更新说明：持续更新，代码库文件每天更新当日所写代码，该目录文件每周归纳更新一次。

如果发现页面排版/代码BUG/无法预览/demo预览失效等问题，或者对某个练习有疑问想要联系作者 请在勘误及留言表下留言，感谢^_^

练习题说明

---

1. JS热身练习题：
   点击按钮弹出一选择层可对一DIV元素设置不同背景/宽/高样式，同时弹出层伴随有遮罩效果。
   demo 预览
   

2. JS属性操作-图片切换：
   对一元素盒内图片进行前后切换，通过按钮可选择两种切换方式。
   demo 预览
   

3. JS属性操作-模拟手机发送信息：
   点击表情可进行头像切换，模拟两人发送消息进行对话（注：题目的要求是新消息从上往下进入消息列表）
   当时做这个题时是刚入门做的第三个练习题，没有做出来。其实这个题的JS部分并不难，但当时对浮动、定位知识掌握的不是很熟练，一直卡在CSS布局上。后来在学习jQuery时又以这个布置为练习题才做出来的。故demo内的代码为jQuery版，后期会补上原生JS版。
   demo 预览
   

4. for应用-提示层效果：
   （!未解决兼容性问题，暂未上传）

5. for应用：
   

• V字生成：
  点击按钮生成五个元素并以V字型排列，连续点击按钮元素呈现不同形状V字型
  demo 预览
  

• 循环生成100个元素：
  demo 预览
  

6. 模拟好友列表效果：
   模拟好友列表展开收缩效果，同时点击展开的好友栏有样式切换效果。（demo含JS原生及jQuery版本）
   demo 预览
   

7. 带缩略图的图片轮换效果：
   demo 预览
   

8. 修改文本框的值：
   demo 预览
   

9. 视频列表展示：
   （当时太懒，嫌切各个列表的视频缩略图比较麻烦，就统一用一张图了...） demo 预览
   

10. 模拟百度音乐列表全选操作：
    （上传时突然检测出一个小bug，先点击各音乐列表前的选择框后再点击全选列表后列表颜色无法恢复...待修复中）
    demo 预览
    

11. 模拟百度文库评分模块：
    （值得练习及思考）
    demo 预览(
    

12. 定时器-自动轮换选项卡：
    demo 预览
    

13. 定时器-延时消失菜单：
    demo 预览
    

14. 定时器-按钮控制图片上下移动：
    长按上/下按钮，图片会随之上下移动，主要练习onmousedown、onmouseup事件。
    demo 预览
    

15. 定时器-元素坠落：
    点击浏览区域，各元素按顺序降落；再次点击，元素飘回原位置。
    demo 预览
    

16. 定时器-元素抖动：
    demo 预览
    

17. 定时器-点击加分效果：
    (有bug，暂未上传）

18. Date对象-时间扩展板：
    （未完成预期效果，暂未上传）

19. 模拟电商倒计时抢购效果：
    自己设定时间，启动倒计时效果；倒计时结束后会有商品栏运动效果；同时附带有商品列表统计及计算总价效果。
    demo 预览
    

20. 模拟页面查找、替换功能：
    demo 预览
    

21. 板块内容移动动画效果：
    将一板块内容动态移动至另一板块；板块内容可自定义；附带有时间缓冲动画效果；附带有字数统计效果。
    demo 预览
    

22. 图片数组排序：
    对图片列表进行排序，有从小到大、从大到小、随机排序选择项。
    demo 预览
    

23. 表情掉落小游戏：
    demo 预览
    

24. DOM练习1：
    

• getElementsByClassName扩展：
  demo
  
• 模拟留言本及批量删除操作
  demo 预览
  
  

25. DOM练习2：
    demo
    

26. 弹出层提示：
    demo 预览
    

27. Event1练习：
    

• 键盘移动：
  先点击红色小方块，通过键盘上下左右键可操作其移动；解决长按键盘元素会卡顿问题。
  demo 预览
  
• 自定义选择栏练习：
  点击下拉选择栏，选中元素；按住CTRL键可进行多选；有元素文字字体随选中列表的内容进行切换效果。
  demo 预览
  

28. Event2练习:
    

• 模拟滚动条效果：
  demo 预览
  
• 移动回放：
  鼠标拖拽元素移动，点击回放按钮，元素会按原移动路径返回原点。
  demo 预览
  
• 鼠标绘制方块：
  在指定区域点击鼠标左键并拖动，可自由绘制矩形。
  demo 预览
  

29. AJAX练习1：
    点击按钮获取后端发送的数据。（注：该练习需要开启服务器才能预览）
    demo
    

30. AJAX练习2：
    瀑布流布局练习。（注：该练习需要开启服务器才能预览）
    demo
    

31. CSS3练习：
    

• 模拟时钟表盘：
  demo 预览
  
• 模拟旋转导航：
  demo 预览
  

32. HTML5练习1：
    

• 图片文件预览：
  demo 预览
  
• 模拟商品拖拽功能：
  将选中商品拖拽至购物清单中，有自动计算商品价格、数量等功能。
  demo 预览
  

33. canvas练习1：
    

• 旋转小方块：
  demo 预览
  
• 在指定区域内长按鼠标左键可自由绘制线条：
  demo 预览
  
• 模拟图片旋转功能：
  demo 预览
  

34. canvas练习2：
    

• 模拟图片马赛克效果：
  在代码区域可以实现自由调节马赛克强度。（注：由于chrome浏览器下存在图片跨域问题，请在Firefox、IE下查看此预览效果)
  demo 预览
  
• 随机像素获取：
  点击白色画布上的字，随机获取字体像素并显示出来，实现虚化效果（代码区域可自动调节获取的像素比值）
  demo 预览
  

35. 祖玛小游戏：
    （待完善，暂未上传）
    

36. HTML5练习2：
    （待完善，暂未上传）
    

• 本地存储功能：
  
• 行走日记：
  

37. 模拟视频播放器效果：
    模拟来源：Alloyteam团队HTML5视频播放器
    （已实现样式布局，JS交互方面待完善）
    demo 预览
    

38. vQuery库：
    为了学习jQuery设计思想，模拟仿照的一个小型库。
    demo
    

39. jQuery练习1：
    

• 多层级鼠标右键效果：
  demo 预览
  
• 实现DOM元素上下移效果：
  demo 预览
  
• 元素网格移动：
  （值得练习）
  demo 预览
  

40. jQuery练习2：
    

• 放大镜效果：
  demo 预览
  
• 轮播图：
  可实现缩略图、上下按键点击切换；可实现循环切换。
  demo 预览
  
• 模拟淘宝吸顶条效果：
  demo 预览
  
• 手风琴效果：
  （有bug）
  demo 预览
  

41. 正则练习1：
    

• 敏感词过滤：
  （敏感词：傻逼/呵呵）
  demo 预览
  
• 找出出现次数最多的字符及其出现次数：
  demo 预览
  

42. 面向对象练习：
    

• Drag 拖拽对象封装：
  demo 预览
  
• Tab 选项卡对象封装：
  demo 预览
  

43. 面向对象及组件开发练习：
    

• Dialog 弹出层组件：
  demo 预览
  
• Tab 选项卡组件：
  demo 预览
  
• Drag 拖拽组件：
  demo 预览
  
• Darg 拖拽自定义事件：
  自定义事件产生->注意页面标签内容的变化及产生时机。
  demo 预览
  

44. 三角函数练习：
    

• 模拟电路苹果菜单：
  demo 预览
  
• 模拟照片墙功能：
  可实现图片自由拖动切换功能。
  demo [预览]
  

45. 正则表达式练习2：
    

46. 移动端实践练习：
    demo 预览