利用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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
js字符编码函数区别分析
Jun 05 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
js子页面获取父页面数据示例
May 15 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
Angular浏览器插件Batarang介绍及使用
Feb 07 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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
原生javascript实现隔行换色
2015/01/04 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python pass 语句使用示例
2014/03/11 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python format 格式化输出方法
2018/07/16 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
2014植树节活动总结
2014/03/11 职场文书
医师定期考核实施方案
2014/05/07 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android