html5参加活动页面,XX活动HTML5页面总结

这几天一直在做XX活动，明天发，主要负责手Q平台，微信平台被人抢了，所以。有如下些点分享

1、页面字体大小，

html {font-size:62.5%}

/*未经调整的浏览器都符合: 1em=16px，所以10px=0.625em，设置html为62.5%，那1rem就是10px*/

/*之后页面布局均使用rem来布局，方便统一调整*/

2、音乐播放操作

(function(){

//audio dom

var videoMusic = $('#audio')[0];

//监听回调

var videoLoaded = function(){

//控制按钮

var $controll = $('#J_music-controller');

//设置音量

videoMusic.volume = 0.5;

//开始播放

videoMusic.play();

$controll.show().on('tap', function(){

var $this = $(this);

if($this.hasClass('music-close')){

$this.removeClass('music-close');

videoMusic.play();

}else{

$this.addClass('music-close');

videoMusic.pause();

}

});

};

//监听是否加载完成可以播放

videoMusic.addEventListener('canplay', videoLoaded);

if(videoMusic.readyState==4){

videoLoaded();

}

}());

3、陀螺仪模拟摇一摇

var AcceHelper = (function(){

var lastAcceTime = 0,

lastAcceInfo = false,

firstAcceInfo = false,

lastDistance = 5000,

isStart = false,

stopTimer = 0,

config = {

timeLimit : 100, //两次感应间隔时间为200

speedLimit : 80, //速度限制为80

stopLimit : 400

};

var getDistance = function(a, l){

var powDis = Math.pow(a.x-l.x, 2) + Math.pow(a.y-l.y, 2);

return Math.sqrt(powDis);

};

var doAccelerationIncludingGravity = function(acceleration, oncallback, stopcallback){

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

a = acceleration,

l = lastAcceInfo,

time = curTime-lastAcceTime;

if(time>config.timeLimit && lastAcceInfo){

//debugFunc('on acceleration call['+(a.x+'_'+a.y+'_'+a.z)+']');

lastAcceTime = curTime;

var distance = getDistance(a, l),

speed = distance/time*1000;

if(speed>config.speedLimit){

isStart = true;

if(stopTimer){ //清除结束

clearTimeout(stopTimer);

}

if(!firstAcceInfo){ //设置第一次

firstAcceInfo = {

x : a.x,

y : a.y,

z : a.z

};

}

var aDistance = getDistance(a, firstAcceInfo);

debugFunc('on acceleration call['+(aDistance+'_'+lastDistance+'_'+distance)+']');

if(aDistance[[[[['+num+'