js实现的日历时钟共享案例
Html：文件
*边距：0；填充：0；}
# calendarwithtime {
保证金：0；
}
Js：
无功calendarwithtime =函数（）{（）
V = navigator.useragent.tolowercase（。指标）（安卓）！= 1 | | navigator.useragent.tolowercase（。指标）（iPhone）！= 1 | | navigator.useragent.tolowercase（。指标）（iPad）！= 1；
浏览器/可见区域
appwidth =（window.innerwidth document.documentelement.clientwidth document.body.clientwidth | | | |）；
appheight =（window.innerheight document.documentelement.clientheight document.body.clientheight | | | |）- 3； / /铬、高度，滚动条将出现下降
/中心
中心点= { x：appwidth×0.5，Y：appheight * 0.5 }；
动画
lastfpsupdatetime =（+新的日期）；
画布
caobj = null；
画布/上下文对象
ctxtobj = null；
当前时间
办法= ；
{到年度}
初始位置= 1988；
函数（）{
窗口。指针函数（）{ this.initcanvas（）；}
（}）；
getdomid =功能（ID）{ return document.getelementbyid（ID）；}
initcanvas =功能（ID）{
this.caobj = this.getdomid（calendarwithtime ）；
this.ctxtobj = this.caobj.getcontext（2D）；
全屏
this.caobj.style.width =（本。appwidth + 'px）；
this.caobj.style.height =（本。appheight + 'px）；
this.caobj.width = this.appwidth；
this.caobj.height = this.appheight；
如果（v）{
caobj.style.border =没有；
}
{到年度}
初始位置= math.floor（（新的日期（）），GetFullYear（）/ 8）* 8；
测试
/ /初始位置= math.floor（2010 / 8）* 8；
this.lastfpsupdatetime =（+新的日期）；
this.animate（）；
}
dodraw =函数（）{
this.ctxtobj.clearrect（0, 0，this.caobj.width，这个caobj。高度）；
日期=新日期（）；
测试
date.setdate / *（29）；
（3）date.setmonth；
date.setfullyear（2010）；* /
无功aftergap = 8 -（）- date.getfullyear（初始位置）；
无功allyears = date.getfullyear（）-这aftergap初始位置+；
无功好德= this.getcountdays（date.getfullyear（），date.getmonth（）））；
this.dodrawdaypanel（31，好德）；
This.doDrawMonthPanel（）；
this.dodrawyearpanel（this.starty，date.getfullyear（）（），aftergap）；
绘制/时间指针
This.doDrawTPanel（）；
This.drawYMDHMS（0,0.35,0,0.1，date.getseconds（）、0.30，'，'）；
This.drawYMDHMS（0,0.3,0, 0.05，date.getminutes（），date.getseconds（）/ 60,30，叫'，'）；
This.drawYMDHMS（0,0.25,0, 0.03，date.gethours（）% 12、date.getminutes（）/ 60,6，H，）；
This.drawYMDHMS（0.4,0.7,0.4, 0.66，date.getdate（），date.gethours（） / 24，Math.ceil（31×0.5），最好的，date.getdate（））；
This.drawYMDHMS（0.4,0.6,0.4, 0.568，（（（date.getmonth（）），date.getdate（）/（好德+ 1），6，是的，date.getmonth（）+ 1）；
This.drawYMDHMS（0.4,0.55,0.4, 0.52，（（date.getfullyear（）-这个初始位置），（date.getmonth（）+ 1）/ 13，Math.ceil（allyears * 0.5），Y，date.getfullyear（））；
显示时间
This.getTimeNow（）；
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
this.ctxtobj.fillstyle =# 369 ；
this.ctxtobj.strokestyle =# 369 ；
this.ctxtobj.font =30px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =顶；
this.ctxtobj.filltext（this.timenow，0,0）；
this.ctxtobj.stroketext（this.timenow，0,0）；
This.ctxtObj.restore（）；
*
filltext（文本字符串，x，y {浮动，浮动maxwidth }）：填充字符串
stroketext（文本字符串，x，y {浮动，浮动maxwidth }）：绘制一个边框
字体=大胆45px歌体
TextAlign：设置绘制字符串的水平对齐方式，开始|端|右|中心
textbaseline：垂直对齐：顶|挂|中间|字母|底
* /
}
dochangetofront =函数（i，x）{
到绘画值中
返回（我+ math.ceil（X / 4））% 60；
}
dochangetoend =函数（i，x）{
用于背景转换值
返回（我+ math.ceil（X / 4 * 3））% 60；
}
dodrawtpanel =函数（）{
绘图/时钟面板
无功minslen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.3；
无功minelen = math.min（this.caobj.width，这个caobj。高度）×0.5×0.32；
无功maxslen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.28；
无功maxelen = math.min（this.caobj.width，这个caobj。高度）×0.5×0.34；
var =数学= pi 30；
futonum = 5；
This.ctxtObj.save（）；
this.ctxtobj.fillstyle =# 369 ；
this.ctxtobj.strokestyle =# 369 ；
对于（var i = 0；i < 59；i + +）{
如果（我futonum = = 0）{
maxslen Slen =；
艾伦= maxelen；
其他{ }
minslen Slen =；
艾伦= minelen；
}
This.ctxtObj.beginPath（）；
This.ctxtObj.moveTo（Math.cos（我的差距）*长+这个中心点。X，Math.sin（我的差距）*长+这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
this.ctxtobj.stroke（）；
This.ctxtObj.closePath（）；
/ *例= this.dochangetofront（我）； / /我= >例
/ / idiff2 = this.dochangetoend（例，60）； / /例= >我
this.ctxtobj.font = 2px大胆的微软雅黑；
这个ctxtobj。TextAlign =中心
这个ctxtobj。textbaseline =中间
this.ctxtobj.filltext（例，Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
* /
}
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，Math.min（this.caobj.width，这个caobj。高度）×0.5×0.010360，假）；
这个ctxtobj。fillStyle =红色；
This.ctxtObj.fill（）；
This.ctxtObj.closePath（）；
This.ctxtObj.restore（）；
}
dodrawyearpanel =功能（startyear，nowyear，aftergap）{
年油漆面板
VaR Slen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.53；
var艾伦= math.min（this.caobj.width，这个caobj。高度）×0.5×0.55；
无功labellen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.60；
无功allyears = nowyear startyear + aftergap；
VaR的差距=数学。PI / math.ceil（allyears×0.5）；
This.ctxtObj.save（）；
this.ctxtobj.fillstyle =# b4ffff ；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，艾伦+ 20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
this.ctxtobj.fillstyle =白色；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，slen-20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
This.ctxtObj.restore（）；
this.ctxtobj.fillstyle =# 369 ；
this.ctxtobj.strokestyle =# 369 ；
对于（var i = 2；i < = allyears-3；i++）{
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
This.ctxtObj.moveTo（Math.cos（我的差距）*长+这个中心点。X，Math.sin（我的差距）*长+这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
This.ctxtObj.closePath（）；
this.ctxtobj.stroke（）；
例= this.dochangetofront（我，allyears）+ startyear；
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =10px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =底；
this.ctxtobj.filltext（例，细长，0）；
This.ctxtObj.restore（）；
}
}
dodrawmonthpanel =函数（）{
年油漆面板
VaR Slen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.58；
var艾伦= math.min（this.caobj.width，这个caobj。高度）×0.5×0.6；
无功labellen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.70；
var =数学= pi 6；
This.ctxtObj.save（）；
this.ctxtobj.fillstyle =# fde08c ；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，艾伦+ 20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
this.ctxtobj.fillstyle =白色；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，slen-20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
This.ctxtObj.restore（）；
this.ctxtobj.fillstyle =# 369 ；
this.ctxtobj.strokestyle =# 369 ；
对于（var i = 2；i < 9；i + +）{
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
This.ctxtObj.moveTo（Math.cos（我的差距）*长+这个中心点。X，Math.sin（我的差距）*长+这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
This.ctxtObj.closePath（）；
this.ctxtobj.stroke（）；
例=（this.dochangetofront（I，12））% 12 + 1；
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =20px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =中间；
This.ctxtObj.fillText（（例+）。PadLeft（2,0），艾伦，0）；
This.ctxtObj.restore（）；
}
}
dodrawdaypanel =功能（一天都有所值，realallday）{
年油漆面板
VaR Slen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.68；
var艾伦= math.min（this.caobj.width，这个caobj。高度）×0.5×0.7；
无功labellen = Math.min（this.caobj.width，这个caobj。高度）×0.5×0.80；
VaR的差距=数学。PI / math.ceil（一天都有所值×0.5）；
This.ctxtObj.save（）；
this.ctxtobj.fillstyle =# e587e5 ；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，艾伦+ 20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
this.ctxtobj.fillstyle =白色；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，slen-20360，假）；
This.ctxtObj.closePath（）；
This.ctxtObj.fill（）；
This.ctxtObj.restore（）；
this.ctxtobj.fillstyle =# 369 ；
this.ctxtobj.strokestyle =# 369 ；
对于（var i = 2；i < = daycount-2；i++）{
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
This.ctxtObj.moveTo（Math.cos（我的差距）*长+这个中心点。X，Math.sin（我的差距）*长+这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
This.ctxtObj.closePath（）；
this.ctxtobj.stroke（）；
例=（this.dochangetofront（我一天都有所值））%（一天都有所值+ 1）；
如果（例<= realallday例！= 0）{
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =20px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =中间；
This.ctxtObj.fillText（（例+）。PadLeft（2,0），艾伦，0）；
}
This.ctxtObj.restore（）；
}
}
drawymdhms =功能（长、Elen、cslen，该主、子、GAPM，，类型，值）{
绘制/日期时间指针
日期=新日期（）；
var =主；
子分区；
VaR的差距=数学。PI / GAPM；
VaR Slen = Math.min（this.caobj.width，这个caobj。高度）×0.5×Slen；
Var eLen = Math.min (this.caObj.width, this.caObj.height) *0.5*elen;
无功cslen = Math.min（this.caobj.width，这个caobj。高度）×0.5×cslen；
var = Math.min（该this.caobj.width，这个caobj。高度）×0.5×该；
我= this.dochangetoend（SIM卡+ SIS，GAPM×2）；
CI =（I + GAPM）%（GAPM×2）；
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
如果（类型= = Y）{
这个ctxtobj。strokeStyle =# 00cece ；
this.ctxtobj.linewidth = 6；
如果（type = ''）{
这个ctxtobj。strokeStyle =# ce9b00 ；
this.ctxtobj.linewidth = 5；
}如果（type = ''）{
这个ctxtobj。strokeStyle =# bd01bd ；
this.ctxtobj.linewidth = 4；
} else if（类型= = H）{
this.ctxtobj.linewidth = 3；
如果（type = ''）{
this.ctxtobj.linewidth = 2；
如果（type = ''）{
this.ctxtobj.linewidth = 1；
}
This.ctxtObj.moveTo（Math.cos（我的差距）*长+这个中心点。X，Math.sin（我的差距）*长+这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（我的差距）*艾伦+这个中心点。X，Math.sin（我的差距）*艾伦+这个中心点。Y）；
This.ctxtObj.moveTo（Math.cos（CI *差距）* cslen +这个中心点。X，Math.sin（词*差距）* cslen +这个中心点。Y）；
This.ctxtObj.lineTo（Math.cos（CI * *该间隙）+这个中心点。X，Math.sin（词* *该间隙）+这个中心点。Y）；
this.ctxtobj.stroke（）；
This.ctxtObj.closePath（）；
This.ctxtObj.restore（）；
VaR CPI =词*差距* 360 / Math.PI；
如果（类型= = Y）{
This.ctxtObj.save（）；
this.ctxtobj.fillstyle =# 00cece ；
这个ctxtobj。strokeStyle =# 00cece ；
this.ctxtobj.linewidth = 8；
This.ctxtObj.beginPath（）；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，该间隙，CI * * 0.5，CI *差距差距* + 0.5，假）；
this.ctxtobj.stroke（）；
This.ctxtObj.closePath（）；
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =20px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =中间；
this.ctxtobj.linewidth = 2；
This.ctxtObj.fillText（价值+年，艾伦* 1.03,0）；
This.ctxtObj.strokeText（价值+年，艾伦* 1.03,0）；
This.ctxtObj.restore（）；
如果（type = ''）{
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
this.ctxtobj.fillstyle =# ce9b00 ；
这个ctxtobj。strokeStyle =# ce9b00 ；
this.ctxtobj.linewidth = 7；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，该间隙，CI * * 0.5，CI *差距差距* + 0.5，假）；
this.ctxtobj.stroke（）；
This.ctxtObj.closePath（）；
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =20px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =中间；
this.ctxtobj.linewidth = 2；
This.ctxtObj.fillText（价值+月，艾伦* 1.03,0）；
This.ctxtObj.strokeText（价值+月，艾伦* 1.03,0）；
This.ctxtObj.restore（）；
} else if（类型= =会）{
This.ctxtObj.save（）；
This.ctxtObj.beginPath（）；
this.ctxtobj.fillstyle =# bd01bd ；
这个ctxtobj。strokeStyle =# bd01bd ；
this.ctxtobj.linewidth = 6；
This.ctxtObj.arc（这个中心点。X，这个中心点。Y，该间隙，CI * * 0.5，CI *差距差距* + 0.5，假）；
this.ctxtobj.stroke（）；
This.ctxtObj.closePath（）；
This.ctxtObj.translate（这个中心点。X，这个中心点。Y）；
this.ctxtobj.rotate（我的差距）；
this.ctxtobj.font =20px大胆的微软雅黑；
这个ctxtobj。TextAlign = 开始；
这个ctxtobj。textbaseline =中间；
this.ctxtobj.linewidth = 2；
This.ctxtObj.fillText（价值+天，艾伦* 1.03,0）；
This.ctxtObj.strokeText（价值+天，艾伦* 1.03,0）；
This.ctxtObj.restore（）；
}
This.ctxtObj.restore（）；
}
动画=函数（）{
var =（+新日期）；
如果（现在this.lastfpsupdatetime > 60）{
this.lastfpsupdatetime =现在；
This.doDraw（）；
}
Window.requestNextAnimationFrame（这个动画）；
}
getcountdays =功能（年、月）{
VaR CURDATE =新的日期（）；
CurDate.setFullYear（年）；
curdate.setmonth（月+ 1）；
（0）curdate.setdate；
返回curdate.getdate（）；
}
gettimenow =函数（）{
日期=新日期（）；
无功seperator1 = ；
无功seperator2 =：；
this.timenow = date.getfullyear（）
+ seperator1 +（date.getmonth（）+ 1 +）。PadLeft（2,0）
seperator1（date.getdate（+ +）+）。PadLeft（2,0）
+（日期。获得当前的小时）+（。padleft）（2,0）
seperator2（date.getminutes（+ +）+）。PadLeft（2,0）
seperator2（date.getseconds（+ +）+）。PadLeft（2,0）
+ +（日期。getmilliseconds）+ ''。'（。padleft）（3,0）；
}
对象
}
VaR CWT =新calendarwithtime（）；
/ / =================================================
string.prototype.padleft =函数（总宽度，paddingchar）
{
如果（paddingchar！= null）
{
返回this.padhelper（总宽度，paddingchar，假）；
{人}
返回this.padhelper（总宽度，' '，假）；
}
}
string.prototype.padright =函数（总宽度，paddingchar）
{
如果（paddingchar！= null）
{
返回this.padhelper（总宽度，paddingchar，真的）；
{人}
返回this.padhelper（总宽度，，真的）；
}
}
string.prototype.padhelper =函数（总宽度，paddingchar，isrightpadded）
{
如果（this.length <总宽度）
{
无功paddingstring =新的字符串（）；
为（i = 1；i < =（总宽度-长度）；i++）
{
paddingstring = paddingchar；
}
如果（isrightpadded）
{
返回（本+ paddingstring）；
{人}
返回（paddingstring +本）；
}
{人}
返回此；
}
}
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！