精华内容
下载资源
问答
  • HTML简单电子日历的设计与实现

    千次阅读 2020-04-25 21:14:38
    ** 效果图: ** 源码: 文字版: 简单电子日历

    **

    效果图:

    **
    在这里插入图片描述
    源码:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    文字版:

    简单电子日历
    展开全文
  • HTML5简单电子日历

    2020-10-19 23:14:18
    简单电子日历:设计一款简单的电子日历,要求实现显示当天所在月份的全部日期,并且可以通过点击按钮控件切换月份。
  • 代码与注释如下 <!doctype html>...简单电子日历的设计与实现</title> <style> div{ text-align:center; margin-top:10px; margin-bottom:10px; } #calendar{ width:400px; mar...

    代码与注释如下

    <!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>

    展开全文
  • 简单电子日历的设计与实现

    千次阅读 2019-04-27 17:45:24
    简单电子日历的设计与实现 HTML代码 <!DOCTYPE html> <html> <head> <title>简单电子日历的设计与实现</title> <meta charset="utf-8"> <link rel="stylesheet" href=...

    简单电子日历的设计与实现

    • HTML代码
    <!DOCTYPE html>
    <html>
    <head>
    	<title>简单电子日历的设计与实现</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="css/calendar.css">
    	<script src="calendar.js"></script>
    </head>
    <body onload="showDate()">
    	<h3>简单电子日历的设计与实现</h3>
    	<hr />
    	<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>
    </body>
    </html>
    
    • css代码
    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;
    }
    
    • js代码
    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 {
    		//如果时2月份需要判断当前是否为闰年
    		if(((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {
    			allday = 29;
    			//闰年的月份时29天
    		} else {
    			allday = 28;
    			//非闰年的2月份是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();
    
    	//动态添加HTML元素
    	var daterow = document.getElementById("day");
    	daterow.innerHTML = "";
    
    	//如果本月第一天不是周日,则前面需要用空白元素补全日期
    	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();
    }
    
    展开全文
  • 有些时候我们翻看别人的博客的时候,会发现有一个日历面板,可以点击左右按钮查看上下个月的日历,那么这是怎么实现的呢?其实并不难,主要就是用javascript的date()方法。先看效果图:具体代码:html</>日一...

    有些时候我们翻看别人的博客的时候,会发现有一个日历面板,可以点击左右按钮查看上下个月的日历,那么这是怎么实现的呢?其实并不难,主要就是用javascript的date()方法。

    先看效果图:

    7dd96975eda13879485943fc0c5480cd.png

    具体代码:

    html

    <

    /

    >

    css样式

    ul{list-style: none;margin: 0;padding: 0;overflow: hidden;}

    ul li{float: left;width: 30px;height: 30px;line-height: 30px;margin: 5px;text-align: center;border-radius: 50%;}

    ul .today{background: #FD6639;color: #FFF;}

    .day li{font-size: 15px;}

    .day li:hover{color: #00F;cursor: pointer;}

    .box{width: 280px;border: 1px solid #DDD;}

    .xq{background: #E7F1FD;}

    .title{background: #7AB2ED;height: 40px;line-height: 40px;}

    .title .last{float: left;width: 40px;text-align: center;cursor: pointer;}

    .title .next{float: right;width: 40px;text-align: center;cursor: pointer;}

    .title .current{text-align: center;width: 200px;float: left;color: #FFF;}

    .title .last:hover{color: #FD6639;background: rgba(0,0,0,0.2);}

    .title .next:hover{color: #FD6639;background: rgba(0,0,0,0.2);}

    javascript

    var date = new Date();

    var year = date.getFullYear();//年

    var month = date.getMonth();//月(0-11)

    var currentY = year;

    var currentM = month;

    var currentD = date.getDate();

    showDate(date);

    var lastBtn = document.getElementById("showLastMonth");

    var nextBtn = document.getElementById("showNextMonth");

    lastBtn.onclick = function(){

    if(month==0){

    year-=1;

    month=11;

    }else{

    month--;

    }

    showDate(new Date(year,month,1));

    }

    nextBtn.onclick = function(){

    if(month==11){

    year+=1;

    month=0;

    }else{

    month++;

    }

    showDate(new Date(year,month,1));

    }

    function showDate(obj){

    var year = obj.getFullYear();//年

    var month = obj.getMonth();//月

    //var date = obj.getDate();//日

    var sDay = new Date(year,month,1).getDay();//本月第一天星期几

    var days = new Date(year,month+1,0).getDate();//本月一共多少天

    document.getElementById("showYear").innerHTML = year;

    document.getElementById("showMonth").innerHTML = month+1;

    var dayObj = document.getElementById("showDay");

    var htmlStr = "";

    for (var i = 1; i <= sDay; i++) {

    htmlStr += "

    ";

    }

    for (var i = 1; i <= days; i++) {

    if(currentY == year && currentM == month && i == currentD){

    htmlStr += "

    "+i+"";

    }else{

    htmlStr += "

    "+i+"";

    }

    }

    dayObj.innerHTML = htmlStr;

    }

    有些博客加入了这么一个功能:在有博文的日历上做了一个标记,表示在当日有博文发表,那么这个我们可以用ajax来实现,再重绘日历的时候获取当月有文章的日期,然后加入样式。

    展开全文
  • 代码与注释如下 <!doctype html>...简单电子日历的设计与实现</title> <style> div{ text-align:center; margin-top:10px; margin-bottom:10px; } #calendar{ width:400px; m...
  • 经常在项目中有填写日期的工作,如果手动的输入当然可以,但是填写的日期往往和期望的不 符....基于Web的电子日历简单,其原理如下: 构造一个日历对象 改变相应的年份和月份 显示此年此月的月历.
  • 新手一枚,不会写什么高大上的...doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>无标题文档</title> 7 <style> 8 * {margin: 0;padding: 0} .
  • 基于HTML5的简单单向日历制作

    千次阅读 2018-05-10 20:19:21
    效果图:HTML代码如下:&lt;div id="calendar"&gt; &lt;div class="yearMon"&gt;&lt;/div&gt; &lt;div class="date"&gt;&lt;/div&gt; &...
  • 电子日历制作

    千次阅读 2019-06-24 01:50:52
    电子日历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> ...
  • 简单日历实现

    2019-11-20 15:26:53
    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">...简单日历实现</title> <link rel="stylesheet" type="text/css" href="index.css"/> <...
  • 电子日历的设计与实现(HTML+CSS)

    千次阅读 2020-03-29 20:44:32
    DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{ text-align: center; } div{ t...
  • 电子日历的设计与实现

    千次阅读 2020-10-19 23:32:26
    功能要求: 设计一款简单电子日历,要求实现显示当天所在月份的全部日期,并且可以通过点击按钮控件切换月份。 实现效果图: 一、界面设计 1.使用<div>标签划分区域 1)状态栏,左右两边是上/下个月按钮,...
  • 基于WEB的电子日历

    2019-10-08 03:44:48
    经常在项目中有填写日期的工作,如果手动的... 基于Web的电子日历简单,其原理如下:  构造一个日历对象  改变相应的年份和月份  显示此年此月的月历.  按照上述原理,我采用JS制作,原因是在各种环境中,都可...
  • 电子日历</title> <link rel="stylesheet" href="calendar.css"> <script src="calendar.js"></script> </head> <body onload="showDate()"> <div class="box"> <...
  • 电子日历的实现(html+css+JavaScript)

    千次阅读 2020-05-14 16:52:22
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
  • 我想做一个简单电子日历,我想设置一个可以随月份改变而改变的背景(我把背景设置为图片)请问该怎么做。
  • 基于HTML5的日历制作软件,本文是一篇技术展示文,需要您具有基本的Javascript编程能力和HTML5的相关知识,当然和本人的水平有关的是,您只需要具有一点点这方面的知识就可以阅读本文。基于HTML5的日历制作软件【如何...
  • CSS+HTML日历制作

    2014-11-19 16:35:29
    用css 和html实现简单日历制作,代码简单易懂
  • 设计一款简单电子日历,可以实现显示当天所在月份的全部日期,并且可以通过单击按钮控件切换月份的功能。
  • 一个简单日历

    2018-07-27 16:43:30
    HTML部分: &lt;div id="box"&gt; &lt;div id="top"&gt; &lt;span id="span1"&gt; &lt;&lt;/span&gt; &lt;span id="span2"&...
  • js实现简单日历

    2019-10-05 13:44:13
    下面为日历的关键代码: <!DOCTYPE html> <html lang="en"> , initial-scale=1.0"> <title>Document * { margin: 0; padding: 0; list-style: none; } #date { width: 420px; height: 560px; ...
  • JS实现简单日历

    2020-01-03 17:03:13
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--CSS样式--> <style type="text/css"> ...
  • html、css实现日历功能

    2017-10-24 09:39:36
    CSS3简单实现日历功能的一个小程序,打开html文件即可直接运行,直接用CSS3实现,没有用到框架等 适合新手
  • canvas日历绘制 简单demo

    千次阅读 2015-08-22 16:32:25
    canvas绘制本月日历,效果如下 html,body{ margin :0 0; padding: 0 0; width: 100%; height: 100%; } var canvas = document.getElementById("cav"); var ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,593
精华内容 3,037
关键字:

html简单电子日历