 |
| Chrome正常狀況 |
 |
| ie8 (正常)對比safari (上方排版有跑掉) |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery plugin - 縮小版倒數時鐘 範例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
var timer;
$(document).ready(function(){
counttime('2013-03-28 10:00:00');
});
//新增倒數計時器
function counttime(t)
{
var partyd = mynewdate(t);
var time = diffdate("d",partyd)+"日"+diffdate("h",partyd)+"時"+diffdate("m",partyd)+"分"+diffdate("s",partyd)+"秒";
$('.din_time').countdown({
image: 'images/countdown_digits.png',
startTime: time,
digitWidth:27,
digitHeight:39,
format: 'dd日hh時mm分ss秒'
});
}
//計算時間差的Function
function diffdate(interval,objDate){
var dtThis = new Date();
var d = parseInt((objDate - dtThis) / 86400000);
var h = parseInt((objDate - dtThis - d*86400000) / 3600000);
var m = parseInt((objDate - dtThis - d*86400000 - h*3600000) / 60000);
var s = parseInt((objDate - dtThis - d*86400000 - h*3600000 - m*60000) / 1000 );
if (d<0) d=0;
if (h<0) h=0;
if (m<0) m=0;
if (s<0) s=0;
switch (interval) {
case "s":return paddingLeft(s,2);
case "m":return paddingLeft(m,2);
case "h":return paddingLeft(h,2);
case "d":return paddingLeft(d,2);
}
}
//利用輸入日期格式(YYYY-MM-DD hh-mm-ss)變換成一個date格式
function mynewdate(str) {
str = str.split(' ');
day = str[0].split('-');
time = str[1].split(':');
var date = new Date();
date.setUTCFullYear(day[0], day[1] - 1, day[2]-2);
date.setUTCHours(time[0]-8, time[1], time[2]);
return date;
}
//單位數補零成雙位數
function paddingLeft(num,lenght){
if(num >= 10)
return num;
else
return ("0" +num);
}
</script>
</head>
<body>
2013-03-28 10:00:00 距離現在還有:<div class="din_time" style="padding-top: 0px;font-size: 16px;"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API - 地址查詢地圖 範例</title><script type="text/javascript">
<script type="text/javascript">
//跳出地圖新視窗
function popupMap( addr , name)
{
window.open('googlemap.php?addr='+addr+'&name='+name,'GoogleMap','toolbar=no,location=no,directories=no,status=no,bar=no,scrollbars=no,resizable=yes,copyhistory=no,width=600,height=450,screenX=150,screenY=150,top=150,left=150')
}
</script>
</head>
<body>
<div>
<a href="javascript:popupMap('110台灣 台北市信義區信義路五段7號', 'Taipei 101')">
<img src="http://hotel.network.com.tw/images/GmapTw.png" alt="google map btn" border="0">
</a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var addr = <? echo $_GET["addr"]; ?>;
var name = <? echo $_GET["name"]; ?>;
$(document).ready(function(){
//利用地址換轉成座標
var dat={};
dat.address = addr;
dat.sensor = "false";
$.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json',
type: 'GET',
dataType: 'html',
data: dat,
async: false,
success: function(data){
callback(data);
}
});
});
function callback(data)
{
var o=eval('(' + data + ')');
if(o.status=="OK")
{
var lat = o.results[0].geometry.location.lat;
var lng = o.results[0].geometry.location.lng;
initialize(lat,lng);
}
}
//初始化地圖
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//標註地址
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:name
});
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
YOUR_URL.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook API - 回覆討論貼文串 範例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="可以輸入你需要顯示的標題">
<meta property="og:description" content="可以輸入你需要顯示的簡介">
<meta property="og:image" content="可以輸入你需要顯示的圖片"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var location = window.location.href;
$("#fbcomment").append('<fb:comments href="'+location+'" width="610" num_posts="4"></fb:comments>');
});
</script>
</head>
<body>
<div>你的網站內容</div>
<div id="fbcomment">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/zh_TW/all.js#appId=YOUR_FB_APP&xfbml=1">
</script>
</div>
</body>
</html>