uniapp自定义的日历(纯手写)

效果图:

html:

<!-- 年月 --><view class="box"><view class="box_time"><view class="time"><image @click="lefts" :src="url+'/uploads/20231206/9d1fb520b12383960dca3c214d84fa0a.png'" mode=""></image><text>{{year}}年{{month}}月</text><image @click="right" :src="url+'/uploads/20231206/c2f706c19e0de31b2139939c3cb089e4.png'" mode=""></image></view></view></view><!-- 周 --><view class="box_week"><view class="week"><text v-for="(item,index) in week" :key="index">{{item}}</text></view></view><!-- 日期 --><view class="date"><view class="date_list"><view class="dates" v-for="(item,index) in day" :key="index"><view:class="item.num == sun ? 'list_yes' : (month > months ? 'list_null' :(year > years ? 'list_null' :(month == months && year == years && item.num > san ? 'list_null' :'list')))"@click="click(item)" :style="item.day  > 7 && !more_status ? 'display:none;':''"><!-- <view class="list"> --><text>{{item.day}}</text><view:class="item.status ? 'bars' : (item.num > san ? '' : (month > months ? '' :(year > years ? '' :(month == months && year == years && item.num > san ? '' :'bar'))))"><p></p></view></view></view></view></view>

参数描述:

day:获取每个月有几天

js:

