<!DOCTYPE html>
<html>
<style>
.calender{height:320px;width:450px;background: #fff;border:1px solid #c7c7c7;}
.f1{float:left;}
.calender .items{width:14%;line-height:40px;}
.calender .topDate{font-size:16px;height:40px;lineheight:40px;}
.clearfix{clear:both;}
.calendar .days{padding:0 10px; }
.ac{text-align:center;}
.dates:hover{ background:#e2e2e2;border-radius:44px;}
.selects{background:yellow;border-radius:44px;}
.selectt{color:red;}
.dates{cursor:pointer;}
.hh{height:1px;}
</style>
<body>
<div class="calender">
<div class="topDate ac"></div>
<div class="tops clearfix ac">
<div class="f1 items ac">日</div>
<div class="f1 items ac">一</div>
<div class="f1 items ac">二</div>
<div class="f1 items ac">三</div>
<div class="f1 items ac">四</div>
<div class="f1 items ac">五</div>
<div class="f1 items ac">六</div>
</div>
<div class="days clearfix ac"></div>
</div>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
var dd=new Date();
var year = dd.getYear()+1900;
var month_ = dd.getMonth();
var date = dd.getDate();
if(month_==0){
month_=12;
}
var month=getRealMonth(month_);
if(month_==12){
year=year-1;
}
initCalendar(year,month,1);
var mydate = new Date();
var str = "" + mydate.getFullYear();
str += (mydate.getMonth()+1);
str += mydate.getDate() ;
$("div[date-select='"+str+"']").addClass("selectt");
});
function getRealMonth(month_){
if(month_==12){
return 12;
}else{
var month=Math.abs(month_)%12+1;
}
return month;
}
function initCalendar(year,month,num){
var d = new Date(year,month,0);
var days=d.getDate();
d.setDate(1);
var firstDay=d.getDay();
var html = "";
if(firstDay!=0){
var htmls = '<div class="f1 items ac hh"><div class="dates"></div></div >';
for (var i = 0; i<firstDay; i++) {
html+=htmls;
};
}
if(month<10){
month="0"+month;
}
for(var i=1;i<=days;i++){
var k=i;
if(i<10){
k="0"+i;
}
var htmlss = '<div class="f1 items ac"><div class="dates" date-select="'+year+month+k+'" οnclick="changeWorkDay(this)">'+k+'</div></div>'
html+=htmlss;
}
var dayHtml = year+"年"+month+"月"
html+='<input type="hidden" class="yearClick" value="'+year+'">';
html+='<input type="hidden" class="monthClick" value="'+month+'">';
$(".topDate").html(dayHtml);
$(".days").html(html);
}
function changeWorkDay(obj){
var now = $(obj).attr("date-select");
$("div[date-select='"+now+"']").addClass("selects");
}
</script>
</body>
</html>
2446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
