calendar.js尚未实现

2023-04-07 01:02:03JavaScript018

calendar.js是一款跨浏览器的javascript库，专为创建日历、事件管理和筛选等功能而设计。它提供了一套简单而易用的API，可以帮助开发者快速构建功能强大的日历应用程序。尚未实现指的是，该库还在开发中，目前还不能进行实际使用。

<html>

<title>日期选择 - BY ziyue</title>

/*=======Calendar.js=======By Jiang Hongbin=======*/

var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月")

var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

var days = new Array("日","一", "二", "三", "四", "五", "六")

var today

document.writeln("<div id='Calendar' style='position:absolutez-index:1visibility: hiddenfilter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>")

function getDays(month, year)

{

//下面的这段代码是判断当前是否是闰年的

if (1 == month)

return ((0 == year % 4) &&(0 != (year % 100))) || (0 == year % 400) ? 29 : 28

else

return daysInMonth[month]

}

function getToday()

{

//得到今天的年,月,日

this.now = new Date()

this.year = this.now.getFullYear()

this.month = this.now.getMonth()

this.day = this.now.getDate()

}

function getStringDay(str)

{

//得到输入框的年,月,日

var str=str.split("-")

this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]))

this.year = this.now.getFullYear()

this.month = this.now.getMonth()

this.day = this.now.getDate()

}

function newCalendar() {

var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value)

var newCal = new Date(parseYear, document.all.Month.selectedIndex, 1)

var day = -1

var startDay = newCal.getDay()

var daily = 0

if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))

day = today.day

var tableCal = document.all.calendar

var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear())

for (var intWeek = 1intWeek <tableCal.rows.lengthintWeek++)

for (var intDay = 0intDay <tableCal.rows[intWeek].cells.lengthintDay++)

{

var cell = tableCal.rows[intWeek].cells[intDay]

if ((intDay == startDay) &&(0 == daily))

daily = 1

if(day==daily) //今天，调用今天的Class

{

cell.style.background='#6699CC'

cell.style.color='#FFFFFF'

//cell.style.fontWeight='bold'

}

else if(intDay==6) //周六

cell.style.color='green'

else if (intDay==0) //周日

cell.style.color='red'

if ((daily >0) &&(daily <= intDaysInMonth))

{

cell.innerText = daily

daily++

}

else

cell.innerText = ""

}

function GetDate(InputBox)