year: '', //现在的年份  会变
years: '', //现在的年份不  会变
month: '', //现在的月份  会变
months: '', //现在的月份  不会变
day: '', //指定年月的天数
sun: '', //今天的日
week: '', //指定日期的第一天的星期几
more_status: false, //是否展开更多
date: '', //现在的时分秒
onLoad() {uni.showLoading({title: '加载中...',mask: true});let myDate = new Date();this.year = myDate.getFullYear();this.years = myDate.getFullYear();this.month = String(myDate.getMonth() + 1).padStart(2, '0');this.months = String(myDate.getMonth() + 1).padStart(2, '0');this.week = this.getweekday(this.year + '-' + this.month + '-' + '01')this.getMonthDays2()this.sun = String(myDate.getDate()).padStart(2, '0');this.san = String(myDate.getDate()).padStart(2, '0');let h = myDate.getHours(); //小时let m = myDate.getMinutes(); //分钟let s = myDate.getSeconds(); //秒this.date = h + ':' + m + ':' + s //时分秒},
// 获取指定年月份的天数getMonthDays2() {let time = this.year + '-' + this.monthlet year = time.split('-')[0];let month = time.split('-')[1];let date = new Date(year, month, 0); // 这里的month,比我们日常说的几 月份小1,10则表示11月份let ti = date.getDate()let array = []for (let i = 0; i < ti; i++) {array.push({day: i + 1,num: String(i + 1).padStart(2, '0')})}this.day = array;},
getweekday(date) {var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Datelet array = []for (let i = 0; i < 7; i++) {let time = Number(week) + iif (time > 7) {time = time - 7}if (time == 1) time = '一'if (time == 2) time = '二'if (time == 3) time = '三'if (time == 4) time = '四'if (time == 5) time = '五'if (time == 6) time = '六'if (time == 7) time = '日'array.push(time)}return array;},

自行研究

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM之Agent(五)| AgentTuning:清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

​论文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT带来了大模型的蓬勃发展&#xff0c;开源LLM层出不穷&#xff0c;虽然这些开源的LLM在各自任务中表现出色&#xff0c;但是在真实环境下作…

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞 YAML是一种数据序列化语言&#xff0c;它的基本语法规则注意如下&#xff1a; -大小写敏感 -使用缩进表示层级关系 -缩进时不允许使用Tab键&#xff0c;只允许使用空格。 -缩进的空格数目不重要&#xff0c;只要相同层级的元…

VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时&#xff0c;如何进行debug? 1.安装Chrome Debug插件。 2.在launch.json中&#xff0c;将url修改成你前端项目的路径&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…

redis 三主三从高可用集群docker swarm

由于数据量过大&#xff0c;单个Master复制集难以承担&#xff0c;因此需要对多个复制集进行集群&#xff0c;形成水平扩展每个复制集只负责存储整个数据集的一部分&#xff0c;这就是Redis的集群&#xff0c;其作用是提供在多个Redis节点间共享数据的程序集。 官网介绍地址 re…

Elasticsearch:向量数据库的真相

通过工作示例了解什么是向量数据库、它们如何实现 “相似性” 搜索以及它们可以在明显的 LLM 空间之外的哪些地方使用。除非你一直生活在岩石下&#xff0c;否则你可能听说过诸如生成式人工智能和大型语言模型&#xff08;LLM&#xff09;之类的术语。 除此之外&#xff0c;你很…

如何利用Axure制作移动端产品原型

Axure是一款专业的快速原型设计工具&#xff0c;作为专业的原型设计工具&#xff0c;Axure 能够快速、高效地创建原型&#xff0c;同时支持多人协作设计和版本控制管理。它已经得到了许多大公司的采用&#xff0c;如IBM、微软、思科、eBay等&#xff0c;这些公司都利用Axure 进…

SAP UI5 walkthrough step7 JSON Model

这个章节&#xff0c;帮助我们理解MVC架构中的M 我们将会在APP中新增一个输入框&#xff0c;并将输入的值绑定到model&#xff0c;然后将其作为描述&#xff0c;直接显示在输入框的右边 首先修改App.controllers.js webapp/controller/App.controller.js sap.ui.define([&…

python变量的命名和使用

变量名只能包含字母、数字和下划线 变量名只能包含字母、数字和下划线。变量名可以字母或下划线打头&#xff0c;但不能以数字打头。例如&#xff0c;可将变量命名为message_1&#xff0c;但不能将其命名为1_message。 Python 语言中&#xff0c;以下划线开头的标识符有特殊含…

翻译: 生成式人工智能的经济潜力 第3部分工作和生产力的影响 The economic potential of generative AI

麦肯锡报告 翻译: 生成式人工智能的经济潜力 第一部分商业价值 The economic potential of generative AI翻译: 生成式人工智能的经济潜力 第2部分行业影响 The economic potential of generative AI 1. 工作和生产力的影响 技术几十年来一直在改变工作的解剖学。多年来&…

c++新经典模板与泛型编程:const修饰符的移除与增加

const修饰符的移除 让你来写移除const修饰符&#xff0c;你会怎么样来写&#xff1f; &#x1f602;&#x1f602;trait类模板&#xff0c;如下 #include <iostream>// 泛化版本 template<typename T> struct RemoveConst {using type T; };// 特化版本 template…

阿里云(云服务器)上搭建项目部署环境

目录 安装docker docker安装MySQL5.7.37 安装MySQL 方式一&#xff1a;docker中MySQL时区调整 方式二&#xff1a;docker中MySQL时区调整 docker安装MySQL8.0.27 docker安装redis5.0.14 云服务器上安装jdk1.8 安装docker 1、先卸载docker&#xff0c;因为有一些服务器…

西南科技大学C++程序设计实验十(函数模板与类模板)

一、实验目的 1. 掌握函数模板与类模板; 2. 掌握数组类、链表类等线性群体数据类型定义与使用; 二、实验任务 1. 分析完善以下程序,理解模板类的使用: (1)补充类模板声明语句。 (2)创建不同类型的类对象,使用时明确其数据类型? _template<typename T>__…

c-语言->数据在内存的存储

系列文章目录 文章目录 系列文章目录前言 前言 目的&#xff1a;学习整数在内存的储存&#xff0c;什么是大小端&#xff0c;浮点数的储存。 1. 整数在内存中的存储 在讲解操作符的时候&#xff0c;我们就讲过了下⾯的内容&#xff1a; 整数的2进制表⽰⽅法有三种&#xff0…

动手学习深度学习-跟李沐学AI-自学笔记(3)

一、深度学习硬件-CPU和GPU 芯片&#xff1a;Intel or AMD 内存&#xff1a;DDR4 显卡&#xff1a;nVidia 芯片可以和GPU与内存通信 GPU不能和内存通信 1. CPU 能算出每一秒能运算的浮点运算数&#xff08;大概0.15左右&#xff09; 1.1 提升CPU利用率 1.1.1 提升缓存…

自动驾驶学习笔记(十六)——目标跟踪

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo 社区开发者圆桌会》免费报名—>传送门 文章目录 前言 匹配关联 轨迹记录 状态预测 总结 前…

【文件上传系列】No.2 秒传(原生前端 + Node 后端)

上一篇文章 【文件上传系列】No.1 大文件分片、进度图展示&#xff08;原生前端 Node 后端 & Koa&#xff09; 秒传效果展示 秒传思路 整理的思路是&#xff1a;根据文件的二进制内容生成 Hash 值&#xff0c;然后去服务器里找&#xff0c;如果找到了&#xff0c;说明已经…

【智能家居】七、人脸识别 翔云平台编程使用(编译openSSL支持libcurl的https访问、安装SSL依赖库openSSL)

一、翔云 人工智能开放平台 API文档开发示例下载 二、编译openSSL支持libcurl的https访问 安装SSL依赖库openSSL(使用工具wget)libcurl库重新配置&#xff0c;编译&#xff0c;安装运行&#xff08;运行需添加动态库为环境变量&#xff09; 三、编程实现人脸识别 四、Base6…

12.4每日一题(备战蓝桥杯顺序结构程序设计)

12.4每日一题&#xff08;备战蓝桥杯顺序结构程序设计&#xff09; 题目1000: 【入门】AB Problem题目描述输入输出样例输入样例输出来源/分类 题解 1000: 【入门】AB Problem题目 2124: 计算(ab)c的值题目描述输入输出样例输入样例输出来源/分类 题解 2124: 计算(ab)c的值题目…

UML案例分析

首先需要花大约20分钟来思考解决这个问题&#xff0c;如果对问题不是很熟悉&#xff0c;也可以在完成题目之后&#xff0c;找相关的资料翻阅&#xff08;例如看UML类图的基本情况&#xff0c;UML状态图的基本情况&#xff0c;然后结合这些信息 做一个自我评价&#xff0c;看这个…

matlab 最小二乘拟合空间直线(方法三)

目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示四、相关链接博客长期更新,GPT与爬虫自重,你也未必能爬到最新版本。 一、算法原理 1、算法过程 空间直线的点向式方程为: