UI前端设计
袁安翠

1
2
3
4
5
6
7
8

JS动态效果实现

发布时间:2019-07-15 09:18   发布人:袁安翠   浏览次数:372

 任务3:JS动态效果的实现 】

        

    互联网发展至今,相信很多读者对“网上购物”并不陌生,本项目将带领读者完成一个模拟网上商城的移动端项目,将其命名为“京东掌上商城”。

     经过前面几个项目的学习,小明对界面设计有了一定的了解和实际动手操作能力,本任务重点讲解APP界面中各部分的代码实现,要求学生掌握简单的JavaScript实现轮播图与倒计时。


【 一分钟导学视频 】



能力目标

知识目标

素质目标

1、了解JavaScript简单的语法结构。

2、能够使用JavaScript实现轮播图。

3、能够使用JavaScript实现倒计时。

1、了解JavaScript简单的语法结构。

2、能够使用JavaScript实现轮播图。

3、能够使用JavaScript实现倒计时。


1. 养成积极主动学习意识;

2. 养成勤于动手的习惯;

3. 培养团队合作能力。




学习任务

重点、难点

突破方法

1. 轮播图的实现。

2. 倒计时的实现




1. JavaScript简单的语法结构

2. JavaScript实现无缝轮播

3. 定时器实现倒计时

4. 教学难点: 

JavaScript语法、定时器。

采用翻转课堂、项目导入的教学模式,采用分组讨论、案例教学、演示动画等教学方法,运用在线教学平台。



【 视频讲解】

课前知识储备视频

案例讲解视频

1、轮播图效果的实现1

2、轮播图效果的实现2

3、轮播图效果的实现3

4、轮播图效果的实现4

1、倒计时效果实现1

2、倒计时效果实现2


【 资料下载 】

单元设计

word.jpgJS动态效果的实现

课程教案

word.jpgJS动态效果的实现

演示文稿

ppt.jpgJS动态效果的实现

任务工单

word.jpgJS动态效果的实现

素材下载

1、通用样式

base.zip

2、图片素材

images.zip

课外拓展项目

京东移动站分类页

6-1移动京东站分类页.zip

试题解答

练习