解決手機上字體顯示小的問題:
方法一(推薦):
~~~
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
~~~
方法二:
~~~
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
~~~
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒( Flexible Box 或 flexbox),
1)更好的自適應屏幕大小。
2)更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
倒計時:
index.js
~~~
$(function(){
//從路徑中獲得aid的值
var index = location.href.lastIndexOf("=");
var aid = location.href.substr(index+1);
//獲得活動的信息
$.ajax({
url:"activity/"+aid,
type:"get",
dataType:"json",
success:function(data)
{
console.log(data);
//更新活動圖片
$("#banner").attr("src","img/"+data.imgurl);
//更新活動數據
$("#totalpeople").html(data.totalpeople);
$("#totaltickets").html(data.totaltickets);
$("#totalaccess").html(data.totalaccess);
//擴大作用域為全局變量
endtime = data.endtime;
//更新倒計時
var now = new Date();
if(now<data.starttime)
{
//1. 如果當前時間小于開始時間-活動未開始
$("#status").html("活動未開始");
}
else if(now>=data.endtime)
{
//2. 如果當前時間大于結束時間-活動已結束
$("#status").html("活動已結束");
}
else
{
//3. 活動進行時
$("#status").html("活動倒計時");
taskid = setInterval(countdown,1000);
}
//倒計時
function countdown()
{
var now = new Date();
if(now>=endtime)
{
//終止循環任務
clearInterval(taskid);
}
else
{
//1. 獲得結束時間-當前時間(毫秒數)
var diff = endtime - now;
//2. 根據毫秒數算天,小時,分鐘,秒
var seconds = padLeft(parseInt(diff/1000%60));
var minutes = padLeft(parseInt(diff/1000/60%60));
var hours = padLeft(parseInt(diff/1000/60/60%24));
var days = parseInt(diff/1000/60/60/24);
$("#countdown").html(days+'天 '+hours+'小時 '+minutes+'分鐘 '+seconds+'秒');
}
}
function padLeft(num)
{
if(num<10)
{
return "0"+num;
}
return num;
}
}
});
~~~