快捷導(dǎo)航

jquery實現(xiàn)簡單每周輪換的日歷

更新時間：2020年09月10日 16:51:45 作者：YangChaoYue1221

這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單每周輪換的日歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)簡單每周輪換日歷的具體代碼，供大家參考，具體內(nèi)容如下

先放出一張示例圖

在進入頁面時自動獲取本地時間并激活（示例為2020年9月8日），再點擊左按鈕時倒退一周，右按鈕前進一周。鼠標(biāo)點擊其中l(wèi)i標(biāo)簽時激活并在上方日期顯示。

一個很簡單的小日歷，主要是項目中經(jīng)常會使用到就單獨拿出來寫個demo。具體思路是，獲取當(dāng)前本地日期并推斷出周一和周日進而獲得本周全部的日期，真正存放的是一個長度為7的時間戳數(shù)組，只是顯示的是日期，因為我認為利用時間戳做大部分處理比較直接簡單。如果有更好思路的小伙伴歡迎批評。下面放出代碼。

HTML

<div id="app">
 <div class="title"></div>
 <div class="left"><</div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 <div class="right">></div>
</div>

CSS

<style>
 #app {
  width: 400px;
  height: 50px;
  margin: 200px auto;
  position: relative;
  color: darkgray;
 }
 .title {
  position: absolute;
  top: -50px;
  left: 0;
  width: 200px;
  height: 50px;
 }
 ul {
  list-style: none;
  background-color: blanchedalmond;
  width: 100%;
  display: block;
  padding: 0;
 }
 ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
 }
 .left {
  position: absolute;
  top: 0;
  left: -50px;
  font-size: 35px;
  cursor: pointer;
 }
 .right {
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 35px;
  cursor: pointer;
 }
 .on {
  color: darkorange;
 }
</style>

JS

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script>
 let now = new Date()
 let oneDay = 1000*60*60*24 // 一天的時間
 let timeArr = [] // 用來存儲每次循環(huán)真正時間戳的數(shù)組
 let onDate = now.getTime() // 當(dāng)前激活的日期（有且僅有一個）
 init()
 // 點擊后添加激活樣式
 $('ul li').on('click', function() {
  acton($(this).index())
 })
 $('.left').on('click', function() {
  changeUl(0)
 })
 $('.right').on('click', function() {
  changeUl(1)
 })

 function init() {
  // 計算初始化時的周一和周天
  let monday = now.getTime() - (now.getDay() - 1)*oneDay
  let sunday = now.getTime() + (7 - now.getDay())*oneDay
  // 循環(huán)渲染本周
  for(let i = 0;i < 7;i++) {
  let nowDate = monday + oneDay * i
  $('ul li').eq(i).text(new Date(nowDate).getDate())
  timeArr.push(nowDate)
  if (nowDate === now.getTime()) { // 初始化時渲染標(biāo)簽并激活當(dāng)前本地日期和顯示
   acton(i)
  }
  }
 }
 
 // 判斷數(shù)組中是否存在該日期并激活
 function judon() {
  if (timeArr.indexOf(onDate) !== -1) {
  $('ul li').eq(timeArr.indexOf(onDate)).addClass('on').siblings().removeClass('on')
  } else {
  $('ul li').each(function() {
   $(this).removeClass('on')
  })
  }
 }

 // 點擊前后實現(xiàn)更換每周內(nèi)容,1是前進一周,0是后退一周
 function changeUl(type) {
  for (let n = 0;n < 7;n++) {
  timeArr[n] = type ? timeArr[n] + oneDay*7 : timeArr[n] - oneDay*7
  $('ul li').eq(n).text(new Date(timeArr[n]).getDate())
  }
  judon()
 }
 
 // 激活日期并顯示
 function acton(i) {
  let nowTitle = new Date(timeArr[i]);
  $('ul li').eq(i).addClass('on').siblings().removeClass('on');
  $('.title').text(`${nowTitle.getFullYear()}年${nowTitle.getMonth()+1}月${nowTitle.getDate()}日`);
  onDate = timeArr[i]
 }
</script>

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

您可能感興趣的文章: