再一次,javascript设计模式与开发实践-策略模式

简述

定义一系列的算法,把它们一个个封装起来,并使它们可以相互替换。

在现实中要去一个地方,可以选择坐飞机、火车、骑自行车。
在程序设计中,也有类似的情况,例如压缩文件,可以选择zip算法,也可以选择gzip算法。

任意替换一种方式,目的不变就是策略模式。

使用场景

  • 算法
  • 表单验证
  • 运动动画

案例

阅读全文

CSS3实战 笔记8-动画设计

transform

设置变形函数,可以是一个或多个变形函数列表。

  • matrix() 矩阵变换
  • translate() 移动元素对
  • scale() 缩放元素
  • rotate() 旋转元素
  • skew() 倾斜对象

transform-origin

CSS变形的原点默认是对象的中心点,可以通过此属性重新定义。

transition

动画转换过程,例如渐现、渐弱等。

  • transition-property 定义转换动画的名称,例如 background-color
  • transition-duration 定义转换动画的时长
  • transition-delay 定义动画的延迟时间
  • transition-timing-function 定义动画的效果,例如 ease、linear等

animation

定义动画

  • animation-name 定义动画名称
  • animation-duration 定义动画时长
  • animation-timing-function 定义播放方法,例如 ease、linear等
  • animation-delay 定义动画的延迟时间
  • animation-iteration-count 定义动画播放的次数
  • animation-direction 定义动画播放的方向

实战练习源码

CSS3实战 笔记7-渐变设计

gradient

  • type 定义渐变类型,linear(线性渐变) 或 radial(径向渐变)
  • point 定义渐变的起点和结束点,支持 数值、百分比、关键字等,例如 0,0 left,top。
  • [radius] 当定义径向渐变时,设置渐变的长度,参数为数值。
  • [stop] 定义渐变色和步长,包含三个类型值,开始的颜色使用 from(color value),结束的颜色使用 to(color value),颜色的步长使用 color-stop(value, color value)。

实战练习源码

目前为止找到最好的移动端调试工具-debugGap

一些牢骚

  • 在桌面端调试目前已经很方便了,结构查看、CSS实时修改、网络请求、断点调试、性能检测、控制台…

  • 但在移动端,额.. 仿佛又回到了IE时代,最方便也只能到处 alert 来调试。

  • 当然也可以安装虚拟机、Android、IOS真机远程调试等办法,但我不喜欢,我是个怕麻烦的人。

  • 最后找到这一款应用 - DebugGap,还是基于 node-webkit 的,node.js爱好者表示\(^o^)/~。

阅读全文

CSS3实战 笔记5-完善的和模型和UI设计

border-color

  • CSS3 增加了这个属性,使用它可以为边框设置更多的颜色。
  • 如果只为该属性设置一个颜色值时,表示宽边设置为纯色,如果设置N个值,且边框宽度为N像素,那么可以在该边框上使用N中颜色,每个颜色显示1像素的宽度,如果边框宽度为10个像素,但是只声明了5种颜色,那么最后一种颜色用于剩下的宽度。
  • 可设置四个边框的颜色属性
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color

阅读全文

node.js实现模拟登录,自动签到领流量。

开始本文之前,期待您了解页面与服务器的交互知识,会更容易理解。

需求

  • 某通有个活动,只要每天签到等各种操作就能累积积分,随着等级提升每月可以领到 20M - 300M的流量等。

  • 作为码农的你当然不愿意以正常的姿势去完成这些事情,所以你想要程序代替你完成这些事情。((^__^) 嘻嘻……)

阅读全文