demo前端网页

js项目练习

2017-01-02  本文已影响7255人  草字头乌君

最近在学习JavaScript,找了一些项目实践,但是原网址索引不够一目了然,因此在简书中写了这篇文章索引,也方便需要练习的朋友们进行学习,可以使用Ctrl+F搜索相关内容

网址地址:http://www.fgm.cc/learn/

第一课

  1. 控制div属性
  2. 网页换肤
  3. 函数接收参数并弹出
  4. 用循环将三个Div变成红色
  5. 鼠标移入/移出改变样式
  6. 记住密码提示框

第二课

  1. 百度输入法
  2. 点击Div,显示其innerHTML
  3. 求出数组中所有数字的和
  4. 弹出层效果
  5. 函数传参,改变Div任意属性的值
  6. 图片列表:鼠标移入/移出改变图片透明度
  7. 简易选项卡
  8. 简易JS年历
  9. 单一按钮显示/隐藏一播放列表收缩展开
  10. 提示框效果
  11. 鼠标移过,修改图片路径
  12. 复选框(checkbox)全选/全不选/返选

第三课

  1. 用typeof查看数据类型
  2. 用parseInt解析数字,并求和
  3. 累加按钮,自加1
  4. 输入两个数字,比较大小
  5. 页面加载后累加,自加1
  6. 判断数字是否为两位数
  7. 网页计算器
  8. 简易网页时钟
  9. 倒计时时钟(100秒)

第四课

  1. setTimeout应用
  2. 自动播放一幻灯片效果
  3. 自动改变方向一幻灯片效果
  4. agruments应用一求出函数参数的总合
  5. css函数一设置/读取对象的属性
  6. 当前输入框高亮显示
  7. 数组练习:各种数组方法的使用
  8. 事件练习:封装兼容性添加、删除事件的函数
  9. 星级评分系统

第五课

  1. 模拟select控件
  2. 点击页面,显示单击的坐标
  3. 用户按下键盘,显示keyCode
  4. 阻止右键菜单(阻止默认事件)
  5. 跟随鼠标移动(大图展示)
  6. 自定义右键菜单
  7. 用键盘控制Div
  8. Div闪烁

第六课

  1. 完美拖拽
  2. 仿腾讯微博效果
  3. 自定义多级右键菜单

第七课

  1. 自动轮播广告(缓冲效果)
  2. 图片切换(Loading效果)
  3. 移动效果(按轨迹移动)

第八课

  1. iPhone手机解锁效果
  2. 自定义滚动条
  3. 拖拽一Clone
  4. 拖拽并可以改变大小

第九课

  1. 仿苹果电脑任务栏菜单
  2. 拼图小游戏
  3. 模拟表单控件

第十课

  1. 为数组添加方法(求和,最大值)
  2. 自动轮播广告(面向对象版)
  3. 运动框架(面向对象版)
  4. 照片墙一多实例演示(面向对象版)
  5. 拖拽库(面向对象版)
  6. 无缝滚动(面向对象版)
  7. 延时加载(面向对象版)
  8. 仿腾讯游戏《英雄杀》官网Flash效果
  9. 百度有啊通栏展示效果
  10. 放烟花效果(面向对象版)
  11. 《穿越火线》官网导航菜单
  12. 《百度风云榜》TAB切换
  13. IBM官网导航条效果
  14. 面试题-动态生成表格

项目实例

  1. 眼镜在线试戴
  2. 日历组件
  3. 淘宝网-迷你登录
  4. 仿Google+ 游戏频道焦点图效果

YUI实例

  1. 淘宝旅行通用日历组件
  2. 酒店价格日历

KISSY实例

  1. KISSY版-酒店价格日历
  2. KISSY版-图片浏览组件
  3. 酒店地图交通与周边
  4. 多SKU酒店价格中心
  5. 多SKU门票价格中心
  6. 新版-多SKU门票价格中心
上一篇下一篇

猜你喜欢

热点阅读