原生js万年历Calendar制作（date对象的运用）

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量583 收藏 2
点赞数 1
文章标签： javascript 前端 ViewUI
原文链接：https://my.oschina.net/u/3256201/blog/835462
版权

毕竟还是前端菜鸟！代码写了就忘\ue411,写博客温故而知新还是比较重要的，今天回顾下之前写的万年历！

首先页面布局:

<body>
<div id="calendar">
    <div id="header">
        <select name="" id="select_1">
        </select>
        <select name="" id="select_2">
        </select>
    </div>
    <ul>
        <li>星期日</li>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
    </ul>
    <ul></ul>
</div>
</body>

运用li标签的浮动来形成。

接下来就是重点啦！JavaScript的编写；

首先引入获取当月的天数的方法：

var FebDays = new Date(2017,2,0).getDate();

确定当月在日历中排多少行：

function getRow(_year,_mouth) {
      var date =new Date(_year,_mouth-1,1);
      var week =date.getDay();
      var days = new Date(_year,_mouth,0).getDate();
      var row =Math.ceil((days+week)/7);
      return row;
  }
getRow(2017,2) //可以获取到二月份行数

确定当月1号是星期几根据规律算出行数：

var date =new Date(_year,_mouth-1,1);
var week =date.getDay();
//行数(天数与星期之间的关系)
var row = Math.ceil((days+week)/7);

用dom操作获取到所要操作的节点：

   var tb = document.getElementById('calendar');      //在外部的大盒子
   var header = document.getElementById('header');    // select 选择年月的盒子
   var ul = tb.getElementsByTagName('ul')[1];         // 放日期li的盒子
   var lis =ul.getElementsByTagName('li');            // 日期盒子
   var select_1 = document.getElementById('select_1');// 选择年份
   var select_2 = document.getElementById('select_2');// 选择月份
   var now =new Date();                               // 当前时间
   var nowYear =now.getFullYear();                    // 当前年份
   var nowMouth =now.getMonth()+1;                    // 当前月份

编写创建日历的函数：

function createCalender(_year,_mouth) {
       var date =new Date(_year,_mouth-1,1);
       var now = new Date();
       var nowdate = now.getDate();
       var row =getRow(_year,_mouth);
       var week =date.getDay();
       var days = new Date(_year,_mouth,0).getDate();
       for(var i=0;i<row;i++){
           for(var j = 0;j < 7;j++){
               var li = document.createElement('li');
                   //第一行会有空白替代，因为1号有可能不是星期天
                   if( j< week && i === 0){
                       li.innerHTML =' ';
                   }else{
                       if((i*7+j+1)-week<=days){
                       li.innerHTML =(i*7+j+1)-week;
                       }
                   }
                  //选中当天改变样式
               if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

                   li.style.backgroundColor = 'orange';
                   li.style.color = '#fff';
               }
                 //将创建的天数li盒子插入到ul父盒子
               ul.appendChild(li);
           }
       }
   }

年份和月份的下拉列表生成函数：

function createSelect() {
        var now =new Date();
        for(var i=1995;i<=2100;i++){
            var options_year = document.createElement('option');
            options_year.innerHTML = i;
            select_1.appendChild(options_year);
        }
        for(var j =1;j<=12;j++){
            var options_mouth = document.createElement('option');
            options_mouth.innerHTML = j+'月';
            select_2.appendChild(options_mouth);
        }
        select_1.value =now.getFullYear();
        select_2.value =now.getMonth()+1+'月';
    }

当下拉列表年月改变时的函数:

