用JavaScript做一个日历和用canvas做一个时钟
用JavaScript做一个日历和用canvas做一个时钟
最终成果：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>日历</title><link rel="stylesheet" href="css/css08.css"><link rel="stylesheet" href="tubiao08/iconfont.css">
</head>
<body><div id="all" class="all"><div class="left" ></div><div class="rili"><div class="riliTop"><span class="iconfont icon-tongyong_zuoyouqiehuan_zuo" id="tongyong_zuoyouqiehuan_zuo"></span><span class="showTime" id="showTime">0000-00</span><span class="iconfont icon-tongyong_rili_xiayige" id="tongyong_rili_xiayige"></span></div><ul class="riliHeader"><li>SUN</li><li>MON</li><li>TUE</li><li>WED</li><li>THU</li><li>FRL</li><li>SAT</li></ul><ul class="riliContent" id="riliContent"></ul></div><div class="right"><div class="picshow"><img src="images/num0.png" id="shiShiPic" alt=""><img src="images/num0.png" id="shiGePic" alt=""><img src="images/dian.png" alt=""><img src="images/num0.png" id="fenShiPic" alt=""><img src="images/num0.png" id="fenGePic" alt=""><img src="images/dian.png" alt=""><img src="images/num0.png" id="shiPic" alt=""><img src="images/num0.png" id="gePic" alt=""></div><div class="content" id="content">0000年00月00日 星期几</div><canvas id="drawing" class="draw"></canvas></div>
</div><script src="js/js08.js"></script>
</body>
</html>
css样式：
/* public CSS*/
*{margin: 0;padding: 0;
}
ul,li,ol{list-style: none;}
img {border: none;}/* public CSS end*/
.all{width: 650px;height: 500px;background-color: #fadcda;float: left;margin-left: 100px;
}
.left{width: 130px;height: 315px;background:url("../images/right.png") no-repeat;float: left;margin-left: 60px;margin-top: 80px;
}
.rili{margin-top: 80px;/*margin-right: 180px;*/float: left;background-color: #f9f7f8;width: 280px;height: 315px;line-height: 320px;/*padding: 20px;*/}
.riliHeader{height: 25px;/*border-bottom:1px #ddd solid;*//*background: pink;*//*opacity: 0.7;*/}.riliContent li{float: left;width: 38px;height: 38px;line-height: 38px;font-size: 14px;color: #9f9e9e;text-align: center;/*border:1px #ddd solid;*//*border-radius: 18px;*/
}
.riliHeader li{float: left;width: 38px;height: 38px;line-height: 38px;text-align: center;font-family: "MS Reference...";font-size: 12px;color:#cbcaca;/*border:1px #ddd solid;*/}
.riliContent{height: 240px;/*background-color: #795da3;*//*opacity: 0.3;*/
}
.riliContent li .kk{color: #F2FAFF;border-radius: 20px;background-color:#fea7af ;
}
.riliTop{height: 30px;line-height: 30px;text-align: center;display: block;font-family: 微软雅黑;color: #fea7af;font-size: 14px;margin-top: 25px;
}
.icon-tongyong_rili_xiayige {cursor: pointer;
}
.icon-tongyong_zuoyouqiehuan_zuo{cursor: pointer;
}
.right{float: left;width: 140px;height: 315px;background-color: white;/*opacity: 0.2;*/border-left: 1px #cdcbcc solid;margin-top: 80px;position: relative;
}
.right .picshow {/*width: 140px;*/height: 70px;margin-left: 15px;line-height: 110px;
}
.content {font-size: 8px;color:#cbcaca;opacity: 0.7;margin-left: 5px;}
.bj{margin-top: 80px;margin-left: 5px;
}.draw{position: absolute;top:130px;right: 12px;
}js部分：
{let riliContent=document.getElementById("riliContent");let showTime=document.getElementById("showTime");let tongyong_zuoyouqiehuan_zuo=document.getElementById("tongyong_zuoyouqiehuan_zuo");let tongyong_rili_xiayige=document.getElementById("tongyong_rili_xiayige");let shiShiPic=document.getElementById("shiShiPic");let shiGePic=document.getElementById("shiGePic");let fenShiPic=document.getElementById("fenShiPic");let fenGePic=document.getElementById("fenGePic");let shiPic=document.getElementById("shiPic");let gePic=document.getElementById("gePic");let content=document.getElementById("content");let drawing=document.getElementById("drawing");console.info(content);console.info(tongyong_rili_xiayige);let yYue=["Jan","Feb","Mar","Apr","May","June","Aug","Sept","Oct","Nov","Dec"];let picArr=["images/num0.png", "images/num1.png","images/num2.png","images/num3.png","images/num4.png","images/num5.png","images/num6.png","images/num7.png","images/num8.png","images/num9.png"];let xq=["日","一","二","三","四","五","六"];let nowDate= new Date();let nownian=nowDate.getFullYear();let nowyue=nowDate.getMonth()+1;let nowdate=nowDate.getDate();let nowmiao=nowDate.getSeconds();let nian =nowDate.getFullYear();let yue =nowDate.getMonth()+1;let date= nowDate.getDate();let miao=nowDate.getSeconds();let xiqi=nowDate.getDay();//获取年月showTime.innerHTML=nian+"年"+ yue +"月";//星期几,空几个function addLi(n,u,m) {let firstDay=new Date( nian,yue-1,1);let k=firstDay.getDay();for(let j=0;j<=k-1;j++){let newsLi= document.createElement("li");let last_day=new Date(nian,yue-1,0);let last=last_day.getDate();last=last-k;newsLi.innerHTML=last+j+1;newsLi.style.color="#ddd";riliContent.appendChild( newsLi);}let lastDay=new Date( nian,yue,0);let num=lastDay.getDate();for(let i=1;i<=num;i++){let newsLi= document.createElement("li");newsLi.innerHTML= i ;if(nian === nownian && yue === nowyue && i === nowdate){// newsLi.className="kk";newsLi.style.background="#fea7af";newsLi.style.color="#F2FAFF";}riliContent.appendChild( newsLi);}for(let n=1;n<=42-num-k;n++){console.info(42-num-k);let newsLi = document.createElement("li");newsLi.innerHTML=n;newsLi.style.color="#ddd";riliContent.appendChild(newsLi);}}addLi(nian,yue,date);//下一个月tongyong_rili_xiayige.addEventListener("click",function () {riliContent.innerHTML="";if( riliContent.innerHTML===""){yue++;showTime.innerHTML=nian+"年"+ yue +"月";addLi(nian,yue,date);if(yue>=12){nian++;yue=0;}}});//上一个月tongyong_zuoyouqiehuan_zuo.addEventListener("click",function () {riliContent.innerHTML="";if( riliContent.innerHTML===""){yue--;showTime.innerHTML=nian+"年"+yue+"月";addLi(nian,yue,date);if(yue<=1){nian--;yue=13;}}});//显示时间let shiWei=function( num ){return Math.floor( num / 10 );};let geWei=function( num ){return num % 10 ;};let shiShi=function(s){return Math.floor( s / 10 );};let shiGe=function(s){return s % 10 ;};let fenShi=function(f){return Math.floor( f / 10 );};let fenGe=function(f){return f % 10 ;};let timeGo = function(){let myDate = new Date();let miao = myDate.getSeconds();let fen= nowDate.getMinutes();let shi=nowDate.getHours();let fen_ge=fenGe(fen);let fen_shi=fenShi(fen);let shi_shi=shiShi(shi);let shi_ge=shiGe(shi);let miao_ge = geWei( miao );let miao_shi = shiWei( miao );fenGePic.src=picArr[ fen_ge];fenShiPic.src=picArr[ fen_shi];shiPic.src = picArr[ miao_shi ];gePic.src = picArr[ miao_ge ];shiGePic.src=picArr[ shi_ge];shiShiPic.src=picArr[ shi_shi];};let myset = setInterval(function(){timeGo();},1000);//年月日 星期content.innerHTML=nian+"年"+yue+"月"+date+"日"+" "+"星期"+xq[xiqi];//时钟if(drawing.getContext){let ctx=drawing.getContext("2d");let W=drawing.width=120;let H=drawing.height=200;let R=W/2;let cw = ctx.lineWidth = 0.1*R;function drawStatics() {ctx.save();ctx.translate(R,R);ctx.beginPath();ctx.lineWidth=0.04*R;ctx.fillStyle="#fea7af";ctx.fill();ctx.arc(0,0,R-cw/2,0,2*Math.PI,false);ctx.strokeStyle="#fea7af";ctx.stroke();ctx.beginPath();ctx.font=0.2*R+'px 宋体';ctx.textAlign="center";ctx.textBaseline="middle";let r1=0.8*R-cw/2;for(let i=12; i>0;i--){let radius=2*Math.PI/12*i+1.5*Math.PI;let x=Math.cos(radius)*r1;let y=Math.sin(radius)*r1;ctx.fillText(i,x,y);}ctx.beginPath();let r2=0.9*R-cw/2;for(let i=0;i<60;i++){let radius=2*Math.PI/60*i+1.5*Math.PI;let x=Math.cos(radius)*r2;let y=Math.sin(radius)*r2;ctx.beginPath();if(i%5===0){ctx.arc(x,y,cw/5,0,2*Math.PI,false);}else {ctx.arc(x,y,cw/8,0,2*Math.PI,false);}ctx.fill();}ctx.restore();}function drawDot() {ctx.save();ctx.translate(R,R);ctx.beginPath();ctx.arc(0,0,cw/3,0,2*Math.PI,false);ctx.fillStyle="#fff";ctx.fill();ctx.restore();}function drawSecond(second) {ctx.save();ctx.translate(R,R);ctx.beginPath();let radius=2*Math.PI/60 *second;ctx.rotate(radius);ctx.lineWidth=1;ctx.moveTo(0,cw*2);ctx.lineTo(0,-0.7*R);ctx.strokeStyle="pink";ctx.stroke();ctx.restore();}function drawMinute(minute,second) {ctx.save();ctx.translate(R,R);ctx.beginPath();let radius=2*Math.PI/60 *minute;let sRadius=2*Math.PI/60/60*second;ctx.rotate(radius+ sRadius);ctx.lineWidth=2;ctx.lineCap='round';ctx.moveTo(0,cw*2);ctx.lineTo(0,-(0.7*R-cw/2));ctx.stroke();ctx.restore();}function drawHour(hour,minute) {ctx.save();ctx.translate(R,R);ctx.beginPath();let radius=2*Math.PI/12*hour;let mRadius=2*Math.PI/12/60*minute;ctx.rotate(radius+ mRadius);ctx.lineWidth=4;ctx.lineCap='round';ctx.moveTo(0,cw*2);ctx.lineTo(0,-(0.7*R-cw*2));ctx.stroke();ctx.restore();}function draw() {ctx.clearRect(0,0,W,H);drawStatics();let now=new Date();drawHour(now.getHours(),now.getMinutes());drawMinute(now.getMinutes(),now.getSeconds());drawSecond(now.getSeconds());drawDot();}draw();setInterval(draw,500);}}