欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)簡(jiǎn)易日歷效果

 更新時(shí)間:2021年01月25日 08:55:41   作者:一夜醒來(lái)頭禿了  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)易日歷效果的具體代碼,供大家參考,具體內(nèi)容如下

css

* {
  margin: 0;
  padding: 0;
  list-style: none;
 }

 #box {
  width: 280px;
  height: 360px;
  margin: 50px auto;
  background-color: black;
  color: aliceblue;
  line-height: 40px;
 }

 #header {
  height: 40px;
  color: aliceblue;
  line-height: 40px;
 }

 #header span {
  float: left;
  text-align: center;
  margin-top: 10px;
  line-height: 40px;
 }

 #prev,
 #next {
  width: 20%;
  line-height: 40px;
  cursor: pointer;
 }

 #current {
  width: 60%;
  line-height: 40px;
 }

 #week li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
 }

 #content li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
}

html

<div id="box">
 <div id="header">
  <span id="prev">上</span>
  <span id="current"></span>
  <span id="next">下</span>
 </div>
 <ul id="week">
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
 </ul>
 <ul id="content">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

js

var current = document.querySelector('#current');//月份name
 var prev = document.querySelector('#prev'); // 上個(gè)月
 var next = document.querySelector('#next'); // 下個(gè)月
 var content = document.querySelector('#content'); // 日期內(nèi)容

 // 上個(gè)月要顯示的天數(shù)
 // 求出本月第一天是星期幾
 // 求出上個(gè)月最大的天數(shù) 把日期設(shè)為0
 function getPrevDays(date) {
  var date = new Date(date);
  // 把日期設(shè)為第一天,為了獲取第一天是星期幾
  date.setDate(1);
  var week = date.getDay();
  // 把日期設(shè)為0,為了得到上個(gè)月的最后一天
  date.setDate(0);
  var maxDay = date.getDate();
  var list = [];
  // 遍歷紅色日期的范圍 push進(jìn)數(shù)組
  for (var i = maxDay - week + 1; i <= maxDay; i++) {
  list.push(i);
  }
  return list;
 }


 // 求本月的天數(shù)
 // 月份推到下個(gè)月
 // 日期設(shè)為0
 function getNowDays(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  var maxDay = date.getDate();
  // console.log(maxDay)
  var list = [];
  // 
  for (var i = 1; i <= maxDay; i++) {
  list.push(i)
  }
  return list;
 }



 // 下個(gè)月要顯示的天數(shù)
 function getNextDays(prevDays, nowDays) {
  var list = [];
  // 一頁(yè)日歷42天,42 - 上月天數(shù) - 這個(gè)月天數(shù) = 最后顯示剩余的下個(gè)月天數(shù)
  for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  list.push(i)
  }
  return list
 }

 var x = 1;
 // 封裝輸出日期內(nèi)容
 // x記錄點(diǎn)擊月份 根據(jù)月份 上面數(shù)組自動(dòng)獲取當(dāng)月要顯示的時(shí)間
 function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // console.log(arr2);
  var res = '';
  for (var i = 0; i < arr1.length; i++) {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

  for (var i = 0; i < arr2.length; i++) {
  res += '<li>';
  res += arr2[i];
  res += '</li>';
  }

  for (var i = 0; i < arr3.length; i++) {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // 三個(gè)數(shù)組輸出結(jié)果拼接起來(lái) 輸出
  return content.innerHTML = res;
 }




 // 輸出月份顯示
 var date = new Date();
 current.innerHTML = showMonth(new Date());
 // 月份
 function showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  return (mon + 1) + '月';
 }

 output(x);
 // 下個(gè)月
 next.onclick = function () {
  x++;
  // console.log(x);
  if (x > 12) {
  x = 1;
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

 // 上個(gè)月
 prev.onclick = function () {
  x--;
  console.log(x);
  if (x < 1) {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript中this的用法實(shí)踐分析

    javascript中this的用法實(shí)踐分析

    這篇文章主要介紹了javascript中this的用法,結(jié)合具體實(shí)例形式總結(jié)分析了javascript中this各種常見(jiàn)的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-07-07
  • 微信小程序網(wǎng)絡(luò)請(qǐng)求的封裝與填坑之路

    微信小程序網(wǎng)絡(luò)請(qǐng)求的封裝與填坑之路

    本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請(qǐng)求的封裝的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • javascript命名約定(變量?函數(shù)?類?組件)

    javascript命名約定(變量?函數(shù)?類?組件)

    這篇小文章主要是通過(guò)一些例子來(lái)介紹一些Javascript中一些關(guān)于命名變量,函數(shù),類或者是組件的通用約定,雖然這些規(guī)則并不是強(qiáng)制性的,但是呢,他們卻被一些JS社區(qū)所廣泛采用,所以,了解他們還是很有必要的
    2023-03-03
  • JavaScript必備的斷點(diǎn)調(diào)試技巧總結(jié)(推薦)

    JavaScript必備的斷點(diǎn)調(diào)試技巧總結(jié)(推薦)

    打斷點(diǎn)操作很簡(jiǎn)單,核心的問(wèn)題在于,斷點(diǎn)怎么打才能夠排查出代碼的問(wèn)題所在呢?下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript必備的斷點(diǎn)調(diào)試技巧,需要的朋友可以參考下
    2021-09-09
  • 使用JS解析excel文件的完整實(shí)現(xiàn)步驟

    使用JS解析excel文件的完整實(shí)現(xiàn)步驟

    解析excel文件是我們?nèi)粘i_發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue組件創(chuàng)建的三種方式小結(jié)

    vue組件創(chuàng)建的三種方式小結(jié)

    這篇文章主要介紹了vue組件創(chuàng)建的三種方式小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 關(guān)于刪除時(shí)的提示處理(確定刪除嗎)

    關(guān)于刪除時(shí)的提示處理(確定刪除嗎)

    在刪除時(shí)為了提醒用戶刪除數(shù)據(jù)的不可恢復(fù)一般都會(huì)有提示處理的,通常會(huì)使用js做到這一點(diǎn),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下
    2013-11-11
  • iphone safari不支持position fixed的解決方法

    iphone safari不支持position fixed的解決方法

    最近一直在做移動(dòng)web開發(fā),開發(fā)過(guò)程中遇到了許多問(wèn)題,mobile safari不支持position: fixed就是一件很頭疼的事情
    2012-05-05
  • 在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路

    在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路

    對(duì)前端工程師來(lái)說(shuō),跨瀏覽器的兼容性問(wèn)題一直是最頭疼的,測(cè)試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來(lái)比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.
    2010-03-03
  • JavaScript中為什么null==0為false而null大于=0為true(個(gè)人研究)

    JavaScript中為什么null==0為false而null大于=0為true(個(gè)人研究)

    今天閑來(lái)沒(méi)啥事,研究了一下有關(guān)“null”和“0”的關(guān)系。希望大家看完了能有所收獲,在此與大家分享下,希望也可以受益匪淺
    2013-09-09

最新評(píng)論