利用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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
原生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
神族 Protoss 历史背景
2020/03/14 星际争霸
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
javascript 禁止复制网页
2009/06/11 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python实现字符串加密成纯数字
2019/03/19 Python
python实现打砖块游戏
2020/02/25 Python
浅析matlab中imadjust函数
2020/02/27 Python
包装类的功能、种类、常用方法
2012/01/27 面试题
会计应届生的自荐信
2013/12/13 职场文书
工程业务员岗位职责
2013/12/31 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
公民授权委托书
2014/10/15 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
网络营销实训总结
2015/08/03 职场文书
员工升职自我评价
2019/03/26 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Python的三个重要函数详解
2022/01/18 Python