利用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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
javascript 原型继承介绍
Aug 30 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
详解Vue SPA项目优化小记
Jul 03 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 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/10/09 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
原生js生成图片验证码
2020/10/11 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
大专生自我评价
2014/01/28 职场文书
电子商务求职信
2014/06/15 职场文书
党员思想汇报材料
2014/12/19 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB