css+html实现简单的日历-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

css+html实现简单的日历

不言

Jun 05, 2018 pm 02:31 PM

js kalendar

这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。

html
html部分比较简单，声明一个p，具体的html用javascript生成。整体内容大概是这样的：

<!doctype html>
<html>
<head>
  <meta charset=&#39;utf-8&#39;>
  <link rel=&#39;stylesheet&#39; href=&#39;外部的css文件路径&#39; />  
  <title>demo</title>
</head>
<body>
  <p class=&#39;calendar&#39; id=&#39;calendar&#39;></p>
  <script type=&#39;text/javascript&#39; src=&#39;外部的javascript文件路径&#39;></script>
</body>
</html>

Salin selepas log masuk

css

/* 整体设置 */
*{margin:0px;padding:0px;}

/**
 * 设置日历的大小
 */
.calendar{
  width: 240px;
  height: 400px;
  display: block;
}

/**
 * 设置日历顶部盒子
 */
.calendar .calendar-title-box{
  position: relative;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align:center;
  border-bottom: 1px solid #ddd;
}

/**
 * 设置上个月的按钮图标
 */
.calendar .prev-month {
  position: absolute;
  top: 12px;
  left: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: 0px;
  border-top: 6px solid transparent;
  border-right: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}

/**
 * 设置下个月的按钮图标
 */
.calendar .next-month {
  position: absolute;
  top: 12px;
  right: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-right: 0px;
  border-top: 6px solid transparent;
  border-left: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}


/* 设置日历表格样式 */
.calendar-table{
  width: 100%;
  border-collapse: collapse;
  text-align:center;
}

/* 表格行高 */
.calendar-table tr{
  height: 30px;
  line-height: 30px;
}

/* 当前天 颜色特殊显示 */
.currentDay {
  color: red;
}

/* 本月 文字颜色 */
.currentMonth {
  color: #999;
}

/* 其他月颜色 */
.otherMonth{
  color: #ede;
}

Salin selepas log masuk

样式设置基本没什么课说的，一些简单的设置。比如特殊的是表示“上个月”、“下个月”的图标，采用的绝对定位、利用css中的border属性设置样式。

javascript Date对象
开始正式的js代码之前，需要先了解js中的Date对象，通过Date对象，可以获取到年月日时分秒以及时间戳等信息,

 var d1 = new Date();  // 获取当前系统时间 我现在的时间是 2016年4月25日 星期一
 d1.getFullYear();    // 获取年信息， 2016
 d1.getMonth();      // 获取月信息（从0开始 范围：0-11） 3
 d1.getDate();      // 获取天信息 此处结果：25
 d1.getDay();      // 获取星期信息 （0-6） 此处结果： 1

Salin selepas log masuk

也可以在初始化的时候直接设置年月日信息

 # 设置 2016年3月15日
 var d2 = new Date(2016, 2, 15);    // 月是从0开始计数， 需要减一
 d2.getFullYear();          // 2016
 d2.getMonth();            // 2
 d2.getDate();            // 15
 d2.toLocaleDateString();      // "2016/3/15" 证明设置正确

Salin selepas log masuk

日历中会涉及到每个月多少天之类的问题，在js中很简单，如果设置年月日的时候，超出当月，js会自动算成下个月的，例如4月只有30天，如果设置成31 日，获得的Date类型中自动会算成5月1日；如果设置成5月0日，js会处理成4月30日，那么5月-1日也就是4月29日

var d3 = new Date(2016, 3, 30);
d3.toLocaleDateString();      // "2016/4/30"
var d4 = new Date(2016, 3, 31);
d4.toLocaleDateString();      // "2016/5/1"
var d5 = new Date(2016, 3, 33);
d5.toLocaleDateString();      // "2016/5/3"
var d6 = new Date(2016, 4, 1);
d6.toLocaleDateString();      // "2016/5/1"
var d7 = new Date(2016, 4, 0);
d7.toLocaleDateString();      // "2016/4/30"
var d8 = new Date(2016, 4, -3);
d8.toLocaleDateString();      // "2016/4/27"

Salin selepas log masuk

javascript
了解了js中Date对象的基本用法，接下来就是代码实现部分了，整体思路是这样的：定义一个全局的dateObj变量，用来记录表格中需要显示的年月信息。标题中的内容根据dateObj中取，表格中的日期则中dateObj中取到年月对应的1号的所有信息，即可确定1号在表格第一行的位置，以此倒推上个月最后几天的数据、正推本月和下个月的数据。
具体步骤：
1.声明dateObj变量，并赋初值为当前系统时间
2.给calendar p中渲染html元素
3.通过dateObj获取当月1号的信息，并以此遍历出表格中所有日期
4.给上一月、下一月图标绑定事件

