世界杯如火如荼的进行，视频网站类似于门户网站，需要快速根据外部环境更新内容。产品经理需要策划活动，并安排实施。这个活动就是在这样背景下产生的，爱奇艺与运营商合作，实现双赢。爱奇艺可以通过运营商向海量用户发送短信的方式，提高用户数，运营商通过爱奇艺视频平台给用户更多种多样的福利，提高用户黏性。

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

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

项目介绍

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

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>

   上述为对页面是否可缩放的设置，接下来一个更重要的概念是媒体查询，媒体查询这个链接是对媒体查询比较详细的描述。总而言之：媒体查询是通过设置在不同媒体条件下，显示不同样式，从而达到不同的渲染效果。即针对不同设备条件，写了多份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窗口中设 置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

 弹出窗实现，构造外层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-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");//引用淘宝接口，首先对运营商进行判断，然后对省份进行判断

    
  });//提交电话号码，如果正确生成弹窗，否则重新输入，提供错误信息

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

   这个页面非常简单，需求仅仅是将页面放到居中位置，引入适配；添加一个下载按钮即可。

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

交互方面遇到了一个小bug：在确定下载按钮宽度时，是根据图片宽度确定的，而图片有个加载时间，这就可能造成第一次加载不成功，而第二次因为有缓存，可以加载成功。改进的代码。

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

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