<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background:#eee;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext("2d");
var originx=250; //圆心X坐标
var originy=250; //圆心Y坐标
var radius=100; //圆心的半径
var day=document.getElementById('day');
var nongli=document.getElementById('nongli');
// var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());//获取今天是星期几
// day.innerHTML = str;
/*获取当前农历*/
// jQuery.support.cors = true;
function showCal(){
var D=new Date();
var yy=D.getFullYear();
var mm=D.getMonth()+1;
var dd=D.getDate();
var ww=D.getDay();
var ss=parseInt(D.getTime() / 1000);
if (yy<100) yy="19"+yy;
return GetLunarDay(yy,mm,dd);
}
//定义全局变量
var CalendarData=new Array(100);
var madd=new Array(12);
var tgString="甲乙丙丁戊己庚辛壬癸";
var dzString="子丑寅卯辰巳午未申酉戌亥";
var numString="一二三四五六七八九十";
var monString="正二三四五六七八九十冬腊";
var weekString="日一二三四五六";
var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪";
var cYear,cMonth,cDay,TheDate;
CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x71695,0x6CA,0xB55,0x50AB5,0x4DA,0xA5B,0x30A57,0x52B,0x8152A,0xE95,0x6AA,0x615AA,0xAB5,0x4B6,0x414AE,0xA57,0x526,0x31D26,0xD95,0x70B55,0x56A,0x96D,0x5095D,0x4AD,0xA4D,0x41A4D,0xD25,0x81AA5,0xB54,0xB6A,0x612DA,0x95B,0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96,0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95,0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95);
madd[0]=0;
madd[1]=31;
madd[2]=59;
madd[3]=90;
madd[4]=120;
madd[5]=151;
madd[6]=181;
madd[7]=212;
madd[8]=243;
madd[9]=273;
madd[10]=304;
madd[11]=334;
function GetBit(m,n){
return (m>>n)&1;
}
//农历转换
function e2c(){
TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);
var total,m,n,k;
var isEnd=false;
var tmp=TheDate.getYear();
if(tmp<1900){
tmp+=1900;
}
total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38;
if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) {
total++;
}
for(m=0;;m++){
k=(CalendarData[m]<0xfff)?11:12;
for(n=k;n>=0;n--){
if(total<=29+GetBit(CalendarData[m],n)){
isEnd=true; break;
}
total=total-29-GetBit(CalendarData[m],n);
}
if(isEnd) break;
}
cYear=1921 + m;
cMonth=k-n+1;
cDay=total;
if(k==12){
if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){
cMonth=1-cMonth;
}
if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){
cMonth--;
}
}
}
function GetcDateString(){
var tmp="";
if(cMonth<1){
tmp+="(闰)";
tmp+=monString.charAt(-cMonth-1);
}else{
tmp+=monString.charAt(cMonth-1);
}
tmp+="月";
tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十"));
if (cDay%10!=0||cDay==10){
tmp+=numString.charAt((cDay-1)%10);
}
return tmp;
}
function GetLunarDay(solarYear,solarMonth,solarDay){
if(solarYear<1921 || solarYear>2020){
return "";
}else{
solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;
e2c(solarYear,solarMonth,solarDay);
return GetcDateString();
}
}
var calendar = showCal();
// nongli.innerHTML = "今天是农历:" + calendar;
var audio=document.getElementById('audio');
//ontimeupdate当用户开始播放视频,或者重新定位视频播放位置时,会执行显示当前播放位置的函数,该事件通常与 Video 对象的 currentTime 属性一起使用。
audio.οntimeupdate=function () {
if(audio.currentTime>=0.1){
audio.pause();
}
}
$(function(){
//代理的代码,用的是雅虎的代理
$.getJSON("http://query.yahooapis.com/v1/public/yql",{q:"select * from json where url=\"http://api.tocus.com.cn/weather2.php?send=202.106.0.20\"",format: "json",cityid:"101010300"},function(data){
$('#images').html("目前城市:"+data.query.results.json.city+";天气:"+data.query.results.json.weather+";最高温:"+data.query.results.json.temp1+";最低温:"+data.query.results.json.temp2);
})
});
setInterval(function(){
cobj.clearRect(0,0,400,400); //每次调用都要清理一遍画布
audio.currentTime=0;
audio.play();//秒针走一下,滴答一声
cobj.fillText("今天是农历:" + calendar+";今天是星期" + "日一二三四五六".charAt(new Date().getDay()),100,100);
//阴影
cobj.shadowColor = "#888"; //设置或返回用于阴影的颜色
cobj.shadowOffsetX = 1; //设置或返回形状与阴影的水平距离,或称X轴偏移量
cobj.shadowOffsetY = 1; //设置或返回形状与阴影的水平距离,或称Y轴偏移量
cobj.shadowBlur = 3; //设置或返回阴影的模糊系数
//渐变色
var colorObj=cobj.createRadialGradient(originx,originy,1,originx,originy,100);//创建放射状/圆形渐变对象,渐变可用于填充矩形、圆形、线条、文本等等。
colorObj.addColorStop(0,"#efefef"); //规定 gradient 对象中的颜色和位置。
colorObj.addColorStop(1,"#cecece"); //规定 gradient 对象中的颜色和位置。
cobj.fillStyle=colorObj; //设置或返回用于填充绘画的颜色、渐变或模式。
cobj.lineWidth=8; //设置或返回当前线条的宽度,以像素计。
cobj.beginPath();
cobj.strokeStyle=colorObj; //设置或返回用于笔触的颜色、渐变或模式。
cobj.arc(originx,originy,radius,0,2*Math.PI);
cobj.stroke();
cobj.fill(); //填充当前的图像(路径)。默认颜色是黑色。
drawMark();
var date=new Date();
var ha=date.getHours()*30+(date.getMinutes()*6/12)-90;
var ma=date.getMinutes()*6+(date.getSeconds()*6/60)-90;
var sa=date.getSeconds()*6-90;
//时针
drawPointer(45,ha,4,'black');
//分针
drawPointer(60,ma,3,'teal');
//秒针
drawPointer(80,sa,2,'red');
//表中小圆
cobj.shadowColor="#888";
cobj.shadowOffsetX=1;
cobj.shadowOffsetY=1;
cobj.shadowBlur=3;
cobj.fillStyle="#aaa";
cobj.beginPath();
cobj.arc(originx,originy,4,0,2*Math.PI);
cobj.fill();
//去掉阴影
cobj.shadowColor="#888";
cobj.shadowOffsetX=0;
cobj.shadowOffsetY=0;
cobj.shadowBlur=0;
}, 1000);
//画表针
function drawPointer (radius,angle,width,color) {
cobj.lineWidth=width;
cobj.strokeStyle=color;
cobj.lineCap = 'round'; //指定线条两端的线帽如何绘制,设置成圆角
cobj.beginPath();
cobj.moveTo(originx,originy);
cobj.lineTo(originx+radius*Math.cos(angle*Math.PI/180),originy+radius*Math.sin(angle*Math.PI/180));
cobj.stroke();
}
//画时钟刻度
function drawMark(){
for(var i=0;i<60;i++){
var angle = i*6*Math.PI/180;
var radius1=radius-4;
var lineWidth = 2;
cobj.beginPath();
if((i*6)%30 == 0){
radius1=radius-8;
lineWidth = 4;
}
cobj.lineWidth = lineWidth;
cobj.moveTo(originx+radius*Math.cos(angle), originy+radius*Math.sin(angle));
cobj.lineTo(originx+radius1*Math.cos(angle), originy+radius1*Math.sin(angle));
cobj.stroke();
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
对不起,您的浏览器版本过低,请升级到最新的版本!
</canvas>
<p id="day"></p>
<p id="nongli"></p>
<audio src="1.wav" id="audio">
对不起,您的浏览器不支持音乐播放!
</audio>
<div id="images"></div>
</body>
</html>
结果: