利用JS制作万年历的方法


Posted in Javascript onAugust 16, 2017

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢

1.HTML布局:

<div id="calendar">
  <div id="month_year">
    <select id="year"></select>年
    <select id="month"></select>月
  </div>
  <ul id="title">
    <li>星期日</li>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
  </ul>
  <ul id="datesUl"></ul>
</div>

1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;

2.在这个大的div中有三部分: 1. month_year 用以设置年月; 2.title 用以显示星期; 3.detesUl 用以显示具体的日期;

CSS样式:

*{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    #calendar{
      width: 700px;
      background-color: lightgray;
      margin: 20px auto;

    }
    #calendar::after{
      content: "";
      display: block;
      clear: both;
    }
    #month_year{
      width: 700px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    ul > li{
      float: left;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    #datesUl > li:empty{
      opacity: 0;
    }
    #datesUl > li:hover{
      background-color: lightblue;
    }

JS代码分析:

  1. 做一些初始化的处理,给俩个显示年月的选项卡中添加内容便于用户查找
  2. 构造一些我们要用到的函数: 如输入年月计算出这个月有几天,创建添加option及li的函数
<script>
  var yearSelect = document.getElementById('year');
  var monthSelect = document.getElementById('month');
  var datesUl = document.getElementById('datesUl');
  //初始化
  function init(){
    for(var year=1990;year<3000;year++){    //初始化俩个选项卡
      createOption(year,year,yearSelect);
    }
    for(var month=1;month<13;month++){
      createOption(month,month,monthSelect);
    }
    var now = new Date();            //获取当前的日期
    showSelect(now.getFullYear(),now.getMonth()+1);  //引用显示选项卡的函数

    showDates();                  //调用显示日期的函数

    yearSelect.onchange=function(){         //当选项卡改变时
      showDates();
    };
    monthSelect.onchange=function(){
      showDates();
    }
  }
  init();            //调用初始化函数   
  //创建option的函数
  function createOption(text,value,parent){
    var option = document.createElement('option');
    option.innerHTML = text;
    option.value = value;
    parent.appendChild(option);
  }
  //获取当前的日期并显示在选项卡中
  function showSelect(year,month){
    yearSelect.value = year;
    monthSelect.value = month;
  }
  //获取选择的年月的第一天是星期几
  function getDays(year,month){
    var d = new Date(year,month,1);
    return d.getDay();
  }
  //根当前的select中的年和月来显示日期
  function showDates(){
    datesUl.innerHTML= "";
    var year = yearSelect.value;
    var month = monthSelect.value;
    //创建空的li
    for(var i=0;i<getDays(year,month);i++){
      createLi("",datesUl);
    }
    //创建有日期的li
    for(var j=1;j<=getDatesOfMonth(year,month);j++){
      createLi(j,datesUl);
    }
  }
  //创建li并添加至对应的容器
  function createLi(text,parent){
    var li = document.createElement('li');
    li.innerHTML = text;
    parent.appendChild(li);
  }
  //创建一个输入年月计算出这个月有几天的函数
  function getDatesOfMonth(year,month){
    var d = new Date(year,month,0);
    return d.getDate();
  }
</script>

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

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 #Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
微信小程序删除处理详解
Aug 16 #Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 #Javascript
微信小程序实现根据字母选择城市功能
Aug 16 #Javascript
You might like
简单的过滤字符串中的HTML标记
2006/12/25 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
详解python里的命名规范
2018/07/16 Python
Python中turtle库的使用实例
2019/09/09 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
空气环保标语
2014/06/12 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android