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>

日期插件的包为:mydate.js。

1:首先将日期插件的包引入到页面中

<script language="JavaScript" src="../Inc/Js/mydate.js"></script>

2:设置鼠标点击事件,当鼠标点击获得焦点的时候,触发事件,调用方法

<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

<input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

3:完整页面代码

<?php

  date_default_timezone_set("PRC")

  $nowtime = time()

  $rq = date("Y-m-d",$nowtime)

?>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<meta name="generator" content="FFKJ.Net" />

<link rev="MADE" href="mailto:FFKJ@FFKJ.Net">

<title>在线--后台</title>

<link rel="stylesheet" type="text/css" href="../Skins/Admin_Style.Css" />

<script language="JavaScript" src="../Inc/Js/mydate.js"></script>

</head>

<body>

开始时间:<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

结束时间:<input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

</body>

</html>

4:页面效果:

如果你用ASP.NET2.0在VS2005编程环境中只需要拖拽一个控件即可搞定。

补充: 在HTML页上我没试过,多半是不行,因为ASP.NET的代码运行需要.NET Franework。


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

原文地址: http://outofmemory.cn/bake/11897168.html

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

发表评论

登录后才能评论

评论列表(0条)

保存