function changeValue() {
        createCalender(nowYear,nowMouth);
        var value;
        select_1.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(this.value,value);
        }
        select_2.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(select_1.value,value);

        }
    }
    function removeUlchild() {
        while(ul.hasChildNodes()){
            ul.removeChild(ul.lastChild);
        }
    }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
       #canlendar{
           width: 700px;
           border:1px solid #000;
           font-family: '楷体';
           margin:50px auto;
           overflow: hidden;
       }
        #canlendar ul{
            width: 100%;
        }
       #canlendar li{
           width: 100px;
           height: 80px;
           line-height:80px;
           text-align: center;
           border-radius: 50%;
           float: left;
       }
        #canlendar>#header{
            width: 100%;
            height: 25px;
            padding-top:25px;
        }
        #canlendar>#header>select{
            outline: none;
            width: 100px;
            border:0;
            padding-left: 25px;
        }

    </style>
</head>
<body>
<div id="canlendar">
    <div id="header">
        <select name="" id="select_1">
        </select>
        <select name="" id="select_2">
        </select>
    </div>
    <ul>
        <li>星期日</li>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
    </ul>
    <ul></ul>
</div>
</body>
</html>
<script>
 
   var tb = document.getElementById('canlendar');
   var header = document.getElementById('header');
   var ul = tb.getElementsByTagName('ul')[1];
   var lis =ul.getElementsByTagName('li');
   var select_1 = document.getElementById('select_1');
   var select_2 = document.getElementById('select_2');
   var now =new Date();
   var nowYear =now.getFullYear();
   var nowMouth =now.getMonth()+1;
    changeValue();
    createSelect();
    function createCalender(_year,_mouth) {
       var date =new Date(_year,_mouth-1,1);
       var now = new Date();
       var nowdate = now.getDate();
       var row =getRow(_year,_mouth);
       var week =date.getDay();
       var days = new Date(_year,_mouth,0).getDate();
       for(var i=0;i<row;i++){
           for(var j = 0;j < 7;j++){
               var li = document.createElement('li');

                   if( j< week && i === 0){
                       li.innerHTML =' ';
                   }else{
                       if((i*7+j+1)-week<=days){
                       li.innerHTML =(i*7+j+1)-week;
                       }
                   }
               if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

                   li.style.backgroundColor = 'orange';
                   li.style.color = '#fff';
               }
               ul.appendChild(li);
           }
       }
   }
  function getRow(_year,_mouth) {
      var date =new Date(_year,_mouth-1,1);
      var week =date.getDay();
      var days = new Date(_year,_mouth,0).getDate();
      var row =Math.ceil((days+week)/7);
      return row;
  }
    function createSelect() {
        var now =new Date();
        for(var i=1995;i<=2100;i++){
            var options_year = document.createElement('option');
            options_year.innerHTML = i;
            select_1.appendChild(options_year);
        }
        for(var j =1;j<=12;j++){
            var options_mouth = document.createElement('option');
            options_mouth.innerHTML = j+'月';
            select_2.appendChild(options_mouth);
        }
        select_1.value =now.getFullYear();
        select_2.value =now.getMonth()+1+'月';
    }
    function changeValue() {
        createCalender(nowYear,nowMouth);
        var value;
        select_1.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(this.value,value);
        }
        select_2.onchange = function () {
            removeUlchild();
            value = select_2.selectedIndex+1;
            createCalender(select_1.value,value);

        }
    }
    function removeUlchild() {
        while(ul.hasChildNodes()){
            ul.removeChild(ul.lastChild);
        }
    }
</script>

 

转载于:https://my.oschina.net/u/3256201/blog/835462

