简单的电子日历 HTML5 JavaScript css

代码与注释如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的电子日历的设计与实现</title>
<style>
div{
text-align:center;
margin-top:10px;
margin-bottom:10px;
   }
#calendar{
width:400px;
margin:auto   ;
   }
button{
   width:25%;
   float:left;
   height:40px;
   }
#month{
width:50% ;
   float:left;
}
.everyday{
   width:14%;
   float:left;
   }
</style>
</head>
<!-显示当前月份->
<body onLoad="showDate()">
<!-3级标题->
<h3 align="center">简单的电子日历的设计与实现</h3>
<!-下划线->
<hr/>
<!-id为calendar的div大框架->
<div id="calendar">
<!-状态栏->
<div>
<!-显示“上个月”按钮->
<button onClick="lastMonth()">上个月</button>
<!-显示当前年份和月份->
<div id="month"></div>
<!-显示“下个月”按钮->
<button onClick="nextMonth()">下个月</button>
</div>
<!-显示星期几->
<div>
<div class="everyday">日</div>
<div class="everyday">一</div>
<div class="everyday">二</div>
<div class="everyday">三</div>
<div class="everyday">四</div>
<div class="everyday">五</div>
<div class="everyday">六</div>
</div>
<!-显示当前月份每天的日期->
<div id="day"></div>
</div>
<script language="javascript">
var today = new Date();
var year = today.getFullYear();
//获取当前年份
var month = today.getMonth()+1;
//获取当前月份
var day = today.getDate();
//获取当前日期
var allday =0;
//当前月份的总天数
//用于推算当前月份一共有多少天
function count(){
   if(month!=2){
       if((month==4)||(month==6)||(month==9)||(month==11)){
           allday =30;
           //4.6.9.11月份都为30天
           }else{
               allday=31;
               //其他月份为31天，除去2月份
               }
               }
               else{
                   //需要判断当前是否为闰年
                   if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
                       allday =29;
                       //闰年的月份为29天
                       }else{
                           allday=28;
                           //非闰年的月份为28天
                           }
                   }
           }
//显示日历标题中当前的年份与月份
function showMonth(){
   var year_month = year+"年"+month+"月";
   document.getElementById("month").innerHTML=year_month;
   }
   //显示当前月份的日历
function showDate(){
   showMonth();//在年份和月份的显示牌上显示当前的年月
   count();//计算当前月份的总天数
   var firstdate =new Date (year, month,-1,1);
   //获取本月第一天的日期对象
   var xiqi=firstdate.getDay();
   //推算本月第一天是星期几
   var daterow = document.getElementById("day");
   daterow.innerHTML ="";
   //动态添加HTML元素
//如果本月的第一天不是星期天，则前面需要用空白元素补完日期
if(xiqi !=0){
   for (var i =0; i<xiqi; i++){
       var dayElement= document .createElement("div");
       dayElement.className="everyday";
       daterow.appendChild(dayElement);
       }
   }
   //使用循环语句将当前的月份的所有日期显示出来
   for(var j = 1; j<=allday; j++){
       var dayElement=document.createElement("div");
       dayElement.className="everyday";
       dayElement.innerHTML=j+"";
       //如果日期为今天，将内容显示为红色
       if(j==day){
           dayElement.style.color="red";
           }
           daterow.appendChild(dayElement);
           }
   }
   //显示上个月的日历
function lastMonth(){
   if (month>1){
   month-=1;
   }
   else{
       month =12;
       year-=1;
       }
       showDate();
}
       //显示下个月的日历
function nextMonth(){
   if (month <12){
   month+=1;
   }
   else{
       month=1;
       year+=1;
       }
       showDate();
       }
</script>
</body>
</html>

简单的电子日历 HTML5 JavaScript css相关推荐

简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
1.6 前端设计——HTML5+Javascript+CSS基础
前端设计时,为了兼容微信内置浏览器,我们采用H5页面的方式进行设计,设计界面时,我们必须充分考虑当前界面是要适配手机操作的. 结合前面的介绍,本章结束时,我们能够完成一个简单的小项目(程序)--选课系 ...
HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折前言一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
使用html5+javascript+css实现单机版五子棋---跟电脑打没赢过
Html5+JavaScript+CSS实现单机版五子棋: 运行环境-除了老版的IE浏览器,其他都行: 源码需要请:请点赞留言邮箱: 需要录屏软件:请点赞留言邮箱: html5实现五子棋
html5+javascript+css实现---网页版坦克大战---无需运行环境
html5+javascript+css实现-网页版坦克大战-无需运行环境,只需一个浏览器,重拾少年情. 运行环境-除老版IE浏览器都可以: 源码需要请:点赞留言邮箱: 可以跳关,回退关卡.支持双人坦 ...
用户注册登录页面实例 web前端开发HTML5 JavaScript css
根据清华大学出版社的HTML5网页前端设计实战课后实战代码与注释如下 <!doctype html> <html> <head> <meta charset ...
使用sasjs构建html5 javascript css应用
In our previous articles, we have learnt about the SASjs ecosystem and seen how we can build a SAS a ...
html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
html5仿mac商城css,html5+javascript+css商城（模拟联想）购物系统
[实例简介] 可以实现商城中信息的动态浏览与检索,实现用户的注册登录与增删改,商品信息增删改.下载后先打开命名为"软化工程"的word文档,阅读中间部分的运行配置说明 [实例截图] ...

简单的电子日历 HTML5 JavaScript css

简单的电子日历 HTML5 JavaScript css相关推荐

最新文章

热门文章