uni-app实现获取未来七天时间和星期几功能

news2024/11/24 6:29:49

例子如下:

HTML:

		<view
			style="margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;">
			<div v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"
				@click="select(item)" :key='index'>
				<span style="font-weight: 600;margin-top: 5%;">{{item.week}}</span>
				<br>
				<view style="width:30px;height: 30px;border-radius: 50%;border: none;background-color: #EFEFEF;text-align: center;display: flex;justify-content: center;align-items: center;margin-top: 20%;font-size: 12px;">{{item.name}}</view>
 
			</div>

js 生命周期执行

created() {
			// 默认显示当天前一周的数据
			let data = []
			this.start = this.getDay(+7);
			this.end = this.getDay();
			for (let i = 6; i >= 0; i--) {
				data.push(this.getDay(+i))
			}
			var date = data.reverse()
			this.week = date;
			var date = this.week;
			var pkc = []; 
			var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			date.forEach((item, index) => { //循坏日期
				var f = new Date(item);
				var week = f.getDay() //计算出星期几
				var str1 = item.split('/');
				var strs = str1[2];
 
				var weeks = weekday[week] 
				var time = Math.round(new Date(item) / 1000) 
				var s = {} //用于存储每个日期对象
				s.date = item;
				s.name = strs;
				s.week = weeks;
				s.times = time;
				pkc.push(s)
			})
			this.same_week = pkc;
			
			this.same_day = pkc[0].date; 
		},

methods:事件

	getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); 
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + "/" + tMonth + "/" + tDate;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = month;
				}
				return m;
 
			},
			// 
 
		},

return:

                week: [],
				same_week: [], 
				same_day: '',

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

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

相关文章

在虚拟机上安装win10/ubuntu的教程

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 一、下载软件资源 1、首先下载虚拟机Vmware_Pro17软件并正确安装&#xff1a;网盘链接 2、然后下载操作系统的镜像文件&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 二、在虚拟机上安装ubuntu系统 1…

EXP武器库编写

文章目录 pocsuite3工具SQL注入EXP布尔盲注优化最终优化 延时注入 phpstudy2016-2018-RCE利用DVWA文件上传metinfo_5.0.4EXPSQL-布尔盲注文件包含漏洞 定制SQLmaptamper脚本sqli-labs/less-26关卡分析 tamper脚本编写 python是黑客最喜欢的编程语言之一&#xff0c;但同时go语言…

基于AVR128单片机智能电风扇控制系统

一、系统方案 模拟的电风扇的工作状态有3种&#xff1a;自然风、常风及睡眠风。使用三个按键S1-S3设置自然风、常风及睡眠风。 再使用两个按键S4和S5&#xff0c;S4用于定时电风扇定时时间长短的设置&#xff0c;每按一次S4键&#xff0c;定时时间增加10秒&#xff0c;最长60秒…

C/C++程序员技术发展方向(强烈推荐!!)

大家好&#xff0c;我是阿Q。 今天这篇就是专门给现在还迷茫不知道自己到底要做什么方向C开发的同学们。 几年后回过头看的时候&#xff0c;你一定会感谢当初那个努力的自己&#xff01; C作为当下也非常流行的一个面向对象语言&#xff0c;有着非常多的应用&#xff0c;一定…

RHCSA 文件的上传下载(Linux-Windows)

目录 一、SCP 上传&#xff08;Windows--->Linux&#xff09;&#xff1a; 下载&#xff08;Linux--->Windows&#xff09;&#xff1a; 二、STFP 三、XFTP工具 一、SCP 上传&#xff08;Windows--->Linux&#xff09;&#xff1a; 在Windows本地端命令窗口中转…

基因组注释(Annotation)

基因组组装完成后&#xff0c;或者是完成了草图&#xff0c;就不可避免遇到一个问题&#xff0c;需要对基因组序列进行注释。注释之前首先得构建基因模型&#xff0c;有三种策略&#xff1a; 从头注释(de novo prediction)&#xff1a;通过已有的概率模型来预测基因结构&#…

【刷题】2023年第十四届蓝桥杯大赛软件类省赛C/C++大学A组真题

蓝桥杯2023年第十四届省赛真题-平方差 - C语言网 (dotcpp.com) 初步想法&#xff0c;x y2 − z2&#xff08;yz)(y-z) 即xa*b&#xff0c;ayz&#xff0c;by-z 2yab 即ab是2的倍数就好了。 即x存在两个因数之和为偶数就能满足条件。 但时间是&#xff08;r-l&#xff09;*x&am…

C语言回调函数与注册函数的使用

概述 在项目中&#xff0c;经常见到此写法&#xff0c;在此写个demo&#xff0c;方便其他工程师参阅。 开发环境&#xff1a;Visual Studio Community 2022 1、代码 #include <stdio.h>//封装库代码 typedef struct {bool status;void (*setStatus)(int status); }T_…

