标签：style blog http java color get
世界杯如火如荼的进行，视频网站类似于门户网站，需要快速根据外部环境更新内容。产品经理需要策划活动，并安排实施。这个活动就是在这样背景下产生的，爱奇艺与运营商合作，实现双赢。爱奇艺可以通过运营商向海量用户发送短信的方式，提高用户数，运营商通过爱奇艺视频平台给用户更多种多样的福利，提高用户黏性。
总的来说：运营商有用户，视频网站有内容。用户需要内容，有内容的需要用户，有用户的需要满足用户内容的需求。两者优点突出、需求明显合作水到渠成。另外爱奇艺将运营商作为大客户管理，保证了协同作战的机动性。
书归正传，这个“看世界杯送流量”的项目正是在运营商和爱奇艺双赢的局面下，借着世界杯的东风产生的。活动的形式用户每天看半小时视频会获得虚拟啤酒一罐，每次打开啤酒会有中流量包的机会，如果没有打开也会有个能量积攒的过程，如果能量足够多也可以获得流量包。获取流量包会跳转到手机号输入页面，而我正是负责这个页面的开发。上线界面效果。
项目介绍
（一）．“看世界杯送流量活动手机号验证开发”
本活动页面开发的主要需求：
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窗口中设 置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。
弹出窗实现，构造外层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");//引用淘宝接口，首先对运营商进行判断，然后对省份进行判断
});//提交电话号码，如果正确生成弹窗，否则重新输入，提供错误信息（2）这里涉及到跨域访问的问题，解决方法主要是通过构造script标签的src属性值解决，可行的方法是将get方法的类型设置为jsonp。
（二）．“看世界杯送流量”宣传页
这个页面非常简单，需求仅仅是将页面放到居中位置，引入适配；添加一个下载按钮即可。
.viewport img {
max-width: 100%;
margin-bottom: 30px;
}交互方面遇到了一个小bug：在确定下载按钮宽度时，是根据图片宽度确定的，而图片有个加载时间，这就可能造成第一次加载不成功，而第二次因为有缓存，可以加载成功。改进的代码。
$("img").load(function(){
$("div").text("图像已加载");
});
（三）．发现新功能“我的”宣传页
ios客户端发现_世界杯送流量活动项目总结,布布扣,bubuko.com
标签：style blog http java color get
原文地址：http://blog.csdn.net/yingyiledi/article/details/35549073
