js+html制作简单日历的方法

新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑

代码:

<!doctype html>
<html>

 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
   * {margin: 0;padding: 0}
   #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
   #calendar h4 {text-align: center;margin-bottom: 10px}
   #calendar .a1 {position: absolute;top: 20px;left: 20px;}
   #calendar .a2 {position: absolute;top: 20px;right: 20px;}
   #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
   #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
   #calendar .dateList {overflow: hidden;clear: both}
   #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
   #calendar .dateList .ccc {color: #ccc;}
   #calendar .dateList .red {background: #F90;color: #fff;}
   #calendar .dateList .sun {color: #f00;}
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
   $(function() {

    //必要的数据
    //今天的年 月 日 ;本月的总天数;本月第一天是周几???
    var iNow=0;

    function run(n) {

     var oDate = new Date(); //定义时间
     oDate.setMonth(oDate.getMonth()+n);//设置月份
     var year = oDate.getFullYear(); //年
     var month = oDate.getMonth(); //月
     var today = oDate.getDate(); //日

     //计算本月有多少天
     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

     //判断闰年
     if(month == 1) {
      if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
       allDay = 29;
      }
     }

     //判断本月第一天是星期几
     oDate.setDate(1); //时间调整到本月第一天
     var week = oDate.getDay(); //读取本月第一天是星期几

     //console.log(week);
     $(".dateList").empty();//每次清空
     //插入空白

     for(var i = 0; i < week; i++) {
      $(".dateList").append("<li></li>");
     }

     //日期插入到dateList
     for(var i = 1; i <= allDay; i++) {
      $(".dateList").append("<li>" + i + "</li>")
     }
     //标记颜色=====================
     $(".dateList li").each(function(i, elm){
      //console.log(index,elm);
      var val = $(this).text();
      //console.log(val);
      if (n==0) {
       if(val<today){
       $(this).addClass('ccc')
      }else if(val==today){
       $(this).addClass('red')
      }else if(i%7==0 || i%7==6 ){
       $(this).addClass('sun')
      }
      }else if(n<0){
       $(this).addClass('ccc')
      }else if(i%7==0 || i%7==6 ){
       $(this).addClass('sun')
      }
     });

     //定义标题日期
     $("#calendar h4").text(year + "年" + (month + 1) + "月");
    };
    run(0);

    $(".a1").click(function(){
     iNow--;
     run(iNow);
    });

    $(".a2").click(function(){
     iNow++;
     run(iNow);
    })
   });
  </script>
 </head>

 <body>
  <div id="calendar">
   <h4>2013年10月</h4>
   <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
   <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
   <ul class="week">
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>

   </ul>
   <ul class="dateList"></ul>
  </div>

 </body>

</html>

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-06-25

php+javascript的日历控件

复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

基于javascript编写简单日历

一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推.所以如果一个月的1号是星期

js css+html实现简单的日历

web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

纯JS实现简单的日历

本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下 封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(y

纯js简单日历实现代码

复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

js日历控件(可精确到分钟)

.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #

JS日历 推荐

两年前写过一个日历,可是兼容性不好. 这次重新写了一次.  兼容多种浏览器  了解了不少东东,特别是对于W3C标准化.  如 FF和IE 对box模型的理解不同  box.style{width:100;border 1px;}  ie理解 为 box.width = 100  ff 理解 为 box.width = 100 + 1*2 = 102  可以使用这种方法使两种浏览器都可以正常浏览  box.style{width:100!important; width /**/:120px;bo

轻量级的原生js日历插件calendar.js使用指南

使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

JS实现一个简单的日历

主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

详解用Node.js写一个简单的命令行工具

本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标 在命令行输入自己写的命令,完成目标任务 命令行要求全局有效 命令行要求可以删除 命令行作用,生成一个文件,显示当前的日期 2. 代码部分 新建一个文件,命名为sherryFile 文件sherryFile的内容 介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r

js实现一个简单的MVVM框架示例

以前都是默默地看园子里的文章,猥琐的点赞,今天也分享一下自己用js实现的一个简单mvvm框架. 最初只做了自动绑定事件,后面又参考学习了vue,knouckout以及argular实现方式,以及结合自己做WPF的一些经验,增加了属性绑定,今天又稍微整理了下,完善了部分功能,把代码提交到了码云:https://gitee.com/zlj_fy/Simple-MVVM 先简单介绍下用法: <form class="form-horizontal" role="form&qu

vue.js做一个简单的编辑菜谱功能

先给大家展示下效果图,如果感觉不错,请参考实现代码 1.先获取门店下的所有菜品类型.菜品名称.菜品id(list),也就是最大数据量 this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = r

用JS实现一个简单的打砖块游戏

话不多说,先看看效果: HTML架构部分 <!-- HTML结构 --> <div class="content"> <div class="game"></div> <div class="container"> <h2>打砖块小游戏</h2> <hr /> <center> <button id="start"

使用Node.js实现一个简单的FastCGI服务器实例

本文是我最近对Node.js学习过程中产生的一个想法,提出来和大家一起探讨. Node.js的HTTP服务器 使用Node.js可以非常容易的实现一个http服务,最简的例子如官方网站的示例: 复制代码 代码如下: var http = require('http');http.createServer(function (req, res) {    res.writeHead(200, {'Content-Type': 'text/plain'});    res.end('Hello Wo

使用原生js编写一个简单的框选功能方法

今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述 鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码 怎么实现 二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了

js实现一个简单的数字时钟效果

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8

js编写一个简单的产品放大效果代码

购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能: 1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理: 1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 ----------------------------------------------

使用js实现一个简单的滚动条过程解析

当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算 2.滚动条 bar 的 top 位置 和 内容scrollTop 的关系. 思路: 使用嵌套的布局,如下: <!DOCTYPE html> <html> <head> <meta charset="