{

var sDate

//这段代码处理鼠标点击的情况

if (event.srcElement.tagName == "TD")

if (event.srcElement.innerText != "")

{

sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText

eval("document.all."+InputBox).value=sDate

HiddenCalendar()

}

function HiddenCalendar()

{

//关闭选择窗口

document.all.Calendar.style.visibility='hidden'

}

function ShowCalendar(InputBox)

{

var x,y,intLoop,intWeeks,intDays

var DivContent

var year,month,day

//var o=document.getElementById(InputBox)

var o=InputBox

var oid=o.id

var thisyear//真正的今年年份

if(!oid)oid=o.name

thisyear=new getToday()

thisyear=thisyear.year

today = o.value

if(isDate(today))

today = new getStringDay(today)

else

today = new getToday()

//显示的位置

x=o.offsetLeft

y=o.offsetTop

while(o=o.offsetParent)

{

x+=o.offsetLeft

y+=o.offsetTop

}

document.all.Calendar.style.left=x+2

document.all.Calendar.style.top=y+20

document.all.Calendar.style.visibility="visible"

//下面开始输出日历表格(border-color:#9DBAF7)

DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FFbackground-color:#EDF2FC'>"

DivContent+="<tr>"

DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FA'>"

//年

DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"

for (intLoop = thisyear - 100intLoop <(thisyear + 2)intLoop++)

DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"

DivContent+="</select>"

//月

DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"

for (intLoop = 0intLoop <months.lengthintLoop++)

DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"

DivContent+="</select>"

DivContent+="</td>"

DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FAfont-weight:boldfont-family:Wingdings 2,Wingdings,Webdingsfont-size:16pxpadding-top:2pxcolor:#4477FFcursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>"

DivContent+="</tr>"

DivContent+="<tr><td align='center' colspan='2'>"

DivContent+="<table id='calendar' border='0' width='100%'>"

//星期

DivContent+="<tr>"

for (intLoop = 0intLoop <days.lengthintLoop++)

DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"

DivContent+="</tr>"

//天

for (intWeeks = 0intWeeks <6intWeeks++)

{

DivContent+="<tr>"

for (intDays = 0intDays <days.lengthintDays++)

DivContent+="<td onClick='GetDate(\"" + oid + "\")' style='cursor:handborder-right:1px solid #BBBBBBborder-bottom:1px solid #BBBBBBcolor:#215DC6font-family:Verdanafont-size:12px' align='center'></td>"

DivContent+="</tr>"

}

DivContent+="</table></td></tr></table>"

document.all.Calendar.innerHTML=DivContent

newCalendar()

}

function isDate(dateStr)

{

var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/

var matchArray = dateStr.match(datePat)

if (matchArray == null) return false

var month = matchArray[3]

var day = matchArray[5]

var year = matchArray[1]

if (month <1 || month >12) return false

if (day <1 || day >31) return false

if ((month==4 || month==6 || month==9 || month==11) &&day==31) return false

if (month == 2)

{

var isleap = (year % 4 == 0 &&(year % 100 != 0 || year % 400 == 0))

if (day >29 || (day==29 &&!isleap)) return false

}

return true

}

</script>

<!--

td,input {

font-family: Verdana, Arial, Helvetica, sans-serif

font-size: 12px

}

-->

</style>

</head>

<body>

</tr>

</table>

</form>

</body>

</html>

一、.获取上下文对象

var cxt = document.getElementById(‘元素名’).getContect(‘2d’)

IE8或更早的浏览器不支持元素。

二、 drawClock() – 实现画时钟

1. clearRect() 清空给定矩形内的指定像素。

context.clearRect(x,y,width,height)

属性 | 值

-----|------------

x,y | 要清除的矩形左上角点的(x,y)坐标

width,height| 要清除的矩形宽度和高度，单位为像素12345

2.new Date() — 得到系统时间

var sec = now.getSeconds() var min = now.getMinutes() var hour = now.getHours() 123

3.画时钟的形状

cxt.beginPath() cxt.lineWidth = 10 cxt.strokeStyle = "blue" cxt.arc(550, 310, 300, 0, 360, false) cxt.closePath() cxt.stroke()123456

beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。

closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。

cxt.lineWidth() ：画笔的宽度

cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。

属性值：color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

gradient 用于填充绘图的渐变对象（线性或放射性）

pattern 用于创建 pattern 笔触的 pattern 对象

stroke ()绘制已定义的路径

arc() 方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

参数

描述

x 圆的中心的 x 坐标。

y 圆的中心的 y 坐标。

r 圆的半径。

sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle 结束角，以弧度计。

counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

4）drawScale — 自定义函数画刻度

function drawScale(size, width, color, value, startx, starty, endx, endy){

for(var i = 0i <sizei++){

drawPointer(width, color, value, i, startx, starty, endx, endy)

} } 12345

5. 画时钟刻度依托点

function drawPointer(width, color, value, angle, startx, starty, endx, endy){

cxt.save() //先保存当前画布

cxt.lineWidth = width //设置画笔的宽度

cxt.strokeStyle = color //设置画笔的颜色

cxt.translate(550, 310) //重置异次元空间的原点坐标

cxt.rotate(value * angle * Math.PI / 180) //设置旋转的角度，参数是弧度

cxt.beginPath()

cxt.moveTo(startx, starty)

cxt.lineTo(endx, endy)

cxt.closePath() //先闭合路径，再画线

cxt.stroke() //开始画线

cxt.restore() //将旋转后的线段返回给画布 } 12345678910111213

translate() 方法重新映射画布上的 (0,0) 位置。

JS代码如下：

//获取上下文文档对象 var clock = document.getElementById('clock')

var cxt = clock.getContext('2d')

//画指针 function drawPointer(width, color, value, angle, startx, starty, endx, endy){

cxt.save() //先保存当前画布

cxt.lineWidth = width //设置画笔的宽度

cxt.strokeStyle = color //设置画笔的颜色

cxt.translate(550, 310) //重置异次元空间的原点坐标

cxt.rotate(value * angle * Math.PI / 180) //设置旋转的角度，参数是弧度

cxt.beginPath()

cxt.moveTo(startx, starty)

cxt.lineTo(endx, endy)

cxt.closePath() //先闭合路径，再画线

cxt.stroke() //开始画线

cxt.restore() //将旋转后的线段返回给画布 }

//画刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){

for(var i = 0i <sizei++){

drawPointer(width, color, value, i, startx, starty, endx, endy)

}

//为表盘的中心填充颜色 function drawFill(){

cxt.save()

cxt.beginPath()

cxt.arc(550, 310, 7, 0, 360, false)

cxt.closePath()

cxt.fillStyle = "red"

cxt.fill()

cxt.restore()

}

//画时钟 function drawClock(){

cxt.clearRect(0, 0, 1350, 620) //清空整个画布

var now = new Date() //获取系统时间，取出时,分,秒

var sec = now.getSeconds()

var min = now.getMinutes()

var hour = now.getHours()

min += sec / 60

hour += min / 60

if(hour >12) hour -= 12

cxt.beginPath()

cxt.lineWidth = 10

cxt.strokeStyle = "blue"

cxt.arc(550, 310, 300, 0, 360, false)

cxt.closePath()

cxt.stroke()

drawScale(12, 7, "pink", 30, 0, -280, 0, -260) //画时刻度

drawScale(60, 5, "pink", 6, 0, -280, 0, -270) //画分刻度

drawPointer(7, "purple", hour, 30, 0, 12, 0, -210) //画时针

drawPointer(5, "yellow", min, 6, 0, 15, 0, -240) //画分针

drawPointer(4, "red", sec, 6, 0, 17, 0, -250) //画秒针

//细化秒针,为秒针加箭头

drawPointer(3, "red", sec, 6, -7, -235, 0, -255)

drawPointer(3, "red", sec, 6, 7, -235, 0, -255)

drawFill()

}

drawClock()

setInterval(drawClock, 1000) //setInterval()方法中表示每隔1000ms，就执行drawClock一次 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：常柴水箱下面标志是什么

# 下一篇：java 通过三大框架登录页验证码生成怎么做