小程序?qū)崿F(xiàn)日歷打卡功能
更新時(shí)間：2022年08月28日 17:10:37 作者：maidu_xbd
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)日歷打卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)日歷打卡功能的具體代碼，供大家參考，具體內(nèi)容如下
一、效果圖展示
老慣例，先上效果圖
二、實(shí)現(xiàn)思路
1、日歷展示
例如下圖中：
2021月7月打卡日歷頁(yè)面，共35個(gè)日期數(shù)據(jù)，上月殘余4天+本月31天；
2021月6月打卡日歷頁(yè)面，共35個(gè)日期數(shù)據(jù)，上月殘余2天+本月30天+下月殘余3天；
2021月5月打卡日歷頁(yè)面，共42個(gè)日期數(shù)據(jù)，上月殘余6天+本月31天+下月殘余5天。
【結(jié)論】打卡日歷頁(yè)面存在展示35個(gè)或42個(gè)日期數(shù)據(jù)的情況，35個(gè)或42個(gè)日期數(shù)據(jù)=當(dāng)前顯示月所有日期數(shù)據(jù)+上月殘余尾部日期+下月殘余頭部日期。
計(jì)算出每個(gè)月的日期天數(shù)，獲取本月1號(hào)是周幾，上月殘余天數(shù)=本月1號(hào)的星期X的X數(shù)（比如，2021年7月1日是星期四，則上月殘余4天），假設(shè) a=35-本月天數(shù)-上月殘余天數(shù)。如果a>=0,則下月殘余天數(shù)=a;如果a<0，則下月殘余天數(shù)=7+a (比如2021年5月，35-37=-2;7+(-2)=5)
2、打卡功能
打卡實(shí)現(xiàn)的功能：可打卡的日期為今日日期或今日日期之前未打卡過(guò)的日期。
如圖：今日日期為綠色圓形背景，當(dāng)前點(diǎn)擊日期為橙色圓形背景；可打卡時(shí)，打卡按鈕背景為藍(lán)色，不可打卡時(shí)，打卡背景為灰色；√ 代表已打卡。
通過(guò)數(shù)據(jù)庫(kù)查詢當(dāng)前已打卡的數(shù)據(jù)，已打卡的數(shù)據(jù)需要設(shè)置打卡按鈕禁用標(biāo)志。打卡按鈕禁用的情況（1）頁(yè)面初始化時(shí)，未點(diǎn)擊任何日期（2）當(dāng)前點(diǎn)擊的日期在今天之后（3）當(dāng)前日期在今天之前但已打卡。
點(diǎn)擊打卡，記錄打卡日期并保存至數(shù)據(jù)庫(kù)。
三、代碼
1、數(shù)據(jù)庫(kù)數(shù)據(jù)
2、日歷組件
【calendar.wxml】
代碼里使用了WXS頁(yè)內(nèi)腳本，渲染“已打卡”的標(biāo)志（√）
<view class="calendar">
? <view class='tit'>
? ? <view class='pre' bindtap='gotoPreMonth'>{{'《'}}</view>
? ? <view class='current'>{{currentYear}}年{{currentMonth}}月</view>
? ? <view class='next' bindtap='gotoNextMonth'>{{'》'}}</view>
? </view>
? <view class='w100P showData'>
? ? <view class="week" style='color: #999'>日</view>
? ? <view class="week">一</view>
? ? <view class="week">二</view>
? ? <view class="week">三</view>
? ? <view class="week">四</view>
? ? <view class="week">五</view>
? ? <view class="week" style='color: #999'>六</view>
? </view>
? <view class='content'>
? ? <view wx:for="{{allArr}}" wx:key="index" class='itemData' data-current="{{item.month == 'current' ? '1' : '0'}}"
? ? ? data-day='{{item.date}}' bindtap='clickDate'>
? ? ? <view class="{{item.month == 'current' ? '' : 'gray'}}"
? ? ? ? style="height:44px;width:44px;line-height:30px;{{nowYear==currentYear&¤tMonth==nowMonth&&item.date==nowDate?'color:#fff;background:#33D4C5;border-radius:100px':''}};{{item.month == 'current'&&selectedYear==currentYear&&selectedMonth==currentMonth&&item.date==selectedDate?'color:#fff;background:orange;border-radius:100px':''}} ">
? ? ? ? {{item.date}}
? ? ? ? <view>
? ? ? ? ? <icon wx:if="{{item.month == 'current'&&dataProcess.filterDate(currentPunchCardDate,item.date)}}" class="icon" color="#F44336" type="success_no_circle" size="15"></icon>
? ? ? ? </view>
? ? ? </view>
? ? </view>
? </view>
? <view class="btn-wrapper" bindtap="gotoToday">
? ? <button class="btn">回今天</button>
? </view>
? <!-- wxs頁(yè)面內(nèi)腳本，在渲染層做數(shù)據(jù)處理 -->
? <wxs module="dataProcess">
? function filterDate(currentPunchCardDate,date){
? ? if(currentPunchCardDate.indexOf(date)!==-1){
? ? ? return true
? }
? }
? module.exports={
? ? filterDate:filterDate
? }
? </wxs>
</view>【calendar.wxss】
.calendar {
? width: 100%;
? background: #fff;
}
?
.pre,
.next {
? color: #33D4C5;
? text-align: center;
? line-height: 20px;
}
?
.calendar .tit {
? display: flex;
? justify-content: center;
? align-items: center;
? padding: 40rpx 0;
?
}
?
.current {
? font-size: 32rpx;
? color: #2A2A2A;
}
?
.calendar .tit .current {
? margin: 0 60rpx;
}
?
.showData {
? display: flex;
? justify-content: center;
? align-items: center;
? box-sizing: border-box;
? padding-left: 25rpx;
? padding-right: 25rpx;
}
?
.showData .week {
? width: 14%;
? height: 70rpx;
? line-height: 70rpx;
? text-align: center;
? flex-shrink: 0;
? font-size: 30rpx;
? color: #2A2A2A;
}
?
.calendar .content {
? display: flex;
? flex-wrap: wrap;
? box-sizing: border-box;
? padding-left: 25rpx;
? padding-right: 25rpx;
}
?
.calendar .content .itemData {
? width: 14.2%;
? height: 90rpx;
? line-height: 90rpx;
? flex-shrink: 0;
? font-size: 30rpx;
? color: #2A2A2A;
? text-align: center;
? display: flex;
? align-items: center;
? justify-content: center;
}
?
.calendar .content .icon {
? position: relative;
? top: -25rpx;
}
?
.calendar .content .gray {
? color: #999;
}
?
.currentSelected {
? color: #fff;
? background: #1CA2FC;
? border-radius: 100px;
}
?
.calendar .btn-wrapper {
? text-align: right;
? background-color: #fff;
? width: 100%;
? padding-bottom: 10rpx;
}
?
.calendar .btn-wrapper .btn {
? border: 1px solid #33D4C5;
? padding: 5rpx;
? width: 95rpx;
? font-size: 21rpx;
? color: #33D4C5;
? border-radius: 20rpx;
? margin-bottom: 15rpx;
? position: relative;
? left: calc(50% - 100rpx);
}【calendar.js】
Component({
? /**
? ?* 組件的屬性列表
? ?*/
?
? properties: {
? ? currentPunchCardDate: {
? ? ? type: Array,
? ? ? value: []
? ? },
? ? currentYear: { // 當(dāng)前頁(yè)面顯示的年
? ? ? type: Number,
? ? ? value: new Date().getFullYear()
? ? },
? ? currentMonth: { // 當(dāng)前頁(yè)面顯示的年月
? ? ? type: Number,
? ? ? value: new Date().getMonth() + 1
? ? },
? ? nowYear: { // 當(dāng)前年
? ? ? type: Number,
? ? ? value: new Date().getFullYear()
? ? },
? ? nowMonth: { // 當(dāng)前月
? ? ? type: Number,
? ? ? value: new Date().getMonth() + 1
? ? },
? ? nowDate: { // 當(dāng)前日
? ? ? type: Number,
? ? ? value: new Date().getDate()
? ? },
?
? },
?
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? currentMonthDateLen: 0, // 當(dāng)月天數(shù)
? ? preMonthDateLen: 0, // 當(dāng)月中，上月多余天數(shù)
? ? allArr: [], // 35個(gè)或42個(gè)日期數(shù)據(jù)=當(dāng)前顯示月所有日期數(shù)據(jù)+上月殘余尾部日期+下月殘余頭部日期
? ? nowDate: null,
? ? selectedDate: null, //當(dāng)前選擇日期
? ? selectedMonth: null, //當(dāng)前選擇月
? ? selectedYear: null, //當(dāng)前選擇年
? },
? // 用observers監(jiān)聽(tīng)properties的屬性值
? observers: {
? ? 'currentPunchCardDate': function (val) {
? ? ? console.log(val)
?
? ? }
? },
? // 在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行
? created() {},
? // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
? ready() {
? ? this.getAllArr()
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? // 獲取某年某月天數(shù)：下個(gè)月1日-本月1日?
? ? getDateLen(year, month) {
? ? ? let actualMonth = month - 1;
? ? ? let timeDistance = new Date(year, month) - new Date(year, actualMonth);
? ? ? return timeDistance / (1000 * 60 * 60 * 24);
? ? },
? ? // 獲取某月1號(hào)是周幾
? ? getFirstDateWeek(year, month) {
? ? ? // 0-6，0代表周天
? ? ? return new Date(year, month - 1, 1).getDay()
? ? },
? ? // 上月
? ? preMonth(year, month) {
? ? ? if (month == 1) {
? ? ? ? return {
? ? ? ? ? year: --year,
? ? ? ? ? month: 12
? ? ? ? }
? ? ? } else {
? ? ? ? return {
? ? ? ? ? year: year,
? ? ? ? ? month: --month
? ? ? ? }
? ? ? }
? ? },
? ? // 下月
? ? nextMonth(year, month) {
? ? ? if (month == 12) {
? ? ? ? return {
? ? ? ? ? year: ++year,
? ? ? ? ? month: 1
? ? ? ? }
? ? ? } else {
? ? ? ? return {
? ? ? ? ? year: year,
? ? ? ? ? month: ++month
? ? ? ? }
? ? ? }
? ? },
? ? // 獲取當(dāng)月數(shù)據(jù)，返回?cái)?shù)組
? ? getCurrentArr() {
? ? ? let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 獲取當(dāng)月天數(shù)
? ? ? let currentMonthDateArr = [] // 定義空數(shù)組
? ? ? if (currentMonthDateLen > 0) {
? ? ? ? for (let i = 1; i <= currentMonthDateLen; i++) {
? ? ? ? ? currentMonthDateArr.push({
? ? ? ? ? ? month: 'current', // 只是為了增加標(biāo)識(shí)，區(qū)分上下月
? ? ? ? ? ? date: i
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? ? this.setData({
? ? ? ? currentMonthDateLen
? ? ? })
? ? ? return currentMonthDateArr
? ? },
? ? // 獲取當(dāng)月中，上月多余的日期數(shù)據(jù)，返回?cái)?shù)組
? ? getPreArr() {
? ? ? let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 當(dāng)月1號(hào)是周幾 == 上月殘余天數(shù)）
? ? ? console.log("preMonthDateLen=", preMonthDateLen);
? ? ? let preMonthDateArr = [] // 定義空數(shù)組
? ? ? if (preMonthDateLen > 0) {
? ? ? ? let {
? ? ? ? ? year,
? ? ? ? ? month
? ? ? ? } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 獲取上月 年、月
? ? ? ? let date = this.getDateLen(year, month) // 獲取上月天數(shù)
? ? ? ? for (let i = 0; i < preMonthDateLen; i++) {
? ? ? ? ? preMonthDateArr.unshift({ // 尾部追加
? ? ? ? ? ? month: 'pre', // 只是為了增加標(biāo)識(shí)，區(qū)分當(dāng)、下月
? ? ? ? ? ? date: date
? ? ? ? ? })
? ? ? ? ? date--
? ? ? ? }
? ? ? }
? ? ? this.setData({
? ? ? ? preMonthDateLen
? ? ? })
? ? ? return preMonthDateArr
? ? },
? ? // 獲取當(dāng)月中，下月多余的日期數(shù)據(jù)，返回?cái)?shù)組
? ? getNextArr() {
? ? ? let nextMonthDateLen = 35 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天數(shù)
? ? ? console.log(" nextMonthDateLen=", nextMonthDateLen);
? ? ? let nextMonthDateArr = [] // 定義空數(shù)組
? ? ? if (nextMonthDateLen > 0) {
? ? ? ? for (let i = 1; i <= nextMonthDateLen; i++) {
? ? ? ? ? nextMonthDateArr.push({
? ? ? ? ? ? month: 'next', // 只是為了增加標(biāo)識(shí)，區(qū)分當(dāng)、上月
? ? ? ? ? ? date: i
? ? ? ? ? })
? ? ? ? }
? ? ? } else if (nextMonthDateLen < 0) {
? ? ? ? for (let i = 1; i <= (7 + nextMonthDateLen); i++) {
? ? ? ? ? nextMonthDateArr.push({
? ? ? ? ? ? month: 'next', // 只是為了增加標(biāo)識(shí)，區(qū)分當(dāng)、上月
? ? ? ? ? ? date: i
? ? ? ? ? })
? ? ? ? }
?
? ? ? }
? ? ? return nextMonthDateArr
? ? },
? ? // 整合當(dāng)月所有日期數(shù)據(jù)=上月殘余+本月+下月多余
? ? getAllArr() {
? ? ? let preArr = this.getPreArr()
? ? ? let currentArr = this.getCurrentArr()
? ? ? let nextArr = this.getNextArr()
? ? ? let allArr = [...preArr, ...currentArr, ...nextArr]
? ? ? this.setData({
? ? ? ? allArr
? ? ? })
? ? ? let sendObj = {
? ? ? ? currentYear: this.data.currentYear,
? ? ? ? currentMonth: this.data.currentMonth,
? ? ? ? currentDate: this.data.selectedDate,
? ? ? ? allArr: this.data.allArr,
? ? ? }
? ? ? // 向父組件發(fā)送數(shù)據(jù)
? ? ? this.triggerEvent('sendObj', sendObj)
?
? ? },
? ? // 點(diǎn)擊 上月
? ? gotoPreMonth() {
? ? ? let {
? ? ? ? year,
? ? ? ? month
? ? ? } = this.preMonth(this.data.currentYear, this.data.currentMonth)
? ? ? this.setData({
? ? ? ? currentYear: year,
? ? ? ? currentMonth: month,
? ? ? })
? ? ? this.getAllArr()
? ? },
? ? // 點(diǎn)擊 下月
? ? gotoNextMonth() {
? ? ? let {
? ? ? ? year,
? ? ? ? month
? ? ? } = this.nextMonth(this.data.currentYear, this.data.currentMonth)
? ? ? this.setData({
? ? ? ? currentYear: year,
? ? ? ? currentMonth: month,
? ? ? })
? ? ? this.getAllArr()
? ? },
? ? // 點(diǎn)擊日期
? ? clickDate(e) {
? ? ? var date = e.currentTarget.dataset.day;
? ? ? var current = e.currentTarget.dataset.current;
? ? ? if (current == 0) {
? ? ? ? if (date > 6) {
? ? ? ? ? // 點(diǎn)擊上月日期--去上個(gè)月
? ? ? ? ? var {
? ? ? ? ? ? year,
? ? ? ? ? ? month
? ? ? ? ? } = this.preMonth(this.data.currentYear, this.data.currentMonth)
? ? ? ? ? this.gotoPreMonth()
? ? ? ? } else {
? ? ? ? ? // 點(diǎn)擊下月
? ? ? ? ? var {
? ? ? ? ? ? year,
? ? ? ? ? ? month
? ? ? ? ? } = this.nextMonth(this.data.currentYear, this.data.currentMonth)
? ? ? ? ? this.gotoNextMonth()
? ? ? ? }
? ? ? } else {
? ? ? ? var year = this.data.currentYear;
? ? ? ? var month = this.data.currentMonth;
? ? ? }
? ? ? this.setData({
? ? ? ? selectedYear: year,
? ? ? ? selectedMonth: month,
? ? ? ? selectedDate: date,
? ? ? })
? ? ? console.log("當(dāng)前選擇日期", year, "-", month, "-", date);
? ? ? console.log(this.data.selectedDate);
? ? ? wx.nextTick(() => {
? ? ? ? this.getAllArr()
? ? ? })
?
? ? },
? ? // 回今天
? ? gotoToday() {
? ? ? this.setData({
? ? ? ? currentYear: this.data.nowYear,
? ? ? ? currentMonth: this.data.nowMonth,
? ? ? })
? ? ? this.getAllArr()
? ? }
? }
})3、打卡及統(tǒng)計(jì)
【calendarCard.wxml】
<view class="page-wrapper">
? <top-title toptitle="打卡日歷" backImgFlag="true"></top-title>
? <calendar bind:sendObj="getObj" currentPunchCardDate="{{punchCardDateArr}}"></calendar>
? <view class="btn-wrapper">
? ? <button class="btn" type="primary" disabled="{{ disabledFlag}}" bindtap="punchCard">打 卡</button>
? </view>
? <view class="record-wrapper">
? ? <view class="title">
? ? ? <image class="img" src="{{icon}}"></image> {{name}}打卡統(tǒng)計(jì)
? ? </view>
? ? <view class="record">
? ? ? <view class="record-item">
? ? ? ? <view class="top"><text class="num">{{monthDays}}</text> 天</view>
? ? ? ? <view class="bottom">本月堅(jiān)持天數(shù)</view>
? ? ? </view>
? ? ? <view class="record-item">
? ? ? ? <view class="top"><text class="num"> {{totalDays}}</text> 天</view>
? ? ? ? <view class="bottom">總共堅(jiān)持天數(shù)</view>
? ? ? </view>
? ? </view>
? </view>
</view>【calendarCard.wxss】
.page-wrapper {
? background-color: #fff;
? height: 100vh;
}
.page-wrapper .btn-wrapper .btn {
? width: 95vw;
? border-radius: 40rpx;
? height: 80rpx;
? font-size: 30rpx;
? background-color: #27d6f5;
? padding: 20rpx;
}
.page-wrapper .btn-wrapper .btn[disabled] {
? background-color: #e7e5e5;
}
.page-wrapper .record-wrapper {
? padding: 20rpx;
}
.page-wrapper .record-wrapper .title {
? color: #444;
? font-weight: bold;
}
.page-wrapper .record-wrapper .title .img {
? width: 60rpx;
? height: 60rpx;
? position: relative;
? top: 18rpx;
}
.page-wrapper .record-wrapper .record {
? display: flex;
? justify-content: space-around;
? margin-top: 20rpx;
}
.page-wrapper .record-wrapper .record .record-item {
? text-align: center;
? font-size: 24rpx;
? color: #a3a3a3;
}
.page-wrapper .record-wrapper .record .record-item .top {
? height: 80rpx;
? line-height: 80rpx;
? border-bottom: 1px solid #ececec;
? color: #333;
}
.page-wrapper .record-wrapper .record .record-item .top .num {
? font-size: 44rpx;
? font-weight: bold;
? color: #F44336;
}【calendarCard.js】
// miniprogram/pages/punchCard/calendarCard/calendarCard.js
Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? id: null,
? ? name: "",
? ? icon: "",
? ? disabledFlag: true,
? ? totalDays:0,
? ? monthDays:0,
? ? habitInfo: {},
? ? currentDate: null,
? ? currentMonth: null,
? ? currentYear: null,
? ? nowYear: new Date().getFullYear(),
? ? nowMonth: new Date().getMonth(),
? ? nowDate:new Date().getDate(),
? ? punchCardDateArr: [] //用于存放當(dāng)月打卡日期-日
?
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
? ? console.log(options);
? ? this.setData({
? ? ? id: options.id,
? ? ? name: options.name,
? ? ? icon: options.icon
? ? })
? ? var nowYear = new Date().getFullYear()
? ? var nowMonth = new Date().getMonth()
? ? wx.nextTick(() => {
? ? ? this.getHabitInfo(nowYear, nowMonth)
? ? })
? },
? // 獲取子組件的數(shù)據(jù)
? getObj(e) {
? ? console.log("獲取子組件的數(shù)據(jù)", e);
? ? this.setData({
? ? ? currentDate: e.detail.currentDate,
? ? ? currentMonth: e.detail.currentMonth,
? ? ? currentYear: e.detail.currentYear,
? ? })
? ? this.getHabitInfo(e.detail.currentYear, e.detail.currentMonth - 1)
? },
? // 獲取當(dāng)月的打卡數(shù)據(jù)
? getHabitInfo(year, month) {
? ? // 注意month范圍 0-11，0代表1月
? ? const db = wx.cloud.database()
? ? db.collection('habitList').where({
? ? ? _id:this.data.id,
? ? }).get().then(res => {
? ? ? // console.log("從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)[res]===", res);
? ? ? var dateTimeArr = res.data[0].dateTime
? ? ? var dateArr = []
? ? ? dateTimeArr.forEach((item) => {
? ? ? ? if (item.getFullYear() == year && item.getMonth() == month) {
? ? ? ? ? dateArr.push(item.getDate())
? ? ? ? }
? ? ? })
? ? ? console.log(year, month,this.data.currentDate);
? ? ? if (!this.data.currentDate ||(year==this.data.nowYear && month>this.data.nowMonth)||(year==this.data.nowYear && month==this.data.nowMonth &&this.data.currentDate>this.data.nowDate) ) {
? ? ? ? // 打卡按鈕禁用的情況（1）頁(yè)面初始化時(shí)，未點(diǎn)擊任何日期（2）當(dāng)前點(diǎn)擊的日期在今天之后
? ? ? ? var flag = true
? ? ? } else {
? ? ? ? // 打卡按鈕禁用的情況 （3）當(dāng)前日期已打卡
? ? ? ? var flag = dateArr.indexOf(this.data.currentDate) == -1 ? false : true
? ? ? }
?
? ? ? this.setData({
? ? ? ? habitInfo: res.data[0],
? ? ? ? punchCardDateArr: dateArr,
? ? ? ? disabledFlag: flag,
? ? ? ? totalDays:dateTimeArr.length,
? ? ? ? monthDays:dateArr.length
? ? ? })
?
? ? }).catch(err => {
? ? ? console.log(err);
? ? })
? },
? // 點(diǎn)擊打卡按鈕-打卡
? punchCard() {
? ? console.log(this.data.currentYear, this.data.currentMonth - 1, this.data.currentDate);
? ? var currentTime = new Date(this.data.currentYear, this.data.currentMonth - 1, this.data.currentDate)
? ? const db = wx.cloud.database()
? ? db.collection('habitList').doc(this.data.id).update({
? ? ? data: {
? ? ? ?dateTime:db.command.push(currentTime)
? ? ? },
? ? ? success: res => {
? ? ? ? wx.showToast({
? ? ? ? ? title: '打卡成功',
? ? ? ? })
? ? ? ? this.getHabitInfo(this.data.currentYear, this.data.currentMonth - 1)
? ? ? },
? ? ? fail: err => {
? ? ? ? wx.showToast({
? ? ? ? ? icon: 'none',
? ? ? ? ? title: '新增記錄失敗'
? ? ? ? })
? ? ? ? console.error('[數(shù)據(jù)庫(kù)] [新增記錄](méi) 失?。?, err)
? ? ? }
? ? })
? }
})【calendarCard.json】
{
? "usingComponents": {
? ? "top-title":"../../../components/topTitle/topTitle",
? ? "calendar":"../components/calendar/calendar"
? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
添加一個(gè)以前寫的table的spliter給大家...2007-01-01
實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離減少JS
本教程旨在實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離，減少JS在各方面（全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應(yīng)內(nèi)容等）的工作。2009-07-07
Code：loadScript( )加載js的功能函數(shù)
Code：loadScript( )加載js的功能函數(shù)...2007-02-02
大家都知道js是單線程的，執(zhí)行起來(lái)是順序的，在順序的業(yè)務(wù)邏輯中當(dāng)然沒(méi)有問(wèn)題，如果遇到可以并發(fā)執(zhí)行的業(yè)務(wù)邏輯，再排隊(duì)就很低級(jí)了！所以這里我們?cè)賮?lái)簡(jiǎn)單的談?wù)凧S中的異步以及如何異步。2016-08-08
子窗體與父窗體之見(jiàn)互相傳值實(shí)現(xiàn)使用中很頻繁，本文以一個(gè)小示例拋磚引玉，希望大家可以舉一反三2013-08-08
微信公眾號(hào)中的JSSDK接入及invalid signature等常見(jiàn)錯(cuò)誤問(wèn)題分析(全面解析)
這篇文章主要介紹了微信公眾號(hào)中的JSSDK接入及invalid signature等常見(jiàn)錯(cuò)誤問(wèn)題分析(全面解析),需要的朋友可以參考下2020-04-04
js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
微信小程序textarea層級(jí)過(guò)高(蓋住其他元素)問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于微信小程序textarea層級(jí)過(guò)高(蓋住其他元素)問(wèn)題的解決辦法，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
自己編寫的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件
創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件，可以說(shuō)是一個(gè)繁瑣的過(guò)程，涉及到初期設(shè)計(jì)、開(kāi)發(fā)與測(cè)試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手，也應(yīng)該是善假于外物的。本文介紹的這個(gè)不錯(cuò)的JavaScript表單驗(yàn)證插件，支持ajax驗(yàn)證，有需要的小伙伴可以參考下2015-05-05
JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))
下面小編就為大家?guī)?lái)一篇JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07