微信小程序制作签到页面效果的代码是哪些

发布时间：2023-07-15 13:24:11 所属栏目：语言来源：

导读：今天我们来学习关于“微信小程序制作签到页面效果的代码是什么”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一

今天我们来学习关于“微信小程序制作签到页面效果的代码是什么”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一下吧！

具体内容如下

微信小程序

之前做了一个酒庄的小程序签到，微信小程序和公众号一起的。

wxml：

</view>

<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>

</view>

</view>

</view>

</view>

</view>

<view>

</view>

<view class="jsqd">在本月连续签到可获取：</view>

</view>

</view>

</view>

<text>截至目前，你已连续签到</text>

<text class='number'>{{count}}</text>

</view>

/* pages/Calendar/Calendar.wxss */

/* 打卡日历 */

.all{

margin-top: 20rpx;

}

.all .bar{

display: flex;

flex-direction: row;

justify-content: space-between;

margin: 30rpx 20rpx;

padding: 10rpx;

}

.all .bar image{

width: 50rpx;

height: 50rpx;

}

.all .week{

display: flex;

flex-direction: row;

justify-content: space-between;

padding: 20px;

padding-left: 16px;

padding-right: 29rpx;

margin: 20rpx;

border-radius: 10px;

background-color: #F4A460;

}

.all .days{

margin: 20rpx;

padding: 10rpx;

border-radius: 10px;

background-color: #F4A460;

}

.all .columns{

display: flex;

flex-direction: column;

justify-content: space-between;

}

.all .columns .rows{

display: flex;

flex-direction: row;

justify-content: space-between;

}

.all .columns .rows .cell{

width: 84rpx;

height: 88rpx;

margin: 3rpx;

text-align: center;

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;

}

.count .daynumber{

display: flex;

flex-direction: row;

justify-content: center;

}

.count .daynumber .day{

margin-top: 50rpx;

}

.count{

margin: 20rpx;

padding: 30rpx;

display: flex;

text-align: center;

border-radius: 10px;

flex-direction: column;

justify-content: center;

background-color: #F4A460;

align-items: center;

}

.count .number{

color: red;

font-size: 60rpx;

background-color: #fff;

width: 100rpx;

height: 100rpx;

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;

margin: 20rpx;

}

.count text{

margin: 10rpx;

}

.count1{

margin: 20rpx;

padding: 30rpx;

display: flex;

text-align: center;

border-radius: 10px;

flex-direction: column;

justify-content: center;

background-color: #F4A460;

align-items: center;

color:#fff;

}

.reward{

display:flex;

flex-direction: column;

margin-top:60rpx;

height:200rpx;

width:95%;

border:4rpx solid #F4A460;

margin:auto;

}

.redetail{

background-color:#FFE4B5;

width:29%;

margin-left:20rpx;

height:100rpx;

}

.lxday{

font-size:30rpx;

color:#D2691E;

}

.point{

margin-top:23rpx;

font-size:20rpx;

color:#D2691E;

}

.jsqd{

font-size:25rpx;

margin:25rpx;

color:#D2691E;

}

.jddetail{

display:flex;

flex-direction: row;

}

js:

import { IndexModel } from '../../routemodels/index.js'

import { DialogModel } from '../../routemodels/dialog.js'

const indexModel = new IndexModel()

const dialogModel = new DialogModel()

