首先看一下效果图,可以跟随当天日期变动
html代码
<p class="calendar">
<span id="dayStr"></span>
<em>
<span id="monthStr"></span>
</em>
</p>css代码
.calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:65px;
background:#ededef;
background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
font:bold 25px/30px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
-webkit-box-shadow:0 2px 2px #888;
box-shadow:0 2px 2px #888;
}
.calendar em{
display:block;
font:normal bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top, #04599a, #00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a;
}
js代码
function getToday(){
var date = new Date();
var strDate = date.getDate();
$("#monthStr").html(date.toDateString().split(" ")[1]);
$("#dayStr").html(strDate);
}