chujiang3269
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 万年历农历转阳历 方法_JS实现带阴历的日历功能详解
weixin_30117665的博客
01-14 1421
本文实例讲述了JS实现带阴历的日历功能。分享给大家供大家参考，具体如下：工作中要写一个带阴历的日历，自己调研了怎么做日历。一.表格行数问题既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定...
Android 万年历日期选择器
小小随笔屋
11-27 1974
先自定义日历视图 CalendarView,直接上代码了package com.liu.pickerview;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Date;
原生JS实现日历（附带源码）
weixin_54345600的博客
08-16 378
Calendar???? 效果展示 ???????? 展示地址 ???? 源代碼 ???? ???? 效果展示 ???? ???? 展示地址 ???? 源代碼 ???? 展示地址：http://xiaomi.3vhost.net。 源代碼：https://github.com/Xiaomi-tx/xiaoMi-Calendar。
推荐开源项目：calendar.js - 灵活的日期管理与日历功能
gitblog_00017的博客
06-21 431
推荐开源项目：calendar.js - 灵活的日期管理与日历功能 项目地址:https://gitcode.com/ramalho/calendar.js 1、项目介绍 calendar.js 是一个受Python标准库中calendar模块启发的JavaScript库，提供了一种优雅的方式来处理和展示月份的日历数据。它可以帮助开发者构建出整洁的日历视图，支持自定义日期和周的显示格式，非常适合用...
js万年历，麻雀虽小五脏俱全，由原生js编写
didengshi9188的博客
03-25 643
对于前端来说，我们可能见到最多的就是各种各样的框架，各种各样的插件了，有各种各样的功能，比如轮播啊，日历啊，给我们提供了很大的方便，但是呢？我们在用别人这些写好的插件，框架的时候，有没有试着问一问自己？这些东西都是怎么写出来的？现在我们以一个万年历为例，介绍下怎么写出来，别人那个看似小巧的万年历，又蕴含着怎样的构思，我觉得这才是前端的魅力所在。 废话不多说了，先看看我做的效果图： ...
js实现的万年历显示
天易
06-15 9427
图片预览：（复制下面的源代码即可出现效果） js代码：  极品万年历   <!-- /***************************************************************************** 日期资料 ***************************************************
javascript实现万年历
menjoy的专栏
12-23 1202
/*****************************************************************************                                   日期资料*****************************************************************************/var
uniapp日历原生插件
qq_34631220的博客
09-09 1556
<template> <!-- 打卡日历页面 --> <view class='all'> <view class="bar"> <!-- 上一个月 --> <view class="previous" @click="handleCalendar(0)"> <button class="barbtn">上一月...
Java万年历连接MySQL_如何使用JDBC在数据库中插入当前日期和时间？
weixin_39810196的博客
03-07 560
MySQL数据库中的时间戳数据类型存储日，月，年，小时，分钟，秒，小数秒。使用此功能，您可以一次表示日期和时间。使用JDBC时，有两种插入/获取当前时间戳值的方法。使用数据库默认值作为日期。使用日历类的getTime()方法。数据库默认值使用以下查询创建一个名为sample的表以将时间戳存储在MySQL数据库中：CREATETABLESample(IdINT,Current_Time_St...
vue-calendar基于vue的日历插件
sxmfendou的博客
07-14 6268
vue-calendar-component 基于 vue 2.0 开发的轻量，高性能日历组件 占用内存小，性能好，样式好看，可扩展性强 原生 js 开发，没引入第三方库 效果 Install npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 1 2 Usage //vue文件中引入 import Calendar from 'v..
原生JS:Date对象全面解析
10-21
下面小编就为大家带来一篇原生JS:Date对象全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript原生对象之Date对象的属性和方法详解
10-24
主要介绍了JavaScript原生对象之Date对象的属性和方法详解,需要的朋友可以参考下
原生js万年历农历日期代码
11-10
以上是关于“原生js万年历农历日期代码”的核心知识点，实际开发过程中，可能还需要结合项目需求和用户体验进行更多的定制和优化。通过理解并掌握这些概念，开发者就能创建出功能完备且用户体验良好的万年历应用。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1137
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 171
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 598
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 717
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
JavaScript原生API指南：Navigator与Window对象详解
原生JavaScript完整版API参考手册是一份全面指南，涵盖了JavaScript核心语言中与浏览器环境交互的关键部分。手册首先介绍了Navigator对象，这是一个内置对象，提供了关于浏览器及其功能的详细信息。以下是一些重要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值