css 日历图标实现

首先看一下效果图,可以跟随当天日期变动

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);
}

参考网址:.htm