js手写日历插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日历</title>
  <style>
    table {
      width: 320px;
      background: #333;
      color: #fff
    }

    td,
    th {
      text-align: center;
      height: 30px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th colspan="2">
          <span class="left"><<</span>
        </th>
        <th colspan="3">
          <span class="time"></span>
        </th>
        <th colspan="2">
          <span class="right">>></span>
        </th>
      </tr>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody class="main"></tbody>
  </table>

  <script>
    // 获取元素
    let oTime = $(‘.time‘)
    let oMain = $(‘.main‘)
    let leftBtn = $(‘.left‘)
    let rightBtn = $(‘.right‘)
    let time = new Date()

    createCells() // 1. 创建表格
    getPrevDays(time) // 2.获取上一个月占的格子
    getCurrentDays(time); // 3.获取当前月所占的格子数
    minHead(time) // 4.设置头部显示的内容
    mainList(time, getPrevDays(time), getCurrentDays(time)) // 5. 月份显示的详情
    leftBtn.onclick = function() { // 6.绑定两边的按钮 实现上一月下一月
      time.setMonth(time.getMonth() - 1)
      getPrevDays(time)
      getCurrentDays(time)
      minHead(time)
      mainList(time, getPrevDays(time), getCurrentDays(time))
    }
    rightBtn.onclick = function() {
      time.setMonth(time.getMonth() + 1)
      getPrevDays(time)
      getCurrentDays(time)
      minHead(time)
      mainList(time, getPrevDays(time), getCurrentDays(time))
    }
    /*
     *
     * 获取元素
     *
    */
    function $(container) {
      return document.querySelector(container)
    }

    /*
    *
     * 创建表格
     *
    */
    function createCells() {
      for (var i=0; i<6; i++) {
        var tr = document.createElement(‘tr‘)
        for(var k=0; k<7; k++) {
          var td = document.createElement(‘td‘)
          tr.appendChild(td)
        }
        oMain.appendChild(tr)
      }
    }

    /*
    *
    * getPrevDays 获取上一个月 占的格子
    *
    */
    function getPrevDays(time) {
      var time = new Date(time) // 拷贝一份时间 防止修改时间引发冲突
      var list = [] // 上一个月所占的天数
      time.setDate(1) // 设置为当月第一天方便查看是星期几
      var day = time.getDay() == 0 ? 7 : time.getDay() // 如果是0 说明需要空出来一行 显示上个月的时间
      // 获取上一个月的天数
      time.setDate(0)
      var maxDay = time.getDate()
      for(var i=maxDay; i> (maxDay-day); i--) {
        list.push(i)
      }
      list.reverse()
      return list
    }

    /*
    * 获取当月所占的格子
    */
    function getCurrentDays(time) {
      // debugger
      var time = new Date(time) // 拷贝一份时间 防止修改时间造成全局时间冲突
      time.setDate(1) // 确保不会出现跨越现象 比如1.31跑到三月份去了
      var list = []
      // 下面的代码是为了获取当前月的信息
      time.setMonth(time.getMonth() + 1)
      console.log(time.getMonth())
      time.setDate(0) // 修改日期0
      var maxDay = time.getDate() // 获取当月的天数
      for(var i=1; i<=maxDay; i++) {
        list.push(i)
      }
      return list
    }

    /*
    * minHead 设置头部的显示
    */
    function minHead(time) {
      // oTime.innerHTML = time.getFullYear() + ‘年‘ + time.getMonth() + 1
      oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月`
    }

    function getYMD(time) {
      time = time || new Date()
      return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
    }

    /*
    * 月份显示的详情 上个月最后 + 本月 + 下个月开始的
    */
    function mainList(time, prevDays, currentDays) {
      var beforeCount = prevDays.length + currentDays.length
      var cellList = document.querySelectorAll(‘td‘)
      // 1. 展示上个月的
      for(var i=0; i<prevDays.length; i++) {
        cellList[i].innerHTML = `<font color=‘red‘>${prevDays[i]}</font>`
      }
      // 2. 展示本月的
      for(var i=0; i<currentDays.length; i++) {
        if (getYMD() === getYMD(time) && currentDays[i] == time.getDate()) { // 如果是今天 展示另外一种颜色
          cellList[i + prevDays.length].innerHTML = `<font color=‘yellow‘>${currentDays[i]}</font>`
        } else {
          cellList[i + prevDays.length].innerHTML = `<font color=‘white‘>${currentDays[i]}</font>`
        }

      }
      // 3. 展示下个月的
      for(var i=1; i< (42-beforeCount); i++) {
        cellList[i + beforeCount - 1].innerHTML = `<font color=‘red‘>${i}</font>`
      }
    }
  </script>
</body>
</html>

原文地址:https://www.cnblogs.com/cengjingdeshuige/p/12560673.html

时间: 2024-10-29 05:00:47

js手写日历插件的相关文章

js手写&#39;Promise&#39;

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.

基于vue手写tree插件那点事

目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对于用户来说是不友好的.今天我们自己手写一个Tree插件. iview提供的控件 iview已经很成熟了,如果说我写的控件和iview提供的控件谁更好,那肯定是选择iview , 手写控件只是为了更好的了解vue父子组件之间的通信的. 请读者还是不要拿我的控件和iview或者其他第三方的去对比.下面我

轮播图--JS手写

轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jq

使用js手写兼容jquery的ajax

jquery-ajax.js var $ = new function() { this.ajax = function(param) { if(!param){return;} // compatible all new browsers and IE5 and IE6 var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); if (xml

浅谈时钟的生成(js手写代码)

在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j

js手写一个实现一个简单的promise__小前端chenMr

1.首先来看一下promise常用场景 function chenPromise (arg) { return new Promise (resolve, reject) { if () { doSomeThing(arg) resolve(val) } else { reject(val) } } }chenPromise(arg).then(((val) => {}, (err) =>{}) 2.了解promise状态 1.常规分三种:PENDING, RESOLVED, REJECTED

简单的 js手写轮播图

html: <div class="na1">   <div class="pp">    <div class="na">     <img class="dd" src="../img/shouji/1.jpg">    </div>    <div class="na">     <img class=&

Javascript知识汇总------面向对象手写弹窗插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js手写数组Api--模拟实现常见数组Api

数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使用方看这里 API详细用法本文记录了数组中的 every,filter, find , indexOf, forEach, from, includes, isArray, map, reduce,slice,splice, sort这些个API的实现,如有不当,欢迎指出. Every 定义和用法: