html怎么写这个日历

html怎么写这个日历,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

table {

width: 230px

margin: auto

text-align: center

border: 1px solid darkcyan

border-bottom: 3px double darkcyan

box-shadow: 0 1px 2px darkcyan

}

th,

td {

border: 1px solid darkcyan

}

.today {

color: red

}

</style>

<script>

//判断当前年份是否是闰年(闰年2月份有29天,平年2月份只有28天)

function isLeap(year) {

return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0

}

var i, k,

today = new Date(), //获取当前日期

y = today.getFullYear(), //获取日期中的年份

m = today.getMonth(), //获取日期中的月份(需要注意的是:月份是从0开始计算,获取的值比正常月份的值少1)

d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)

firstday = new Date(y, m, 1), //获取当月的第一天

dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个,0代表星期天,1代表星期一,以此类推)

days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组

str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7) //确定日期表格所需的行数

document.write("<table cellspacing='0'><tr><td colspan ='7'>" + y + "年" + (m + 1) + "月" + "</td></tr>")

document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>") //打印表格第一行(显示星期)

for(i = 0 i < str_nums i += 1) { //二维数组创建日期表格

document.write('<tr>')

for(k = 0 k < 7 k++) {

var idx = 7 * i + k //为每个表格创建索引,从0开始

var date = idx - dayOfWeek + 1 //将当月的1号与星期进行匹配

(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1 //索引小于等于0或者大于月份最大值就用空表格代替

date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>') //高亮显示当天

}

document.write('</tr>')

}

document.write('</table>')

</script>

</head>

<body>

</body>

</html>

Clock.js文件代码如下:

function Clock() {

var date = new Date()

this.year = date.getFullYear()

this.month = date.getMonth() + 1

this.date = date.getDate()

this.toString = function() {

return this.year + "年" + this.month + "月" + this.date + "日 "

}

}

应用页面(需要在某网页中显示的页面)代码如下:

<SCRIPT src="js/Clock.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

var clock = new Clock()

clock.display(document.getElementById("clock"))

</SCRIPT>

<body>

现在是<label id=clock></label>

</body>

此外,在DW中可以插入当前时间,希望我的回答能对您有所帮助。

贴上这个

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>JavaScript 时间显示</title>

</head>

<body>

<span id=localtime></span>

<script type="text/javascript">

function showLocale(objD)

{

var str,colorhead,colorfoot

var yy = objD.getYear()

if(yy<1900) yy = yy+1900

var MM = objD.getMonth()+1

if(MM<10) MM = '0' + MM

var dd = objD.getDate()

if(dd<10) dd = '0' + dd

var hh = objD.getHours()

if(hh<10) hh = '0' + hh

var mm = objD.getMinutes()

if(mm<10) mm = '0' + mm

var ss = objD.getSeconds()

if(ss<10) ss = '0' + ss

var ww = objD.getDay()

if ( ww==0 ) colorhead="<font color=\"#FF0000\">"

if ( ww >0 &&ww <6 ) colorhead="<font color=\"#373737\">"

if ( ww==6 ) colorhead="<font color=\"#008000\">"

if (ww==0) ww="星期日"

if (ww==1) ww="星期一"

if (ww==2) ww="星期二"

if (ww==3) ww="星期三"

if (ww==4) ww="星期四"

if (ww==5) ww="星期五"

if (ww==6) ww="星期六"

colorfoot="</font>"

str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + ww + colorfoot

return(str)

}

function tick()

{

var today

today = new Date()

document.getElementById("localtime").innerHTML = showLocale(today)

window.setTimeout("tick()", 1000)

}

tick()

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6118153.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存