码迷,mamicode.com
首页 > 系统相关 > 详细

Built a Random Quote Machine(一)

时间:2018-02-17 10:25:36      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:分析   事件   手写   check   build   控制   实例   一起   显示   

FCC学习了几天,把以前自学的基础知识又基本复习了一遍,除了JSON部分需要再动手写一写,其他的都没有什么大问题,但是基本的理论还是要加强,目前的状态是:知其然,不知其所以然

对这个实例自己实现了一下,把整个分析、实现的过程及经验进行一下总结。

 

<-- 实例要求 -->

  • 点击按钮就生存一个新的随机引用sentence,同时author随之一起改变,sentence、author的font颜色,icon、button及body的背景色同时发生随机改变,相互之间颜色一致。
  • 点击Twitter图标把显示的引用sentence发到twitte技术分享图片

 

<-- 实现思路 -->

使用jQuery实现。

1. 所有的交互效果都是由按钮的点击事件控制的,点击按钮,通过.css()改变sentence和author的color属性,改变icon,button及body的background-color属性,并用过使用.html()改变sentence和author的文本内容;

2. color的值,sentence和author的文本内容使用JSON进行数据交互,自己写一个SON文件进行调用;

3. 为了产生随机的效果,使用Math.random()方法,具体使用需要根据JSON中数据数量的情况,例如JSON中color的数据数量为n,则需要产生0-n的随机数,方法未:Math.floor(Math.random()*n);

4. 点击后有延迟效果和颜色渐变的动画效果,延迟使用setTimeout()方法实现,颜色渐变的动画效果使用fadeIn()/fadeOut()或.animate()方法,该效果第一次未能实现,具体使用哪种方法最后再进行确定。

 (未完待续!)

Built a Random Quote Machine(一)

标签:分析   事件   手写   check   build   控制   实例   一起   显示   

原文地址:https://www.cnblogs.com/daleizi147/p/8451364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!