利用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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 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 stream_context_create()作用和用法分析
2011/03/29 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
python删除特定文件的方法
2015/07/30 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python生成随机密码的方法
2017/06/16 Python
Python内存读写操作示例
2018/07/18 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
详解MindSpore自定义模型损失函数
2021/06/30 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