js项目练习

作者: 草字头乌君 | 来源:发表于2017-01-02 23:51 被阅读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门票价格中心

相关文章

  • js项目练习

    最近在学习JavaScript,找了一些项目实践,但是原网址索引不够一目了然,因此在简书中写了这篇文章索引,也方便...

  • 【JS项目练习】网页换肤

    参考:http://www.fgm.cc/learn/image.png 部分CSS 知识点:document.b...

  • JS作用域的练习

    Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...

  • 20180820_以太坊钱包

    简单的钱包练习项目 基于web3js+React.js的以太坊钱包,基本功能齐全,简单易懂有注释,适合初学者学习....

  • js循环练习

    在项目中经常要用到 js 循环数组的操作,要多练习: let arr = [{name: 'Maly'},'bbb...

  • 【JS项目练习】控制Div属性

    参考:http://www.fgm.cc/learn/image.png 【知识点】 elem.style[att...

  • JS + Git 测试小练习

    作业链接 js 基础练习js 扩展练习(section-1 & section-2) 提交记录 练习收获 这次作...

  • JS操作属性、函数

    JS操作style属性 JS操作class属性 函数 匿名函数 函数传参 作业 if练习 switch练习

  • JS原生项目

    JS原生项目 知识点-思维导图js原生项目.png JS作用 实际项目里js的应用点1.获取数据渲染页面2.页面上...

  • 创建 create-react-app

    创建项目 js 项目文件目录

网友评论

  • 不忘初心CKL:感谢楼主整理!正好要用上
  • 0fc1d0327055:非常感谢整理!不过我做到“复选框(checkbox)全选/全不选/返选”这个时,遇到了checkbox的状态在点击事件之后才改变的问题,但是看源代码并没有对其进行处理就通过了??
    草字头乌君:??能描述的详细点么,感觉没看懂你的问题
  • _嘿嘿君_:真的很棒,赞!
  • NightWalke_6306:网址不在了,可不可以发给我啊,拜托了,我现在很需要这些
    草字头乌君:@NightWalke_6306 在的呀,网址都在的
  • NightWalke_6306:怎么现在打不开了,好伤心
  • 小乌龟变王八:能附上github地址吗?想要参考参考源代码
    草字头乌君:谷歌浏览器右键查看源码
  • 87a9a30c7b5b:能加你qq吗
  • d4144b8b9505:怎么查看源代码
    d4144b8b9505:@草字头乌君 谢谢
    GQM_Dong:挺有用的,赞一个
    草字头乌君:@Z问心 打开谷歌浏览器,右键查看源代码,需要用到的资源就右键检查,找到sources,里面有个img文件夹的是图片资源

本文标题:js项目练习

本文链接:https://www.haomeiwen.com/subject/thdgvttx.html