相思资源网 Design By www.200059.com
先看看效果图，效果比较简单：
具体代码：
<html>
<head>
<title>javaScript日历</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.calendar{
width:300px;
margin:100px auto;
text-align:center;
font-size:12px;
}
.calendar .wrap{
width:100%;
height:36px;
line-height:36px;
}
.calendar .wrap .theYear{
}
.calendar .wrap .theMonth{
color:#666;
}
.calendar .wrap span{
font-size:24px;
color: #DDD;
cursor:pointer;
font-family: Georgia, "Times New Roman", Times, serif;
}
.calendar .wrap span b:hover{
color: #777;
}
.calendar .wrap .span{
float:left;
}
.calendar .wrap .prev_year{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .next_year{
float:right;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .prev_month{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_month{
float:right;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_year:hover,.calendar .wrap .prev_year:hover,
.calendar .wrap .next_month:hover,.calendar .wrap .prev_month:hover{
color:#999;
}
.calendar table{
width:100%;
border-collapse:collapse;
}
.calendar .header{
background-color:#EEE;
font-family:"Microsoft YaHei";
}
.calendar .header td{
cursor:default;
}
.calendar td{
border:1px solid #CCC;
line-height:36px;
cursor:pointer;
}
.calendar td:hover{
background-color:#EEE;
}
.calendar .empty{
cursor:default;
}
.calendar .empty:hover{
background-color:#FFF;
}
.calendar .today{
background-color:#66BE8C;
color:#FFF;
}
.calendar .today:hover{
background-color:#66BE8C;
color:#FFF;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.8.2.js">
JavaScript代码
// 判断是否为闰年
function IsLeapYear(year){
if((year%400==0)||(year%4==0 && year%100!=0)){
return true;
}
return false;
}
// 日历
function createCalendar(year,month,date){
var d=new Date();
if(!year || year<=0){
cur_year=d.getFullYear(); // 年份
}else{
cur_year=year;
}
if(!month || month<=0){
cur_mon=d.getMonth(); // 日期
}else{
cur_mon=month-1;
}
if(!date || date<=0){
cur_date=d.getDate(); // 日期
}else{
cur_date=date;
}
month_days=new Array(31,28+IsLeapYear(d.getFullYear()),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
month_firstday_date=new Date(cur_year,cur_mon,1);
monthDays=month_days[cur_mon];
monthFirstday=month_firstday_date.getDay(); // 月份的第一天是星期几
lines=Math.ceil((monthDays+monthFirstday)/7); // 表格所需行数
var calendarBody="";
for(var i=0;i<lines;i++){
calendarBody+="<tr class='line'>";
for(var j=0;j<7;j++){
idx=i*7+j; // 单元格自然序列号
if(i==0 && idx<monthFirstday){
calendarBody+="<td class='empty'></td>";
}else if(idx<monthDays+monthFirstday){
var date=idx+1-monthFirstday;
if(date==cur_date && cur_mon==d.getMonth() && cur_year==d.getFullYear()){
calendarBody+="<td class='today'>"+date+"</td>";
}else{
calendarBody+="<td>"+date+"</td>";
}
}else{
calendarBody+="<td class='empty'></td>";
}
}
calendarBody+="</tr>";
}
return calendarBody;
}
标签：
javascript,日历
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无javascript实现2016新年版日历的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。