世界杯如火如荼的进行。视频站点相似于门户站点。须要高速依据外部环境更新内容。

产品经理须要策划活动，并安排实施。这个活动就是在这样背景下产生的，爱奇艺与运营商合作，实现双赢。爱奇艺能够通过运营商向海量用户发送短信的方式。提高用户数，运营商通过爱奇艺视频平台给用户很多其它种多样的福利，提高用户黏性。

  总的来说：运营商实用户，视频站点有内容。用户须要内容。有内容的须要用户。实用户的须要满足用户内容的需求。两者长处突出、需求明显合作水到渠成。另外爱奇艺将运营商作为大客户管理，保证了协同作战的机动性。

    书归正传。这个“看世界杯送流量”的项目正是在运营商和爱奇艺双赢的局面下。借着世界杯的东风产生的。活动的形式用户每天看半小时视频会获得虚拟啤酒一罐，每次打开啤酒会有中流量包的机会。假设没有打开也会有个能量积攒的过程，假设能量足够多也能够获得流量包。获取流量包会跳转到手机号输入页面，而我正是负责这个页面的开发。上线界面效果。

本项目重构方向主要从引入simpleModal插件，对原有遮罩代码进行替换，simpleModal插件能够自己主动化设置遮罩。文档遵循jQuery插件通过设置html类与js參数设置遮罩状态。并设有回调方法。此项目并没有设置回调方法。仅是写好遮罩数据结构与样式部分，并设置默认隐藏。

设置Modal方法就可以自己主动水平垂直居中。降低了大量代码的书写。

重构后代码地址:http://download.csdn.net/detail/yingyiledi/8319317

项目介绍

（一）．“看世界杯送流量活动手机号验证开发”

2.结构（HTML）：

   依据分析内容构造HTML：

• 将上述两部分内容放入一个外层div中。每一个部分内容再加div包裹。加入语义化标签。

3.样式（CSS）:

   此处的样式是这次项目遇到最大的问题。前一个项目没有考虑移动端适配的问题。而这个项目暴露了这个问题。首先解说适配的使用，其次是遮罩层的特效解说。

•  适配初步

    顾名思义。使得设计的内容适应不同设备屏幕尺寸。

<strong><span style="font-family:FangSong_GB2312;font-size:18px;"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"/></span></strong>

   ViewPort <meta>标记用于指定用户能否够缩放Web页面。

如能够。那么最大、最小缩放比例。

使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。

ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

上述为对页面是否可缩放的设置，接下来一个更重要的概念是媒体查询。媒体查询这个链接是对媒体查询比較具体的描写叙述。

总而言之：媒体查询是通过设置在不同媒体条件下，显示不相同式，从而达到不同的渲染效果。

即针对不同设备条件，写了多份css代码，以适应不同的显示需求。由媒体查询概念的使用。催生了响应式布局这门技术，这篇链接文章是对响应式布局核心内容的大体介绍。

    实习单位也有自己的响应式布局css适配文件。这里看一部分代码内容：

@media only screen and (max-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:320px}
}
@media only screen and (max-width: 360px) and (min-width: 320px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:360px}
}

   如上对单位给定的这个适配文件媒体查询的分析能够得出例如以下结论：

（1）此文件给出的媒体查询依据屏幕宽度来查询媒体，并进行不同的样式设置。

（2）这里媒体查询依据不同设备宽度设置字体的大小和但是区域的大小。

同一时候应用此媒体查询应该将包裹全部内容的最外层div设置成viewport类。

（3）设置各个标签宽度时。除非依据不同媒体设置不同宽度，否则不能使用像素宽，而是使用百分比。

即布局有两种方法①.依据不同媒体设置不同宽度 ②.统一用百分比表示宽度。

<div id="viewport" class="viewport"></div>

    上述两图为分别在chrome上模拟ipad和ipnoe上显示的效果，从css栏中能够看出，依据媒体的不同，媒体查询出对应的样式进行了渲染。

• 弹出窗特效

   弹出窗特效的原理：

  (1)弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见。display:none）。

  (2)当用户运行某个动作时,我们将之前设置好的隐藏层显示在全部页面元素的最上层（将使用JS操作实现）。

  (3)在弹出DIV窗体中设 置一个button来运行——当用户点击此button时关闭窗体的功能。

 弹出窗实现，构造外层div，这里外层div的样式设置很重要：

.dialog {position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: none;height:100%;width:100%;background-color: rgba(0, 0, 0, .7);
}

这里dialog类为最外层标签下viewport类下的div。默认隐藏此标签。当脚本触发出现时，通过fixed设置为固定的界面，宽度和高度都为100%即占领全屏幕显示此div。此时用户只能与此div下内容交互。达到了弹出窗的效果。

弹出窗内部布局和样式与普通情况无二。差别在于不同浏览器适配弹出框宽和高以及位置的设定上。

.dialog-inner {position: absolute;top: 50%;left: 50%;width: 492px;height: 458px;background-image: url(popup.png);background-repeat: no-repeat;background-size: contain;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}

4.交互（js/jQuery）：

    依据原型图推断须要实现的用户行为交互。

   加入交互：

• 用户输入手机号提交号码推断是否为举办活动地区的电信手机号。

• 假设是则提交号码到后台。并弹出提示框。

• 否则红字显示请输入正确电信手机号。

技术实现：

（1）此项目是电信在多个省份开展活动。所以会涉及到电话号码匹配的问题：须要匹配两项数据一个是运营商是否正确。另外一个则是是否为所在活动省份。

       这里产品给了一张excel表格列出了电信号码号段。excel之长无法全然匹配，于是找到个一种更方便的方法：网上有很多电话号码归属地验证的开放接口，这里选用的是淘宝的电话号码归属地接口。通过正則表達式将全部的省份都列出来，推断返回数据是否为电信号码同一时候也是开展活动的号码实现要求。

var validate = false;$.get("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",{tel:val},function(data){pattern1 = /电信/;pattern2 = /(北京)|(上海)|(江苏)|(湖南)|(浙江)|(江西)|(福建)|(云南)|(贵州)|(青海)|(黑龙江)|(辽宁)|(湖北)|(甘肃)|(重庆)|(广东)|(海南)|(新疆)|(河南)/;if(pattern1.test(data["catName"])){if(pattern2.test(data["province"])){validate = true;}},"jsonp");//引用淘宝接口，首先对运营商进行推断。然后对省份进行推断});//提交电话号码，假设正确生成弹窗，否则又一次输入，提供错误信息

（2）这里涉及到跨域訪问的问题，解决方法主要是通过构造script标签的src属性值解决，可行的方法是将get方法的类型设置为jsonp。

                        （二）．“看世界杯送流量”宣传页

   这个页面很easy，需求不过将页面放到居中位置，引入适配。加入一个下载button就可以。

.viewport img {max-width: 100%;margin-bottom: 30px;
}

这里用到img适配时的处理方法，即设置max—width;100%就可以依据媒体查询适配。

交互方面遇到了一个小bug：在确定下载button宽度时，是依据图片宽度确定的，而图片有个载入时间，这就可能造成第一次载入不成功，而第二次由于有缓存，能够载入成功。

改进的代码。

 $("img").load(function(){$("div").text("图像已载入");});

即用load函数，当图片载入完，才运行任务。

（三）．发现新功能“我的”宣传页

这两个宣传页不过须要加适配进去。能够套用自己的模板。高速完毕。