到现在也做了不少的h5，遇到了不少的坑，也对曾经的经验教训总结一下

到现在也做了不少的h5，遇到了不少的坑，也对曾经的经验教训总结一下。

主要做过的项目有：

每个项目都有这样那样的难点，现在都分别总结一下。

1. 智图派-腾讯财经

这个项目的亮点是进入到首页后，就是根据当前的时间，每一位都滚动到对应的数字。我实现的思路是：计算当前时间与设定好的时间节点之间的时间差；

将时间差转换为数组；

根据数组的位数，给每一位都填充上0-9这10个数字；

使用CSS3的transition和transform，获取每个数字的高度和当前位置的数字，计算出滚动的距离。

CSS：.timer .t{

font-size: 3rem;

line-height: 3rem;

border: 2px solid #a2a2a2;

height: 62px;

overflow: hidden;

display: inline-block;

margin-right: 4px;

}

.timer .t div{

-webkit-transition: -webkit-transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms;

-ms-transition: transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms;

transition: transform 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms;

}

.timer .t em{

padding: 7px 12px;

display: block;

font-style: normal;

}

HTML：

JS：(function(){

var left = '';

function set(){

var point = 1451577600, // 节点

now = parseInt( Date.now()/1000 ); // 当前时间

left = now-point;

left = (left+'').split(''); // 将数字转换为数组

var html = '';

for(var i=0, len=left.length; i

html += '

';

}

$('.timer').html( html );

}

set();

$('#start').on('click', function(){

var em_height = $('.timer .t').find('em').eq(1).outerHeight(true);

for(var i=0, t=left.length; i

var y = '-'+em_height*parseInt(left[i])+'px';

$('.timer .t').eq(i).children('div').css({'-webkit-transform': 'translate3d(0, '+ y +', 0)', 'transform': 'translate3d(0, '+ y +', 0)'});

}

})

})();

演示：

2. 腾讯财经年终策划

用户可以直接从链接进来，或者从朋友分享的链接进来。不过从这两个入口进入后，呈现出的页面是不同的。直接进入时，loading完成之后会显示首页；而从朋友的分享结果进入时，会首先展示刚才那个朋友选择的心情，直到用户点击“我要定制心情曲线”按钮才进入到首页。因此需要把这两个链接区分开来。

我设定的方法是 当用户分享链接时，在链接后添加一个参数，当进入该页面时，判断链接里是否有这个自定义的参数；若有这个参数，则表明是从分享的链接进入的，首先显示分享结果页面；否则显示首页。因为要显示上个朋友的心情结果，得需要把这个朋友的心情添加到链接中，然后下次打开时，从这个链接中取出。

每个题目都有四种心情可供选择：赞，喜，哦，怒！为了不在链接中使用汉字，因此使用0, 1, 2, 3分别表示这四种心情，然后用|隔开。如btf=1|1|0|3|0|0|0|2|2|0|0|0|0，第一个1不是心情。

还有标题，结果页面中心情标题根据用户在这12个事件中选择的心情的分部，显示不同的标题。share_title :{

xi : '小主心情高亢,2016一起装逼一起飞', // 7个及其以上大喜的表情

ai : '哀伤侵占小主内心，求新年红包安慰', // 7个及其以下哀伤的表情

rdm : [ // 其他随机结果

'世界那么大，钱包那么小，求安慰',

'小主心情波澜，2016只求河蟹日子',

'过去一年日子不太平，且过且珍惜吧',

'心情乌云你快走开，新年要有新气象',

'别问我心情如何，2016年我想静静',

'2015真是蛋蛋的忧伤，2016滚粗',

]

}

从上面的代码可以看到，两个固定的心情和6个随机的心情。两个固定的表情可以从上面的btf参数计算出，但是随机的心情则需要传递一个参数，指定某一个心情，使当前用户和从分享链接进入的用户看到的心情是一样的。因此我在链接中又添加一个share_title的参数，这个参数的值一共有三种，xi, ai, 0(1, 2, 3...)，根据不同的值展示不同的心情标题。

因此分享后的链接是是这样的：http://finance.qq.com/zt2015/nzcehua1/2015pandian.htm?btf=1|1|0|3|0|0|0|2|2|0|0|0|0&share_title=2

3. NBA全明星推广

这个html5没什么难点，不过也从这个项目才知道，移动端的音频或视频必须通过用户手动触发后才能播放。// 对不支持自动播放的设备使用一次性的 touchstart 事件触发

$(document).one('touchstart', function() {

bgMusic.play();

});

4. 看见淤青有多难

这个项目已经在3月份的时候总结过了，可点击链接查看。

5. 奥运暗黑室

奥运暗黑室是在奥运即将结束时推出的一款项目，旨在考验用户的记忆力。

在这个项目中用到了打字效果，使用的是TheaterJS，不过也没太多复杂的效果，就是用打字效果出现两行字，中间有个删除的功能；当两行字全部显示完毕后，展示出按钮。var theater = new TheaterJS();

theater.describe("Vader", .76, "#vader")

theater

.write("Vader:一大波僵尸")

.write(-2)

.write("挑战记忆的新闻来袭")

.write(200)

.write(function(){

$('.loading p').removeClass('target').eq(1).addClass('target');

})

theater.describe("Say", .76, "#say")

theater

.write("Say:证明自己实力的时刻到了")

.write(200)

.write(function(){

$('.bgimg, .loading .text .btn, .loading .up').addClass('fadeIn animated');

$('#say').removeClass('target');

$('.music').show();

});

TheaterJS链接：

6. 摇一摇

这是为了推广快报做的一个h5活动，在h5里摇签，在快报里解签。

摇一摇：;(function(){

// 摇一摇

var SHAKE_THRESHOLD = 2000, // 灵敏度。 数字越小，灵敏度越高

last_update = 0,

x=y=z=last_x=last_y=last_z=0;

function init(){

last_update=new Date().getTime();

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion',deviceMotionHandler, false);

} else{

// alert('您的手机不支持摇一摇');

}

}

function deviceMotionHandler(eventData) {

var acceleration =eventData.accelerationIncludingGravity;

var curTime = new Date().getTime();

if ( (curTime - last_update)> 100) {

var diffTime = curTime -last_update;

last_update = curTime;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;

if ( speed > SHAKE_THRESHOLD) {

// 摇一摇发生的事件

// ...

}

last_x = x;

last_y = y;

last_z = z;

}

}

init();

})();

总结

以后还会有更多的移动项目等待我们，也还会遇到各种各样的问题。每次遇到问题时，就总结一下，涨一次教训。