Nhưng với xu thế lướt web như hiện nay khi mà các thiết bị di động lên ngôi thì các loại đồng hồ đó ít nhiều không còn phù hợp.
- Với đồng hồ flash tuy đẹp nhưng các thiết bị di động chưa được hỗ trợ flash và không được chấp nhận.
- Với đồng hồ sử dụng file javascript ta phụ thuộc vào host của họ cũng như ảnh hưởng tới tốc độ load của blogspot.
Để khắc phục những vấn đề nêu ở trên ta có thể sử dụng loại đồng hồ và lịch với một đoạn javascript rất đơn giản và gọn nhẹ.
Kiểu 1
Xem thử
DEMO
Để tạo đồng hồ và lịch cho blogspot/website như demo bạn chỉ cần thực hiện vài bước đơn giản như sau:
Bước 1
Bạn vào mấu thêm vào trước thẻ ]]></b:skin> đoạn css sau
#date_wrapper {
color:#008080;
margin-top:0px;
margin-right:20px;
float:right;
font-size:18px;
font-weight:bold;
font-family:arial,Geneva,sans-serif;
}
Bạn có thể thay đổi float:right thành float:left và margin-right:20px thành margin-left:20pxBước 2
Vẫn ở trong mẫu bạn tiến hành thêm đoạn code sau vào vị trí bạn muốn hiển thị đồng hồ và lịch.
Ví dụ đặt ngay sau thẻ <body> thì đồng hồ và lịch sẽ hiện thị tại ngay đầu blog.
<div id='date_wrapper'>
<div id='clock'>
Loading...
</div>
<script type='text/javascript'>
//<![CDATA[
function refrClock(){var e=new Date,t=e.getSeconds(),r=e.getMinutes(),n=e.getHours(),M=e.getDay(),h=e.getDate(),o=e.getMonth(),a=e.getFullYear(),c=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"),g=new Array("1","2","3","4","5","6","7","8","9","10","11","12");10>t&&(t="0"+t),10>r&&(r="0"+r),n>12?(n-=12,AM_PM="PM"):AM_PM="AM",10>n&&(n="0"+n),document.getElementById("clock").innerHTML=c[M]+", "+h+"/"+g[o]+"/"+a+" ☉ "+n+":"+r+":"+t+" "+AM_PM,setTimeout("refrClock()",1e3)}refrClock();
//]]>
</script>
</div>
Kiểu 2
DEMO
Đây là kiểu đồng hồ ngoài cung cấp thông tin về thời gian còn có thêm các lời chào sáng trưa chiều tối chúc ngủ ngon và lời chúc cuối tuần vui vẻ.Cái này tùy bạn biến hóa theo ý thích của bạn.
Cài đặt thì quá đơn giản chỉ là việc thêm một tiện ích ở nơi bạn muốn.
<style>
#clockdtb{background:#fff;padding:0;font-size:20px;margin:0;display:block;max-width:300px}
</style>
<div id="clockdtb" style="text-align:center" >
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("h").innerHTML=t;
}
</script>
<font size="5" color="#660000" id="h"></font>
<br/>
<font size="3" color="#660000">
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></font>
<br/>
<font size="2" color="#330099"><script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);h=n.getHours()
if(h>22)ht=dp="Good night!";else if(h<=4)ht=dp="Good morning!";else if(h>4&&h<=6)ht=dp="Good morning!";else if(h>17&&h<=18)ht=dp="Good night!";else if(h>18&&h<=22)ht=dp="Good night!";else {ht="A successful day!";dp="Wish you happy weekend!"}
if(n.getDay()==6 || n.getDay()==0)document.write(dp);else document.write(ht)
</script>
</font>
</div>
Chúc các bạn thành công!