Page({

/**

* 页面的初始数据

data: {

objectId: '',

days: [],

year: [],

month:[],

day:[],

cur_year: 0,

cur_month: 0,

g_data:Object,

qdStatus:"",

tsStatus:"",

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

//获取当前积分签到信息

indexModel.getSignInfo().then(res=>{

if(res!=null){

this.setData({

g_data:res

})

}

})

//this.setData({ objectId: options.objectId });

//获取当前年月

const date = new Date();

const cur_year = date.getFullYear();

const cur_month = date.getMonth() + 1;

const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];

this.calculateEmptyGrids(cur_year, cur_month);

this.calculateDays(cur_year, cur_month);

//获取当前用户当前任务的签到状态

//this.onGetSignUp();

this.setData({

cur_year,

cur_month,

weeks_ch

})

this.getSignUp();

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

indexModel.getSignToday().then(res => {

if (res.EXEC == "1") {

this.setData({

qdStatus: "display:none",

tsStatus: "display:block",

})

} else {

this.setData({

qdStatus: "display:block",

tsStatus: "display:none",

})

}

})

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

// 获取当月共多少天

getThisMonthDays: function (year, month) {

return new Date(year, month, 0).getDate()

// 获取当月第一天星期几

getFirstDayOfWeek: function (year, month) {

return new Date(Date.UTC(year, month - 1, 1)).getDay();

// 计算当月1号前空了几个格子，把它填充在days数组的前面

calculateEmptyGrids: function (year, month) {

var that = this;

//计算每个月时要清零

that.setData({ days: [] });

const firstDayOfWeek = this.getFirstDayOfWeek(year, month);

if (firstDayOfWeek > 0) {

for (let i = 0; i < firstDayOfWeek; i++) {

var obj = {

date: null,

isSign: false

}

that.data.days.push(obj);

}

this.setData({

days: that.data.days

});

//清空

} else {

this.setData({

days: []

});

}

// 绘制当月天数占的格子，并把它放到days数组中

calculateDays: function (year, month) {

var that = this;

const thisMonthDays = this.getThisMonthDays(year, month);

for (let i = 1; i <= thisMonthDays; i++) {

var obj = {

date: i,

isSign: false

}

that.data.days.push(obj);

}

this.setData({

days: that.data.days

});

//匹配判断当月与当月哪些日子签到打卡

onJudgeSign: function () {

var that = this;

var signs = that.data.signUp;

var daysArr = that.data.days;

for (var i = 0; i < that.data.day.length; i++) {

var year = that.data.year[i];

var month = that.data.month[i];

var day = that.data.day[i];

day = parseInt(day);

for (var j = 0; j < daysArr.length; j++) {

//年月日相同并且已打卡

if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day) {

daysArr[j].isSign = true;

}

that.setData({ days: daysArr });

// 切换控制年月，上一个月，下一个月

handleCalendar: function (e) {

const handle = e.currentTarget.dataset.handle;

const cur_year = this.data.cur_year;

const cur_month = this.data.cur_month;

if (handle === 'prev') {

let newMonth = cur_month - 1;

let newYear = cur_year;

if (newMonth < 1) {

newYear = cur_year - 1;

newMonth = 12;

}

this.calculateEmptyGrids(newYear, newMonth);

this.calculateDays(newYear, newMonth);

//this.onGetSignUp();

this.setData({

cur_year: newYear,

cur_month: newMonth

})

this.getSignUp();

} else {

let newMonth = cur_month + 1;

let newYear = cur_year;

if (newMonth > 12) {

newYear = cur_year + 1;

newMonth = 1;

}

this.calculateEmptyGrids(newYear, newMonth);

this.calculateDays(newYear, newMonth);

//this.onGetSignUp();

this.setData({

cur_year: newYear,

cur_month: newMonth

})

this.getSignUp();

}

//获取当前用户该任务的签到数组

onGetSignUp: function () {

var that = this;

var Task_User = Bmob.Object.extend("task_user");

var q = new Bmob.Query(Task_User);

q.get(that.data.objectId, {

success: function (result) {

that.setData({

signUp: result.get("signUp"),

});

//获取后就判断签到情况

that.onJudgeSign();

error: function (object, error) {

}

});

getSignUp:function(){

indexModel.getSignUp(this.data.cur_year,this.data.cur_month).then(res=>{

if(res!=null){

var arr1 = [];

var arr2 = [];

var arr3 = [];

for(var i=0;i<res.day.length;i++){

arr1[i] = res.day[i].YEAR;

arr2[i] = res.day[i].MONTH;

arr3[i] = res.day[i].DAYS;

}

this.setData({

year:arr1,

month:arr2,

day:arr3,

})

}

this.onJudgeSign();

})

getSignPoint:function(){

indexModel.getSignPoint().then(res=>{

if(res.returncode=="2"){

this.setData({

qdStatus:"display:none",

tsStatus:"display:block",

})

this.getSignUp();

dialogModel.showToastS("100-00", res.result);

}else{

dialogModel.showToastS("100-00", "签到失败，请与管理员联系")

}

})

}

})

公众号

html:

<!doctype html>

<html>

<head>

<style>

* {margin: 0;padding: 0}

#calendar {width: 90%;margin: 100px auto;overflow: hidden;padding: 20px;position: relative;margin-bottom:0px}

#calendar h4 {text-align: center;margin-bottom: 10px}

#calendar .a1 {position: absolute;top: 30px;left: 20px;}

#calendar .a2 {position: absolute;top: 30px;right: 20px;}

#calendar .week {height: 120px;line-height: 110px;margin-bottom: 30px;background-color:#F4A460;font-size:50px;border-radius: 15px;}

#calendar .week li {float: left;width: 120px;height: 120px;text-align: center;list-style: none;}

#calendar .dateList {overflow: hidden;clear: both;background-color:#F4A460;border-radius:15px}

#calendar .dateList li {float: left;width: 120px;height: 120px;text-align: center;line-height: 110px;list-style: none;font-size:50px}

#calendar .dateList .ccc {}

#calendar .dateList .red {background: #83C75D;border-radius:50%;}

#calendar .dateList .sun {}

.all {margin:20px;}

.ny {text-align:center;margin-bottom:20px;font-size:50px;}

.count1 {margin:50px;padding:30px;display:flex;text-align:center;border-radius:15px;flex-direction:column;justify-content:center;background-color:#F4A460;align-items:center;color:#fff;font-size:50px;margin-top:10px;}

.reward {display:flex;flex-direction:column;margin-top:30px;height:220px;width:95%;border:3px solid #F4A460;margin:auto;}

.redetail {background-color:#FFE4B5;width:29%;margin-left:30px;height:100px;}

.lxday {font-size:25px;color:#D2691E;}

.point {margin-top:20px;font-size:25px;color:#D2691E;}

.jsqd {font-size:25px;margin:24px;color:#D2691E}

.jddetail{display:flex;flex-direction:row;}

.count {margin:30px;padding:30px;display:flex;text-align:center;border-radius:15px;flex-direction:column;jsutify-content:center;background-color:#F4A460;align-items:center;}

.number{ color: red;font-size: 40px;background-color: #fff;width: 100px;height: 100px;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;margin: 20px;}

.daynumber {display:flex;flex-direction:row;justify-content:center;}

.day{margin-top:40px;font-size:40px;}

.return{

position: absolute;

margin-top: 0.15rem;

}

.return img{

width: 80px;

}

.head{

letter-spacing: 0.1rem;

font-weight: bold;

font-size: 50px;

padding: 10px;

text-align: center;

background: #F5F5F5;

}

</style>

</head>

<body>

</a>

</div>

</div>

</ul>

</div>

<div>

</div>

<div class="jsqd">在本月连续签到可获取：</div>

</div>

</div>

</div>

<div style="font-size:40px;">截至目前，你已经连续签到</div>

</div>

</body>

</html>

js:

var arr1 = [];

var arr2 = [];

var arr3 = [];

var iNow = 0;

$(function() {

initUI();// 初始化控件

initData();// 初始化数据

// 必要的数据

// 今天的年月日；本月的总天数；本月第一天是周几？？？

getSignToday();

getSignInfo(0);

run(0);

$(".a1").click(function() {

iNow--;

getSignInfo(iNow);

});

$(".a2").click(function() {

iNow++;

getSignInfo(iNow);

})

});

function getSignInfo(n) {

$.wh_h5ajax({

url : "/api/SignIn/getSignInfo",

type : "post",

data : {

dataType : "json",

success : function(json) {

if (json != null) {

html1 = "连续签到" + json.qd1.RES_NAME_SUB + "天";

html2 = "连续签到" + json.qd2.RES_NAME_SUB + "天";

html3 = "连续签到" + json.qd3.RES_NAME_SUB + "天";

html4 = "可得" + json.qd1.RES_CODE + "积分";

html5 = "可得" + json.qd2.RES_CODE + "积分";

html6 = "可得" + json.qd3.RES_CODE + "积分";

$("#lxqd1").html(html1);

$("#lxqd2").html(html2);

$("#lxqd3").html(html3);

$("#lxjf1").html(html4);

$("#lxjf2").html(html5);

$("#lxjf3").html(html6);

}

var oDate = new Date(); // 定义时间

oDate.setMonth(oDate.getMonth(n));

var year = oDate.getFullYear();

var month = oDate.getMonth();

getSignUp(year, month + 1);

error : function(e) {

console.log(e);

}

});

}

function getSignUp(year, month) {

$.wh_h5ajax({

url : "/api/SignIn/getSignUp",

type : "post",

data : {

year : "" + year,

month : "" + month

dataType : "json",

success : function(json) {

if (json != null) {

arr1 = [];

arr2 = [];

arr3 = [];

for (var i = 0; i < json.day.length; i++) {

arr1[i] = json.day[i].YEAR;

arr2[i] = json.day[i].MONTH;

arr3[i] = json.day[i].DAYS;

}

run(iNow);

}

})

}

function initUI() {

}

// 初始化数据

function initData() {

}

function run(n) {

var oDate = new Date(); // 定义时间

oDate.setMonth(oDate.getMonth() + n);// 设置月份

var year = oDate.getFullYear(); // 年

var month = oDate.getMonth(); // 月

var today = oDate.getDate(); // 日

var alength = arr1.length;

// 计算本月有多少天

var allDay = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ][month];

// 判断闰年

if (month == 1) {

if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {

allDay = 29;

}

// 判断本月第一天是星期几

oDate.setDate(1); // 时间调整到本月第一天

var week = oDate.getDay(); // 读取本月第一天是星期几

// console.log(week);

$(".dateList").empty();// 每次清空

// 插入空白

for (var i = 0; i < week; i++) {

$(".dateList").append("<li></li>");

}

// 日期插入到dateList

for (var i = 1; i <= allDay; i++) {

$(".dateList").append("<li>" + i + "</li>");

}

// 标记颜色=====================

for(var t=0;t<alength;t++){

if(arr1[t]==year&arr2[t]==month+1){

$(".dateList li").each(function(i, elm){

//console.log(index,elm);

var val = $(this).text();

//console.log(val);

if(val==arr3[t]){

$(this).addClass('red')

}

});

}

* for(var t=0;t<arr1.length;t++){ if(arr1[t]==year&&arr2[t]==month+1){

* $(".dateList li").each(function(i, elm){ var val = $(this).text();

* if(arr3[t]==val){ $(this).addClass('red'); } }); }

* }

// 定义标题日期

$("#ny").text(year + "年" + (month + 1) + "月");

}

function getSignPoint(){

$.wh_h5ajax({

url : "/api/SignIn/getPoint",

type : "post",

data : {

dataType : "json",

success : function(json) {

if(json.returncode=="2"){

document.getElementById("ljqd").style = "display:none";

document.getElementById("reward").style = "";

document.getElementById("jzmq").style = "";

$("#pcount").html(json.checkday)

getSignInfo();

$.wh_layermsg(json.result);

}else{

$.wh_layermsg("签到失败，请与管理员联系");

}

})

}

function getSignToday(){

$.wh_h5ajax({

url : "/api/SignIn/getSignToday",

type : "post",

data : {

dataType : "json",

success : function(json) {

if (json.EXEC == "1") {

document.getElementById("ljqd").style = "display:none";

document.getElementById("reward").style = "";

document.getElementById("jzmq").style = "";

$("#pcount").html(json.checkday)

} else {

document.getElementById("ljqd").style = "";

document.getElementById("reward").style = "";

document.getElementById("jzmq").style = "display:none";

}

})

}

大概是这个样子

代码还有很多需要修改，先在这放一下吧。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring Boot叫做什么	Spring MVC @Autowire
何为Spring	Eclipse创立Servlet项