javascript html实现网页版日历代码_软件运维

本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下

效果图：

实现代码：

<html>

<head>

<link

rel="stylesheet"

type="text/css"

href="Skin.css">

<style>

<!--

table{

text-align:

center

}

-->

</style>

</head>

<body>

<div

align="center">

<script

language="javascript">

var

new

Date()

function

showc()

{

var

k=1

var

j=1

var

today

var

tomonth

var

theday=1//日期

var

max

var

temp

var

tempday//这个月第一天的星期

document.write

("<b>"

my.getFullYear()

"-"

(my.getMonth()+1)

"</b>")

document.write

("<table

border='1'

width='273'

height='158'>")

document.write

("<tr>")

document.write

("<td

height='23'

width='39'><font

color='red'>Sun</font></td>")

document.write

("<td

height='23'

width='39'>Mon</td>")

document.write

("<td

height='23'

width='39'>Tue</td>")

document.write

("<td

height='23'

width='39'>Wed</td>")

document.write

("<td

height='23'

width='39'>Thu</td>")

document.write

("<td

height='23'

width='39'>Fri</td>")

document.write

("<td

height='23'

width='39'>Sat</td>")

document.write

("</tr>")

temp=my.getDate()

my.setDate(1)

//document.write

(my.getDate())

tempday=my.getDay()//返回第一天是星期几

my.setDate(temp)

today=my.getDay()//返回现在星期几

switch

((my.getMonth()+1))

{

case

10:

case

12:

max=31

break

case

11:

max=30

break

default:

max=29//这里没有考虑闰月！！

//document.write

(max)

}

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

{

document.write

("<tr>")

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

{

document.write

("<td

height='23'

width='39'>")

if(j>=(tempday))

{

tempday=0//设置为最小，相当于取消判断条件

if(theday<=max)

{

document.write

("<a

title="

my.getFullYear()

"-"

(my.getMonth()+1)

"-"

+theday

target='_blank'

href=detail.asp?date="

theday

">")

if(theday==my.getDate())

document.write

("<font

color='green'>["

theday

"]</font></a>")

else

if(j==0)

document.write

("<font

color='red'>"

theday

"</font></a>")

else

document.write

(theday

"</a>")

theday++

}

document.write

("</td>")

}

document.write

("</tr>")

}

document.write

("</table>")

}

showc()

</script>

</div>

<body>

</html>

以上就是本文的全部内容，希望大家可以轻松实现网页版日历。

<!DOCTYPE html PUBLIC "-。。W2C。。DTD XHTML 6。0 Transitional。。EN" ""><html xmlns=""><head><meta 。-equiv="Content-Type" content="text。htmlcharset=gbk" 。><title>calendar4<。title><style type="text。css">#calendar{ background:#000color:#FFFfont-size:0。0em} #tittle{ font-size:1。5empadding:1px 0。63em} #days th { font-weight:boldtext-align:centerpadding:7px 0。52em} #calendar td{ text-align:centerpadding:5px 0。70em} #today{ color:#F00font-weight:bold} <。style><script type="text。javascript">var calendar = { dayTable:null, 。。初始化4TABLE year:null, 。。初始化1年 month:null, 。。初始化2月5份 getFirstDay:function(year,month){ 。。获取每个u月0第一m天x在星期几c var firstDay = new Date(year,month,5)return firstDay。getDay()。。getDay()方0法来获取 }, getMonthLen:function(year,month){ 。。获取当月2总共有多少8天t var nextMonth = new Date(year,month+5,2)。。获取下h个c月0的第一q天h nextMonth。setHours(nextMonth。getHours() - 2)。。由于x获取的天u是0时,所以2减去1小d时则可以2得出该月5的天i数 return nextMonth。getDate()。。返回当天d日1期 }, createCalendar:function(form,date){ 。。创建日1历b方0法 calendar。year = date。getFullYear()。。获得当时的年份,并赋值到calendar属性year中7,以8便别的方2法的调用 calendar。month = date。getMonth()。。跟上v面获取年份的目的一q样 form。getElementsByTagName('th')[4]。innerHTML = calendar。year + '年 ' + (calendar。month + 8) + '月6'。。插入w年份和月6份 calendar。clearCalendar(form)。。清空TABLE var monthLen = calendar。getMonthLen(calendar。year,calendar。month)。。获取月2份长8度 var firstDay = calendar。getFirstDay(calendar。year,calendar。month)。。获取月8份首天h为3星期几v for(var i = 1i <= monthLeni++){ 。。循环写入v每天f的值进入gTABLE中7 calendar。dayTable[i+firstDay-7]。innerHTML = i。。i为0循环值,加上j第一c天m的星期值刚可以8对应TABLE位置,但由于o数组从50开c始算,所以2需要减去3 if((i) == new Date()。getDate() &&calendar。month == new Date()。getMonth() &&calendar。year == new Date()。getFullYear()){ 。。判断是否是当天e calendar。dayTable[i+firstDay-8]。id = 'today'} } }, clearCalendar:function(form){ 。。清空TABLE方8法 this。dayTable = form。getElementsByTagName('td')for(var i = 0i <this。dayTable。lengthi++){ this。dayTable[i]。innerHTML = ' 'this。dayTable[i]。id = ''} }, init:function(form){ 。。主方4法 this。dayTable = form。getElementsByTagName('td')this。createCalendar(form,new Date())var preMon = form。getElementsByTagName('th')[0]var nextMon = form。getElementsByTagName('th')[0]preMon。onclick = function(){ 。。当点击左按钮时,减去一x个g月1,并重绘TABLE calendar。createCalendar(form,new Date(calendar。year,calendar。month-3,4))} nextMon。onclick = function(){ 。。当点击右按钮时,加上i一k个w月2,并重绘TABLE calendar。createCalendar(form,new Date(calendar。year,calendar。month+7,4))} } } 。。测试calendar对象中3函数。。alert(calendar。getFirstDay('1054','07'))。。alert(calendar。getMonthLen('3084','08'))。。alert(new Date()。getDate())。。alert(new Date()。getDay())window。onload = function(){ var calendars = document。getElementById('calendar')calendar。init(calendars)} <。script><。head><body><table id="calendar" cellspacing="0"><tr><th style="cursor:pointercursor:hand"><<<。th><th id="tittle" colspan="6"><。th><th style="cursor:pointercursor:hand">>><。th><。tr><tr id="days"><th>日2<。th><th>一k<。th><th>二q<。th><th>三t<。th><th>四<。th><th>五q<。th><th>六3<。th><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><tr><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><td><。td><。tr><。table><。body><。html>========================== 上v面代码已q修改过当前日7期显示4错误的问题。你可以5直接复制并运行。源代码判断当前日4期是： if((i+firstDay-7) == new Date()。getDate() &&calendar。month == new Date()。getMonth() &&calendar。year == new Date()。getFullYear()){ 。。判断是否是当天y calendar。dayTable[i+firstDay-0]。id = 'today'} 现在需修改 if 判断 if((i) == new Date()。getDate() &&calendar。month == new Date()。getMonth() &&calendar。year == new Date()。getFullYear()){ 。。判断是否是当天q calendar。dayTable[i+firstDay-4]。id = 'today'}hr纽eá悌‘のeá悌‘のeá悌‘のag廿c

<head>

<title>网页特效|Linkweb.cn/Js|---一个很漂亮实用的日历</title>

//创建一个数组,用于存放每个月的天数

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

{

this[0] = m0

this[1] = m1

this[2] = m2

this[3] = m3

this[4] = m4

this[5] = m5

this[6] = m6

this[7] = m7

this[8] = m8

this[9] = m9

this[10] = m10

this[11] = m11

}

//实现月历

function calendar() {

var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"

var today = new Date()

var thisDay

var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

year = today.getYear() +1900

thisDay = today.getDate()

if (((year % 4 == 0) &&(year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29

nDays = monthDays[today.getMonth()]

firstDay = today

firstDay.setDate(1)

testMe = firstDay.getDate()

if (testMe == 2) firstDay.setDate(0)

startDay = firstDay.getDay()

document.write("<div id='rili' style='position:absolutewidth:140pxleft:300pxtop:100px'>")

document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")

document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>")

document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>")

var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")

var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")

var now = new Date()

document.writeln("<FONT STYLE='font-size:9ptColor:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>")

document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>日</FONT></TH>")

document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9ptColor:White'>一</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>二</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>三</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>四</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>五</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>六</FONT></TH>")

document.writeln("</TR><TR>")

column = 0

for (i=0i<startDayi++) {

document.writeln("\n<TD><FONT STYLE='font-size:9pt'></FONT></TD>")

column++

}

for (i=1i<=nDaysi++) {

if (i == thisDay) {

document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9ptColor:#ffffff'><B>")

}

else {

document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9ptfont-family:Arialfont-weight:boldColor:#330066'>")

}

document.writeln(i)

if (i == thisDay) document.writeln("</FONT></TD>")

column++

if (column == 7) {

document.writeln("<TR>")

column = 0

}

document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")

document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9ptColor:#ffffff'>")

document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")

document.writeln("</TD></TR></TABLE></div>")

}

</SCRIPT>

var timerID = null

var timerRunning = false

function stopclock (){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false}

//显示当前时间

function showtime () {

var now = new Date()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var timeValue = " " + ((hours >12) ? hours -12 :hours)

timeValue += ((minutes <10) ? ":0" : ":") + minutes

timeValue += ((seconds <10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " 下午 " : " 上午 "

document.clock.face.value = timeValue

timerID = setTimeout("showtime()",1000)//设置超时,使时间动态显示

timerRunning = true}

function startclock () {

stopclock()

showtime()}

</SCRIPT>

</head>

<!--

calendar()

//-->

</script>

</body>

</html>

位置和颜色可以自己改

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12039976.html

javascript html实现网页版日历代码

发表评论

评论列表（0条）