js日期

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrt-yyy/p/4449680.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个动态的日期显示和导航功能，包括日期滚动、周末标记等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.7.2-min.js" charset="utf-8" type="text/javascript"></script>
</head>

<body>
<style>
*{padding:0px;margin:0px;border:0px;}
.c{clear:both}
.w775{width:775px;overflow:hidden;height:27px;overflow:hidden;}
.position_r{position:relative}
.position_a{position: absolute;}
.position_f{position:fixed;}
.center{margin:0px auto;}
.mrt_date{width:936px;border:1px solid #dedede;padding:1px; }
.mrt_date a{width:28px;height:26px; display:inline-block;cursor:pointer;text-align:center;line-height:27px;}
.mrt_date a#mrt_left{float:left;}
.mrt_date a#mrt_right{float:right;}
.mrt_date div.mrt_week{width:876px; font-weight:bold;line-height:27px;display:inline-block;height:27px;background:url(../mrt_images/date_bg_x.jpg) repeat-x;float:left;margin:0 2px;}
.w775 span{display:inline-block;float:left;height:27px; width:25px;text-align:center;}
.w775 div.position_a{width:1134px;left:0px;top:0px;}
span.mrt_weekend{color:#c00000}
#days{margin-left:81px;}
.mrt_date_num{height:30px; line-height:30px;}
.mrt_date_num div.position_a{width:80px;text-align:center;}
</style>
<div class="mrt_date mb10">
<a id="mrt_left"><</a>
<div class="mrt_week">
<div class="center w775 position_r">
<div class="position_a" id="mrt_date">
日一二三四五六
日一二三四五六
日一二三四五六
日一二三四五六
日一二三四五六
日一二三四五六
</div>
</div>
</div>
<a id="mrt_right">></a>
<div class="c"></div>
<div class="mrt_date_num position_r">
<div class="position_a" id="mrt_date2">0000-00</div>
<div class="w775" id="days">
1234567
891011121314
15161718192021
22232425262728
293031
</div>
</div>
</div>
<script>
var mrtdate=document.getElementById("mrt_date2"),myDate=new Date(),i=myDate.getMonth()+1,year=myDate.getFullYear(),day=myDate.getDate(),weekday=myDate.getDay(),days,week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");function getFirstDay(i,n){if(i){if(n){if(n%4==0&&i==2){days=29;mouth=i}else{days=new Date(myDate.getYear(),i,0).getDate();mouth=i}}else{if(year%4==0&&i==2){days=29;mouth=i}else{days=new Date(myDate.getYear(),i,0).getDate();mouth=i}}}else{mouth=myDate.getMonth()+1;if(n){if(n%4==0&&mouth==2){days=29}else{days=new Date(myDate.getYear(),myDate.getMonth()+1,0).getDate()}}else{if(year%4==0&&mouth==2){days=29}else{days=new Date(myDate.getYear(),myDate.getMonth()+1,0).getDate()}}}if(n){mrtdate.innerHTML=n+"-"+mouth;myDate.setFullYear(n)}else{mrtdate.innerHTML=year+"-"+mouth}if(i){myDate.setMonth(i-1)}myDate.setDate(1);var mrt_num=myDate.getDay();$("#mrt_date").css({left:-mrt_num*25+"px"});$("#days").css({width:days*25+"px"})}$(function(){$("#mrt_left").click(function(){i--;if(i==0){year--;i=12}getFirstDay(i,year)});$("#mrt_right").click(function(){i++;if(i==13){year++;i=1}getFirstDay(i,year)})});getFirstDay();
</script>
</body>
</html>