带音效的时钟，并有天气的功能，运用天气接口、农历、星期几

来源：互联网发布：程序员对笔记本尺寸编辑：程序博客网时间：2024/05/22 10:53

<!DOCTYPE html>

<head>

<style>

canvas{

background:#eee;

}

</style>

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.ontimeupdate=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>

对不起,您的浏览器不支持音乐播放!

</audio>

</body>

</html>

结果:

阅读全文

0 0