欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

利用JS制作万年历的方法

程序员文章站 2022-04-29 07:59:13
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用js来实现在网页中展示一个与众不同万年历呢 1.html布局:

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用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贪吃蛇小组件实例代码

下一篇： vue 计时器组件的实现代码

推荐阅读