动手吧,vue单选框

单选框到处可见&#xff0c;组件库不方便自定义样式&#xff0c;还是自己写吧。 效果图&#xff1a; 1、template部分 <template><labelclass"v-radio flex":class"[{ disable: disabled }]":aria-disabled"disabled"><spancla…

如何搭建专属的物联网私有云?需要考虑哪些因素?

随着物联网技术的快速发展&#xff0c;越来越多的企业开始意识到搭建专属的物联网私有云的重要性。私有云是指企业自主建设和管理的云服务环境&#xff0c;其中企业可以实现对数据和服务的全面控制&#xff0c;同时也可以享受云服务的高效性和灵活性。 一、企业做专属物联网私…

基于jenkins+k8s实现devops

1、背景 由于jenkins运行在k8s上能够更好的利用动态agent进行构建。所以写了个部署教程&#xff0c;亲测无坑 2、部署 1、创建ns kubectl create namespace devops 2、kubectl apply -f jenkins.yml apiVersion: v1 kind: ServiceAccount metadata:name: jenkinsnamespace…

用于图像分类的预训练模型(PyTorch实现)

用于图像分类的预训练模型&#xff08;PyTorch实现&#xff09; 在本文中&#xff0c;我们将介绍一些使用 TorchVision 模块中存在的预训练网络的实践示例——用于图像分类的预训练模型。 1. 基于预训练模型进行图像分类 预训练模型是在 ImageNet 等大型基准数据集上训练的神…

力扣刷题-链表-移除链表元素

203.移除链表元素 题意&#xff1a;删除链表中等于给定值 val 的所有节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&#xff1a;head [], val 1 输出&#xff1a;[] 示例 3&#xff1a; 输…

arduino u8g2 表情字库制作

U8G2 下载原代码 &#xff1a; GitHub - olikraus/u8g2: U8glib library for monochrome displays, version 2 1.制作图片 使用FLASH 或任何可以画图的软件制作动态图片PNG格式 大小最好先设定好如40x80 ,最好不要太大 128X64,60X60 将制作好的图片放入 下载好的 u8g2-master…

【每日一题】1539. 第 k 个缺失的正整数

1539. 第 k 个缺失的正整数 - 力扣&#xff08;LeetCode&#xff09; 给你一个 严格升序排列 的正整数数组 arr 和一个整数 k 。 请你找到这个数组里第 k 个缺失的正整数。 示例 1&#xff1a; 输入&#xff1a;arr [2,3,4,7,11], k 5 输出&#xff1a;9 解释&#xff1a;缺失…

国科大体系结构习题 | 第二章 计算机系统结构基础

第二章 习题汇总 Q1. 在3台不同指令系统的计算机上运行同一程序P时&#xff0c;A机需要执行 1.0 1 0 8 1.010^8 1.0108条指令&#xff0c;B机需要执行 2.0 1 0 8 2.0 10^8 2.0108条指令&#xff0c;C机需要执行 4.0 1 0 8 4.010^8 4.0108条指令&#xff0c;但实际执行时间…

Linux 操作技巧

目录 一、shell-命令解释器 二、Linux中的特殊符号 三、命令历史--history 一、shell-命令解释器 shell——壳&#xff0c;命令解释器&#xff0c;负责解析用户输入的命令 ——内置命令&#xff08;shell内置&#xff09; ——外置命令&#xff0c;在文件系统的某个目录下&…

Redis Insight 版本 2.32 翻译中文

使用教程 链接&#xff1a;https://pan.baidu.com/s/11pWBZ3uQSRZbuMS8POkLCw?pwd2ke5 一、下载renderer.js 1.打开安装好的软件 2、在这里添加我们指定的文件夹&#xff0c;这个文件夹是你随便创建的&#xff0c;你可以指定任何目录 3.选择renderer.js右键保存覆盖 4.在r…

Flask数据库之SQLAlchemy--介绍--链接数据库

目录 SQLAlchemy介绍 SQLAlchemy连接数据库 SQLAlchemy介绍 数据库是一个网站的基础&#xff01;&#xff01;&#xff01; 比如MySQL、MongoDB、SQLite、PostgreSQL等&#xff0c;这里我们以MySQL为例进行讲解。 SQLAlchemy是一个ORM框架 对象关系映射&#xff08;英语&…

chrome浏览器 调试鼠标悬停后出现的元素样式

鼠标悬停后出现的样式&#xff0c;我们遇见的有两种情况&#xff0c;一种是用css设置的hover时的样式&#xff0c;第二种就像el-tooltip组件&#xff0c;鼠标悬停时出现提示文字的样式。 一、css设置的hover时的样式 1、按【F12】键&#xff08;或右键点击【检查】&#xff09…