JavaScript代码实现简单日历效果

本文实例为大家分享了JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下

效果如下：

代码：

!DOCTYPE htML>
    html lang="en">
    head>
     meta charset="UTF-8">
     meta http-equiv="X-UA-Compatible" content="IE=Edge">
     meta name="viewport" content="width=device-width, inITial-scale=1.0">
     title>
    Document/title>
     style>
  * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
  }
    #box {
       width: 400px;
       height: 502px;
       border: 2px solid orange;
       margin: 50px auto;
       font-Size: 48px;
       text-align: center;
  }
    #ym {
       height: 100px;
       line-height: 100px;
  }
    #d {
       height: 200px;
       line-height: 200px;
       background-color: orange;
       font-size: 72px;
  }
    #w {
       height: 100px;
       line-height: 100px;
  }
    #hms {
       height: 100px;
       line-height: 100px;
  }
     /style>
    /head>
    body>
     div id="box">
      div id="ym">
    /div>
      div id="d">
    /div>
      div id="w">
    /div>
      div id="hms">
    /div>
     /div>
     script>
      //调用 getDateAndTime方法  getDateAndTime();
      //启动定时器，调用 getDateAndTime方法  window.setInterval(getDateAndTime, 1000);
  function getDateAndTime() {
       //获取系统当前的日期时间   VAR date = new Date();
       //提取日期时间构成的元素   var year = date.getFullYear();
       var month = date.getMonth() + 1;
       var day = date.getDate();
       var week = date.getDay();
       var hour = date.getHours();
       var minute = date.getMinutes();
       var second = date.getSeconds();
   //处理week的格式   switch (week) {
        case 0:     week = '星期日';
         break;
        case 1:     week = '星期一';
         break;
        case 2:     week = '星期二';
         break;
        case 3:     week = '星期三';
         break;
        case 4:     week = '星期四';
         break;
        case 5:     week = '星期五';
         break;
        case 6:     week = '星期六';
         break;
   }
   //定义函数处理时分秒的格式   function formatHMS(time) {
    if (time  10) {
         return '0' + time;
    }
 else {
         return time;
    }
   }
       //获取页面元素   var ym = document.getElementById('ym');
       var d = document.getElementById('d');
       var w = document.getElementById('w');
       var hms = document.getElementById('hms');
       //将日期时间写入到页面   ym.innerHTML = year + '年' + month + '月';
       d.innerHTML = day;
       w.innerHTML = week;
       hms.innerHTML = hour + '时' + minute + '分' + second + '秒';
  }
     /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js css+html实现简单的日历
• 轻量级的原生js日历插件calendar.js使用指南
• JS学习之一个简易的日历控件
• Vue.js创建Calendar日历效果
• JS日历 推荐
• 纯js简单日历实现代码
• js编写当天简单日历效果【实现代码】
• js日历控件（可精确到分钟）
• @L_304_8@
• 简约JS日历控件 实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！