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

微信小程序?qū)崿F(xiàn)日歷打卡

 更新時間:2022年08月29日 09:05:47   作者:PPAP__  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日歷打卡,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)日歷打卡的具體代碼,供大家參考,具體內(nèi)容如下

樣式比較簡單,要改自己改

let currentMonthDays = new Date(year,month,0).getDate() 
//獲取當前月份的天數(shù)
let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); 
//本月第一天是從星期幾開始的

首先要清楚以上兩個方法的意思
下面直接上代碼,邏輯很簡單

wxml

<view class="context">
<view class="top">
? <image src="../../img/left.png" bindtap="bindPreMonth"></image>
? <view>{{year}}年{{month}}月</view>
? <image src="../../img/right.png" bindtap="bindNextMonth"></image>
</view>

<view ?class="middle">
? <view wx:for="{{data_arr}}" wx:key="index" class="middle_num">
? ? {{item}}
? </view>
</view>

<view class="calen">

? <view wx:for="{{startWeek}}" wx:key="index" class="calen_blank"></view>
? <view wx:for="{{currentMonthDays}}"?
? class='{{index+1 == today ? "active": "calen_num"}}'?
? ? wx:key="index">
? {{index+1}}
? </view>
??
</view>

</view>

.js

Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? data_arr:["日","一","二","三","四","五","六"],
? ? year:"",
? ? month:"",
? ? today:2 //這是固定2號這天打開,連續(xù)幾天打卡就用數(shù)組就好了
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? let now = new Date()
? ? let year = now.getFullYear()
? ? // month獲取是從 0~11
? ? let month = now.getMonth() + 1
? ? this.setData({
? ? ? year,month
? ? })
? ? this.showCalendar()
? },

? showCalendar(){
? ? let {year,month} = this.data
? ? //以下兩個month已經(jīng)+1
? ? let currentMonthDays = new Date(year,month,0).getDate() //獲取當前月份的天數(shù)
? ? let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是從星期幾開始的
? ? this.setData({
? ? ? currentMonthDays,startWeek
? ? })
? },

? //上個月按鈕
? bindPreMonth(){
? ? let {year,month} = this.data
? ? //判斷是否是1月
? ? if(month - 1 >= 1){
? ? ? month = month - 1?
? ? }else{
? ? ? month = 12
? ? ? year = year - 1
? ? }
? ? this.setData({
? ? ? month,year
? ? })
? ? this.showCalendar()
? },

? //下個月按鈕
? bindNextMonth(){
? ? let {year,month} = this.data
? ? //判斷是否是12月
? ? if(month + 1 <= 12){
? ? ? month = month + 1?
? ? }else{
? ? ? month = 1
? ? ? year = year + 1
? ? }
? ? this.setData({
? ? ? month,year
? ? })
? ? this.showCalendar()
? }
})

.css

.context{
? width: 96%;
? background-color: antiquewhite;
? margin: 0 auto;
? padding: 10rpx;
}
.top{
? height: 80rpx;
? display: flex;
? justify-content: space-around;
}
.top image{
? height: 30rpx;
? width: 30rpx;
}
.middle{
? display: flex;
}
.middle_num{
? width: 14%;
? display: flex;
? justify-content: center;
? align-items: center;
}
.calen{
? display: flex;
? height: 400rpx;
? flex-wrap: wrap; /* 必要的時候拆行或拆列。 */
}
.calen_blank{
? width: 14%;
? height: 20%;
? background-color: pink;
}
.calen_num{
? width: 14%;
? height: 20%;
? display: flex;
? justify-content: center;
? align-items: center;
}
.active{
? background-color: rgb(89, 111, 238);
? width: 14%;
? height: 20%;
? display: flex;
? justify-content: center;
? align-items: center;
? border-radius: 40rpx;
}

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

相關文章

  • Js 獲取Gridview選中行的內(nèi)容操作步驟

    Js 獲取Gridview選中行的內(nèi)容操作步驟

    本文將介紹一下Js獲取Gridview選中行的內(nèi)容的過程及步驟:取得gridview中獲取選中行指定列的值.獲取鼠標點擊的元素等等,感興趣的朋友可以了解下,或許對你學習js方面知識有所幫助
    2013-02-02
  • JavaScript 七大技巧(二)

    JavaScript 七大技巧(二)

    我寫JavaScript代碼已經(jīng)很久了,都記不起是什么年代開始的了。本文給大家分享javascript七大技巧(二),對javascript技巧相關知識感興趣的朋友一起學習吧
    2015-12-12
  • JS實現(xiàn)超級好看的鼠標小尾巴特效

    JS實現(xiàn)超級好看的鼠標小尾巴特效

    這篇文章主要給大家介紹了關于JS實現(xiàn)超級好看的鼠標小尾巴特效的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • JS彈出窗口代碼大全(詳細整理)

    JS彈出窗口代碼大全(詳細整理)

    如何利用網(wǎng)頁彈出各種形式的窗口,我想大家大多都是知道些的,但那種多種多樣的彈出式窗口是怎么搞出來的,平時利用業(yè)余時間整理了一些,需要的朋友可以參考一下
    2012-12-12
  • 如何將一個String和多個String值進行比較思路分析

    如何將一個String和多個String值進行比較思路分析

    開發(fā)中我們經(jīng)常需要將一個String和多個String值進行比較。直覺反應是使用||符號連接多個===完成,感興趣的朋友可以了解下哈
    2013-04-04
  • javascript中undefined的本質(zhì)解析

    javascript中undefined的本質(zhì)解析

    這篇文章主要介紹了javascript中undefined的本質(zhì)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • JS模式之簡單的訂閱者和發(fā)布者模式完整實例

    JS模式之簡單的訂閱者和發(fā)布者模式完整實例

    這篇文章主要介紹了JS模式之簡單的訂閱者和發(fā)布者模式,以一個完整實例形式詳細分析了JS訂閱者和發(fā)布者模式基本實現(xiàn)技巧,需要的朋友可以參考下
    2015-06-06
  • JavaScript更改class和id的方法

    JavaScript更改class和id的方法

    JavaScript允許你更改元素的class或id。當你更改之后,瀏覽器會自動更新元素的樣式。
    2008-10-10
  • 微信小程序新手教程之頁面打開數(shù)量限制

    微信小程序新手教程之頁面打開數(shù)量限制

    這篇文章主要給大家介紹了關于微信小程序新手教程之頁面打開數(shù)量限制的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-03-03

最新評論