(function(){
  /*
   * 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
   */
  var dateObj = (function(){
    var _date = new Date();    // 默认为当前系统时间
    return {
      getDate : function(){
        return _date;
      },
      setDate : function(date) {
        _date = date;
      }
    };
  })();

  // 设置calendar p中的html部分
  renderHtml();
  // 表格中显示日期
  showCalendarData();
  // 绑定事件
  bindEvent();

  /**
   * 渲染html结构
   */
  function renderHtml() {
    var calendar = document.getElementById("calendar");
    var titleBox = document.createElement("p");  // 标题盒子 设置上一月 下一月 标题
    var bodyBox = document.createElement("p");  // 表格区 显示数据

    // 设置标题盒子中的html
    titleBox.className = &#39;calendar-title-box&#39;;
    titleBox.innerHTML = "<span class=&#39;prev-month&#39; id=&#39;prevMonth&#39;></span>" +
      "<span class=&#39;calendar-title&#39; id=&#39;calendarTitle&#39;></span>" +
      "<span id=&#39;nextMonth&#39; class=&#39;next-month&#39;></span>";
    calendar.appendChild(titleBox);    // 添加到calendar p中

    // 设置表格区的html结构
    bodyBox.className = &#39;calendar-body-box&#39;;
    var _headHtml = "<tr>" + 
              "<th>日</th>" +
              "<th>一</th>" +
              "<th>二</th>" +
              "<th>三</th>" +
              "<th>四</th>" +
              "<th>五</th>" +
              "<th>六</th>" +
            "</tr>";
    var _bodyHtml = "";

    // 一个月最多31天，所以一个月最多占6行表格
    for(var i = 0; i < 6; i++) {  
      _bodyHtml += "<tr>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
            "</tr>";
    }
    bodyBox.innerHTML = "<table id=&#39;calendarTable&#39; class=&#39;calendar-table&#39;>" +
              _headHtml + _bodyHtml +
              "</table>";
    // 添加到calendar p中
    calendar.appendChild(bodyBox);
  }

  /**
   * 表格中显示数据，并设置类名
   */
  function showCalendarData() {
    var _year = dateObj.getDate().getFullYear();
    var _month = dateObj.getDate().getMonth() + 1;
    var _dateStr = getDateStr(dateObj.getDate());

    // 设置顶部标题栏中的 年、月信息
    var calendarTitle = document.getElementById("calendarTitle");
    var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
    calendarTitle.innerText = titleStr;

    // 设置表格中的日期数据
    var _table = document.getElementById("calendarTable");
    var _tds = _table.getElementsByTagName("td");
    var _firstDay = new Date(_year, _month - 1, 1);  // 当前月第一天
    for(var i = 0; i < _tds.length; i++) {
      var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
      var _thisDayStr = getDateStr(_thisDay);
      _tds[i].innerText = _thisDay.getDate();
      //_tds[i].data = _thisDayStr;
      _tds[i].setAttribute(&#39;data&#39;, _thisDayStr);
      if(_thisDayStr == getDateStr(new Date())) {    // 当前天
        _tds[i].className = &#39;currentDay&#39;;
      }else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
        _tds[i].className = &#39;currentMonth&#39;;  // 当前月
      }else {    // 其他月
        _tds[i].className = &#39;otherMonth&#39;;
      }
    }
  }

  /**
   * 绑定上个月下个月事件
   */
  function bindEvent() {
    var prevMonth = document.getElementById("prevMonth");
    var nextMonth = document.getElementById("nextMonth");
    addEvent(prevMonth, &#39;click&#39;, toPrevMonth);
    addEvent(nextMonth, &#39;click&#39;, toNextMonth);
  }

  /**
   * 绑定事件
   */
  function addEvent(dom, eType, func) {
    if(dom.addEventListener) {  // DOM 2.0
      dom.addEventListener(eType, function(e){
        func(e);
      });
    } else if(dom.attachEvent){  // IE5+
      dom.attachEvent(&#39;on&#39; + eType, function(e){
        func(e);
      });
    } else {  // DOM 0
      dom[&#39;on&#39; + eType] = function(e) {
        func(e);
      }
    }
  }

  /**
   * 点击上个月图标触发
   */
  function toPrevMonth() {
    var date = dateObj.getDate();
    dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
    showCalendarData();
  }

  /**
   * 点击下个月图标触发
   */
  function toNextMonth() {
    var date = dateObj.getDate();
    dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
    showCalendarData();
  }

  /**
   * 日期转化为字符串， 4位年+2位月+2位日
   */
  function getDateStr(date) {
    var _year = date.getFullYear();
    var _month = date.getMonth() + 1;    // 月从0开始计数
    var _d = date.getDate();
    
    _month = (_month > 9) ? ("" + _month) : ("0" + _month);
    _d = (_d > 9) ? ("" + _d) : ("0" + _d);
    return _year + _month + _d;
  }
})();

Salin selepas log masuk

本例中并没有添加点击表格中日期时候的事件，可以在bindEvent函数中添加如下代码获取所点击日期的信息

var table = document.getElementById("calendarTable");
var tds = table.getElementsByTagName(&#39;td&#39;);
for(var i = 0; i < tds.length; i++) {
  addEvent(tds[i], &#39;click&#39;, function(e){
    console.log(e.target.getAttribute(&#39;data&#39;));
  });
}

Salin selepas log masuk

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7563

Tutorial CakePHP

1385

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Apakah yang perlu saya lakukan jika kalendar dwi skrin win11 tidak wujud pada monitor kedua? Jun 12, 2024 pm 05:47 PM

Alat penting untuk mengatur kerja dan rutin harian anda dalam Windows 11 ialah paparan masa dan tarikh dalam bar tugas. Ciri ini biasanya terletak di sudut kanan bawah skrin dan memberikan anda akses segera kepada masa dan tarikh. Dengan mengklik kawasan ini, anda boleh memaparkan kalendar anda, menjadikannya lebih mudah untuk menyemak janji temu dan tarikh yang akan datang tanpa perlu membuka apl berasingan. Walau bagaimanapun, jika anda menggunakan berbilang monitor, anda mungkin menghadapi masalah dengan ciri ini. Khususnya, semasa jam dan tarikh muncul pada bar tugas pada semua monitor yang disambungkan, keupayaan untuk mengklik tarikh dan masa pada monitor kedua untuk memaparkan kalendar tidak tersedia. Buat masa ini, ciri ini hanya berfungsi pada paparan utama - ia tidak seperti Windows 10, di mana mengklik mana-mana

Kalendar Win10 memaparkan nombor minggu Jan 04, 2024 am 08:41 AM

Ramai pengguna ingin menggunakan alat Kalendar Win10 untuk menyemak bilangan hari semasa, tetapi kalendar tidak memaparkan fungsi ini secara automatik, sebenarnya, kita hanya perlu menggunakan tetapan mudah untuk melihat bilangan terkumpul minggu tahun ini~paparan Kalendar Win10. minggu Tutorial tetapan digital: 1. Masukkan kalendar dalam carian di sudut kiri bawah desktop dan buka aplikasi. 2. Dalam aplikasi kalendar terbuka, klik ikon "gear" di sudut kiri bawah, dan tetapan akan muncul di sebelah kanan Kami mengklik "Tetapan Kalendar" 3. Teruskan dalam tetapan kalendar terbuka, cari "Nombor Minggu". dan kemudian tukar minggu Hanya laraskan pilihan nombor kepada "hari pertama dalam tahun". 4. Selepas melengkapkan tetapan di atas, klik "Minggu" untuk melihat statistik nombor minggu tahun ini.

Kalendar Outlook tidak menyegerak; Mar 26, 2024 am 09:36 AM

Jika kalendar Outlook anda tidak boleh disegerakkan dengan Kalendar Google, Pasukan, iPhone, Android, Zum, akaun Office, dll., sila lakukan langkah berikut untuk menyelesaikan isu tersebut. Apl kalendar boleh disambungkan kepada perkhidmatan kalendar lain seperti Kalendar Google, iPhone, Android, Microsoft Office 365, dsb. Ini sangat berguna kerana ia boleh menyegerak secara automatik. Tetapi bagaimana jika OutlookCalendar gagal disegerakkan dengan kalendar pihak ketiga Kemungkinan sebabnya mungkin memilih kalendar yang salah untuk penyegerakan, kalendar tidak kelihatan, gangguan aplikasi latar belakang, aplikasi Outlook atau aplikasi kalendar yang sudah lapuk, dsb. Pembetulan awal untuk kalendar Outlook tidak menyegerak

Tidak dapat membuka kalendar di penjuru kanan sebelah bawah win10 Dec 26, 2023 pm 05:07 PM

Beberapa rakan yang menggunakan sistem win0 telah menghadapi situasi di mana kalendar win10 tidak boleh dibuka Ini hanya masalah komputer biasa Ia boleh diselesaikan dalam tetapan privasi sistem win10. Di bawah Mari kita lihat. Penyelesaian kepada masalah bahawa kalendar tidak boleh dibuka di sudut kanan bawah win10 1. Klik Mula dalam sistem win10 → klik butang senarai program di atas → cari Pinyin (Bahasa Cina) R → Kalendar 2. Apabila menggunakannya buat kali pertama , acara baharu mungkin tidak dibuka (tetikus Jika anda condong ke atas, tidak akan ada biru tua yang dipilih), anda boleh menetapkannya dalam privasi. Klik ikon tiga bar di sudut kiri atas desktop → akan ada menu tetapan di bahagian bawah 3. Klik Privasi dalam antara muka pop timbul 4. Jika anda pernah menggunakan tetapan sebelum ini, anda boleh klik pada kiri

Apakah yang perlu saya lakukan jika tiada peringatan timbul untuk acara kalendar dalam Win10 Bagaimana untuk memulihkan jika peringatan acara kalendar hilang dalam Win10? Jun 09, 2024 pm 02:52 PM

Kalendar boleh membantu pengguna merekodkan jadual anda dan juga menetapkan peringatan Walau bagaimanapun, ramai pengguna bertanya apa yang perlu dilakukan jika peringatan acara kalendar tidak muncul dalam Windows 10? Pengguna boleh menyemak status kemas kini Windows dahulu atau mengosongkan cache Windows App Store untuk melaksanakan operasi. Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna analisis masalah peringatan acara kalendar Win10 yang tidak muncul. Untuk menambah acara kalendar, klik program "Kalendar" dalam menu sistem. Klik butang kiri tetikus pada tarikh dalam kalendar. Masukkan nama acara dan masa peringatan dalam tetingkap pengeditan, dan klik butang "Simpan" untuk menambah acara. Menyelesaikan masalah peringatan acara kalendar win10 tidak muncul

Tiada Tempoh Hilang Pejabat Pembelian: Peranti siri kalendar dan hari jadi baharu! Feb 29, 2024 pm 12:00 PM

Pejabat Pembelian yang Hilang akan dikemas kini pada pukul 11 pagi pada 28 Februari Pemain boleh pergi ke Taobao untuk mencari di Pejabat Pembelian dan memilih kategori kedai untuk dibeli Kali ini kami membawakan anda siri pesta ulang tahun MBCC dan peranti Kalendar Meja 2024 bersama-sama lihat butiran produk kali ini. Tiada Tempoh Hilang Pejabat Pembelian: Peranti siri kalendar dan hari jadi baharu! Terdapat sesuatu yang baru di Pejabat Perolehan yang Hilang! —Masa pra-jualan: 11:00 pada 28 Februari 2024 - 23:59 pada 13 Mac 2024. Alamat pembelian: Cari Taobao [Indefinite Lost Purchasing Office] dan pilih kategori [Kedai] untuk memasuki kedai untuk pembelian; pengenalan: Peranti baharu yang dikeluarkan kali ini ialah siri parti hari jadi MBCC dan peranti kalendar meja 2024 Sila klik pada imej yang panjang untuk mendapatkan butiran. Pejabat Pembelian memperkenalkan peranti baharu—pelajar MBCC

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Bagaimana untuk menyelesaikan masalah bahawa masa dalam win11 sentiasa tidak tepat? Tutorial pelarasan masa Win11 cepat menyelesaikan masalah masa yang tidak tepat Apr 19, 2024 am 09:31 AM

Jika komputer Windows 11 anda memaparkan masa yang salah, ia boleh menyebabkan banyak masalah dan malah menghalang anda daripada menyambung ke Internet. Malah, sesetengah aplikasi enggan dibuka atau dijalankan apabila sistem memaparkan tarikh dan masa yang salah. Jadi bagaimanakah masalah ini harus diselesaikan? Mari lihat di bawah! Kaedah 1: 1. Mula-mula kita klik kanan pada ruang kosong bar tugas di bawah dan pilih Tetapan Bar Tugas 2. Cari taskbarcorneroverflow3 di sebelah kanan dalam tetapan bar tugas, kemudian cari jam atau jam di atasnya dan pilih untuk menghidupkannya. Kaedah 2: 1. Tekan pintasan papan kekunci win+r untuk memanggil run, masukkan regedit dan tekan Enter untuk mengesahkan. 2. Buka Registry Editor dan cari HKEY di dalamnya

See all articles