用vue实现一个根据不同百分比显示不同背景颜色的日历

根据百分比去实现背景颜色不同的日历，百分比越高，背景颜色越深；百分比越低，背景颜色越浅

代码实现：

html

<template><div><div class="maxbox"><div class="item"><p><el-input v-model="year" style="width: 70%" /><el-button type="primary" @click="createDateJson()">点击查询对应年份的日历</el-button></p><div class="boxes"><div class="month" v-for="(key, value) in dateJSON" :key="value"><h2>{{ year }}-{{ value }}</h2><div class="week"><div class="li" v-for="index in 7" :key="index">星期{{ weekList[index - 1] }}</div></div><div class="day"><divclass="daybox"id="daybox"v-for="index in key[0].week - 1 < 0 ? 6 : key[0].week - 1":key="'0' + index"></div><divclass="daybox"v-for="(date, keys) in key":key="keys"v-color="{ value, keys }">{{ date.date }}</div></div></div></div></div></div></div>
</template>

script

<script>
//引用的百分比数据
import probability from "@/assets/probability.json";
var that;
export default {data() {return {year: "2022",dateJSON: [],weekList: ["一", "二", "三", "四", "五", "六", "日"],monthNum: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],};},mounted() {that = this;},directives: {sum: {inserted(el, binding, vnode) {},},color: {inserted(el, binding, vnode) {let sum = 0;for (let i = 0; i < Number(binding.value.value.split("月")[0] - 1); i++) {sum += that.monthNum[i];}let gb;let r = that.Radom(150, 255);if (r >= 250) {gb = that.Radom(100, 255);} else {gb = that.Radom(0, 10);}let index = sum + binding.value.keys; let span = document.createElement("span");span.style.display = "block";el.style.backgroundColor = `rgba(230,0,0,${probability[index].toFixed(2)})`;span.innerText = `${(probability[index] * 100).toFixed(2)}%`;el.append(span);},},},methods: {Radom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;},createDateJson() {console.log(123);let list = {};let bigMonth = [1, 3, 5, 7, 8, 10, 12];let smallMonth = [4, 6, 9, 11];let flatMonth = [2];for (let i = 0; i < 12; i++) {let month = i + 1;let obj = [];if (bigMonth.indexOf(month) != -1) {for (let j = 0; j < 31; j++) {let some = {week: new Date(`${this.year}-${month < 10 ? "0" + month : month}-${j + 1 < 10 ? "0" + (j + 1) : j + 1}`).getDay(),date: j + 1,};obj.push(some);}}if (smallMonth.indexOf(month) != -1) {for (let j = 0; j < 30; j++) {let some = {week: new Date(`${this.year}-${month < 10 ? "0" + month : month}-${j + 1 < 10 ? "0" + (j + 1) : j + 1}`).getDay(),date: j + 1,};obj.push(some);}}if (flatMonth.indexOf(month) != -1) {for (let j = 0; j < 28; j++) {let some = {week: new Date(`${this.year}-${month < 10 ? "0" + month : month}-${j + 1 < 10 ? "0" + (j + 1) : j + 1}`).getDay(),date: j + 1,};obj.push(some);}}list[month + "月"] = obj;}console.log(list);this.dateJSON = list;},},computed: {},watch: {},
};
</script>

css

.maxbox {width: 100%;
}
.maxbox .item p {display: flex;
}
.maxbox .item .boxes {width: 100%;height: 100%;/* overflow: scroll; */
}
.maxbox .item .boxes .month .week {display: flex;
}
.maxbox .item .boxes .month .week .li {width: 14%;font-weight: 900;
}
.maxbox .item .boxes .month .day {display: flex;justify-content: flex-start;flex-wrap: wrap;
}
.maxbox .item .boxes .month .day #daybox {background-color: white;
}
.maxbox .item .boxes .month .day .daybox {width: 14%;height: 60px;box-sizing: border-box;border: 1px solid black;position: relative;background-color: #a50000;color: #000000;line-height: 30px;font-size: 15px;
}

用vue实现一个根据不同百分比显示不同背景颜色的日历相关推荐

Vue卡列表中不同卡片显示不同背景颜色
Vue卡列表中不同卡片显示不同背景颜色最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调. ...
android seekbar 背景颜色,Android中自定义SeekBar如何实现分段显示不同背景颜色
Android中自定义SeekBar如何实现分段显示不同背景颜色发布时间:2020-07-17 16:04:27 来源:亿速云阅读:197 作者:小猪这篇文章主要讲解了Android中自定义Se ...
android自定义主题背景颜色,Android 自定义SeekBar 实现分段显示不同背景颜色的示例代码...
在最近的开发工作中,要实现一个调色板的进度条,SeekBar要分成10段显示不同颜色,功夫不负有心人,终于实现了这个功能,下面分享给大家示例图: 1.自定义SeekBar import androi ...
vue点击菜单跳转时，背景颜色动态变化
** vue点击菜单跳转时,背景颜色动态变化 ** html: script: export default { name: "menu", data() { return { a ...
使用vue做一个“淘宝“项目(显示商品栏)
显示商品栏前言:完成上一篇文章--做出首页点击跳转目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.做出宫格每次做一个新东西的时候 ...
转型之路之Excel单元格按数值显示带背景颜色进度条
汇报工作进度时,很多人Excel 经常是这样的: 但领导希望看到内容通常是这样的: 这个功能怎么实现呢? 下面说下Excel单元格如何按数值显示一个背景颜色的进度条,以WPS Office为例: 注意 ...
为MobaXterm终端配一个自己喜欢的主题和背景颜色
软件描述 MobaXterm是一款增强型远程连接工具,它向Windows桌面提供所有重要的远程网络工具(SSH,X11,RDP,VNC,FTP,MOSH等)和Unix命令(bash,ls,cat,se ...
使用vue做一个“淘宝“项目(显示页面)
显示页面前言:做出底部导航栏目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.若想每个导航栏都能显示页面,那必先创建组件在 src- ...
去掉button边框样式，背景完全透明，显示出背景颜色或背景图
使用场景我们经常会需要一个按钮(button)和文字放在一起,底下再放一个视频或者图片.这是我在写uniapp分享功能的时候发现的,uni.share只能写在button上才能生效,所以就出现了这篇 ...

用vue实现一个根据不同百分比显示不同背景颜色的日历

用vue实现一个根据不同百分比显示不同背景颜色的日历相关推荐

最新文章

热门文章