layui实现空气日历动态日期变色

最近用layui制作webapp中遇到这么一个需求，动态变化日历的颜色，如下图：

代码如下：

<title>空气质量日历</title><style type="text/css">#air-calendar-laydate .layui-laydate-main {width: 100%;}#air-calendar-laydate .layui-laydate-content td, #test-n1 .layui-laydate-content th {width: 60px;height: 40px;}#div_left {width: 100%;height: 126px;background-color: #63ea3b;/*padding-top: 100px;*/}.div_AQI {font-size: 14px;color: white;font-family: 'Microsoft YaHei';line-height: 28px;text-align: center;}.div_AQIValue {font-size: 34px;color: white;font-family: 'Microsoft YaHei';line-height: 28px;padding-top: 10px;text-align: center;}#div_right {width: 100%;/*height:240px;*/padding-top: 39px;/*padding-left: 10px;*/background-color: white;}/**/.div_Date {font-size: 14px;color: #657181;}.div_Vaule {font-size: 14px;color: darkgrey;}/*背景图片*/.layui-fluid {/*background-image:url(../../src/img/home_bg.png);*/background: url(../../src/img/home_bg.png) no-repeat;width: 100%;height: 100%;background-size: cover;}/*返回箭头*/.backimg {position: fixed;left: 0;margin-left: 16px;width: 15px;}/*标题*/#title {/*width: 250px;height: 47px;*/font-family: AdobeHeitiStd-Regular;font-size: 20px;font-weight: normal;font-stretch: normal;letter-spacing: -1px;margin: 5% auto;color: #ffffff;text-align: center;}#menu {position: fixed;width: 100%;height: 5%;bottom: 0;border: 1px solid #ff0000;}/*日历样式*/.layui-laydate, .layui-laydate-hint {border: 1px solid #d2d2d2;box-shadow: 0 2px 4px rgba(0,0,0,.12);background-color: #fff;color: #666;top: 20px;/*bottom:40px;*/left: 10%;width: 80%;}/*颜色条*/.sign {margin: 0 10%;}/*bg1~bg6*/.bg1, .bg2, .bg3, .bg4, .bg5, .bg6 {color: #fff !important;border-radius: 8px !important;margin: 1px;}.bg1 {background-color: #63ea3b !important;      }.bg2 {background-color: #ffad37 !important;        }.bg3 {background-color: #ff8837 !important;       }.bg4 {background-color: #ff4f4f !important;       }.bg5 {background-color: #e142f7 !important;      }.bg6 {background-color: #ac1ef6 !important;      }/*日期按钮默认样式*/.layui-laydate .layui-this {background-color: #ffad37 !important;color: #fff !important;}/*AQI显示*/.aqidata {left: 10%;width: 80%;top: 20px;bottom: 100px;}ul.layui-nav li {float: left;}layui-nav-item a {color: red;}/*.test {border-radius: 8px !important;background-color: #63ea3b !important;color: #fff !important;padding: 1px;}*/
</style><div class="layui-fluid"><div class="layui-row"><div class="layui-col-xs12" id="title"><span><img class="backimg" src="../../src/img/back.png" /></span><span>空气质量</span></div><div class="layui-col-xs12"><div id="air-calendar-laydate"></div></div><div class="layui-col-xs12"><div class="layui-row layui-col-space10 sign" style="background-color:whitesmoke;padding-left: 10px;padding-right: 10px; "><!-- <div class="layui-col-xs2" style="height:5px"></div>--><div class="layui-col-xs10"><div class="layui-col-xs2" style="height:5px">0</div><div class="layui-col-xs2" style="height:5px">50</div><div class="layui-col-xs2" style="height:5px">100</div><div class="layui-col-xs2" style="height:5px">150</div><div class="layui-col-xs2" style="height:5px">200</div><div class="layui-col-xs2" style="height:5px">300</div></div><!--<div class="layui-col-xs2" style="height:6px"><hr style="height:2px"></div>--><div class="layui-col-xs10"><div class="layui-col-xs2" style="height:5px"><hr class="bg1" style="height:2px"></div><div class="layui-col-xs2" style="height:5px"><hr class="bg2" style="height:2px"></div><div class="layui-col-xs2" style="height:5px"><hr class="bg3" style="height:2px"></div><div class="layui-col-xs2" style="height:5px"><hr class="bg4" style="height:2px"></div><div class="layui-col-xs2" style="height:5px"><hr class="bg5" style="height:2px"></div><div class="layui-col-xs2" style="height:5px"><hr class="bg6" style="height:2px"></div></div><!--<div class="layui-col-xs2" style="height:10px">无数据</div>--><div class="layui-col-xs10"><div class="layui-col-xs2" style="height:10px">优</div><div class="layui-col-xs2">良</div><div class="layui-col-xs2">轻度</div><div class="layui-col-xs2">中度</div><div class="layui-col-xs2">重度</div><div class="layui-col-xs2">严重</div></div></div></div><div class="layui-col-xs12 aqidata"><div class="layui-col-xs3"><div id="div_left"><div class="div_AQI" id="divAQI">AQI&nbsp;<span id="QUALITYLEVEL">-</span></div><div class="div_AQIValue" id="divAQIValue">-</div></div></div><div class="layui-col-xs9"><div id="div_right"><div class="layui-row layui-col-space15"><div class="layui-col-xs7"><div id="divAddress">岳麓区&nbsp;欣盛路</div></div><div class="layui-col-xs5"><div class="div_Date" id="MEASURETIME">--</div></div><!--<div class="layui-col-xs12"><div id="divAQIValue">细颗粒物：PM2.5</div></div>--><div class="layui-col-xs2"><div class="div_Date">PM2.5</div></div><div class="layui-col-xs2"><div id="PM2_5" class="div_Vaule">-</div></div><div class="layui-col-xs2"><div class="div_Date">PM10</div></div><div class="layui-col-xs2"><div id="PM10" class="div_Vaule">-</div></div><div class="layui-col-xs2"><div class="div_Date">SO2</div></div><div class="layui-col-xs2"><div id="SO2" class="div_Vaule">-</div></div><div class="layui-col-xs2"><div class="div_Date">NO2</div></div><div class="layui-col-xs2"><div id="NO2" class="div_Vaule">-</div></div><div class="layui-col-xs2"><div class="div_Date">O3</div></div><div class="layui-col-xs2"><div id="O3" class="div_Vaule">-</div></div><div class="layui-col-xs2"><div class="div_Date">CO</div></div><div class="layui-col-xs2"><div id="CO" class="div_Vaule">-</div></div></div></div></div></div><!--<div class="layui-col-xs12" ><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="">站点</a></li><li class="layui-nav-item"><a href="">实时数据</a></li><li class="layui-nav-item layui-this"><a href="">空气日历</a></li></ul></div>--></div>
</div><script>layui.use(['admin', 'laydate', 'setter'], function () {//var laydate = layui.laydate;var $ = layui.$, setter = layui.setter, admin = layui.admin, element = layui.element, laydate = layui.laydate;var userinfo = layui.data(setter.tableName, { key: 'userinfo' });//console.log("userinfo:", userinfo);//直接嵌套显示laydate.render({elem: '#air-calendar-laydate', position: 'static', showBottom: false, change: function (value, date) { //监听日期被切换//获取当前选中的年月日var y = value.substr(0, 4);//年var m = value.substr(5, 2);//月var d = value.substr(8, 2);//日var startDay = new Date(y, m-1, 1);//选中月第一天var lastDay = new Date(y, m, 0);//选中月最后一天ChangeDateColor(startDay, lastDay);var stime = value + " 00:00:00";var etime = value + " 23:59:59";//查询数据，显示再下方GetAQIData(stime, etime);}, ready: function (date) { //渲染开始$('.layui-this').removeClass('layui-this');//去掉默认选中当前日期var startDay = new Date(date.year, date.month-1, 1);var lastDay = new Date(date.year, date.month, 0);ChangeDateColor(startDay, lastDay);var stime_data = date.year + "-" + date.month + "-" + date.date + " " + "00:00:00";var etime_data = date.year + "-" + date.month + "-" + date.date + " " + "23:59:59";GetAQIData(stime_data, stime_data);}, done: function (value, date, endDate) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。}});var SO2, NO2, PM2_5, PM10, O3, CO, AQI, MEASURETIME, QUALITYLEVEL;//格林尼治时间转标准时间function GMTToStr(time) {let date = new Date(time)let Str = date.getFullYear() + '-' +(date.getMonth() + 1) + '-' +date.getDate()//+ ' ' +//date.getHours() + ':' +//date.getMinutes() + ':' +//date.getSeconds()return Str}//返回每天的数据的颜色function ReturnDayToColor(stime, etime) {var ReturnJson = "[";var aqidata = { sTime: stime, eTime: etime, Type: "Day", UserID: userinfo.ID, UserName: userinfo.FULLNAME }; //正式时Type改为Day$.ajax({url: "./aqidata/GetMDataAQIData",type: "POST",contentType: 'application/json',async: false,data: JSON.stringify(aqidata),success: function (res) {var color = "COLOURCODE";var time = "MEASURETIME";var quality = "QUALITYLEVEL";if (res.code != 0) {ReturnJson = "null";}else {for (var i = 0; i < res.data.length; i++) {                           ReturnJson += "{"ReturnJson += "\"" + time + "\":\"" + res.data[i].MEASURETIME.substr(0, 10) + "\","ReturnJson += "\"" + quality + "\":\"" + res.data[i].QUALITYLEVEL + "\","ReturnJson += "\"" + color + "\":\"" + res.data[i].COLOURCODE + "\""ReturnJson += "},"}ReturnJson = ReturnJson.substring(0, ReturnJson.lastIndexOf(','))//去除最后一个逗号ReturnJson += "]";}}})return ReturnJson;}//改变日历日期的颜色function ChangeDateColor(sDay,lDay) {var Json_Color = ReturnDayToColor(GMTToStr(sDay), GMTToStr(lDay));//返回的json(时间，颜色编码，空气质量等级)var newjson = eval('' + Json_Color + '');//json对象解析if (newjson != null) {//如果返回的对象不为空for (var i = 0; i < newjson.length; i++) {//遍历数据switch (newjson[i].QUALITYLEVEL) {//newjson[i].QUALITYLEVEL为空气质量等级case "优":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg1');break;case "良":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg2');break;case "轻度":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg3');break;case "中度":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg4');break;case "重度":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg5');break;case "严重":$('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg6');break;default:}}}}//获取城市AQIfunction GetAQIData(stime, etime) {var aqidata = { sTime: stime, eTime: etime, Type: "Day", UserID: userinfo.ID, UserName: userinfo.FULLNAME }; //正式时Type改为Day$.ajax({url: "./aqidata/GetMDataAQIData",type: "POST",contentType: 'application/json',async: false,data: JSON.stringify(aqidata),success: function (res) {if (res.code != 0) {document.getElementById("divAQIValue").innerHTML = "-";document.getElementById("MEASURETIME").innerHTML = "-";document.getElementById("QUALITYLEVEL").innerHTML = "-";document.getElementById("SO2").innerHTML = "-";document.getElementById("NO2").innerHTML = "-";document.getElementById("PM2_5").innerHTML = "-";document.getElementById("PM10").innerHTML = "-";document.getElementById("O3").innerHTML = "-";document.getElementById("CO").innerHTML = "-";document.getElementById("div_left").style.backgroundColor = "#63ea3b";//无数据时}else {SO2 = res.data[0].SO2;NO2 = res.data[0].NO2;PM2_5 = res.data[0].PM2_5;PM10 = res.data[0].PM10;O3 = res.data[0].O3;CO = res.data[0].CO;AQI = res.data[0].AQI;MEASURETIME = res.data[0].MEASURETIME;QUALITYLEVEL = res.data[0].QUALITYLEVEL;//根据AQI的等级控制显示颜色if (QUALITYLEVEL == "优")document.getElementById("div_left").style.backgroundColor = "#63ea3b";if (QUALITYLEVEL == "良")document.getElementById("div_left").style.backgroundColor = "#ffad37";if (QUALITYLEVEL == "轻度")document.getElementById("div_left").style.backgroundColor = "#ff8837";if (QUALITYLEVEL == "中度")document.getElementById("div_left").style.backgroundColor = "#ff4f4f";if (QUALITYLEVEL == "重度")document.getElementById("div_left").style.backgroundColor = "#e142f7";if (QUALITYLEVEL == "严重")document.getElementById("div_left").style.backgroundColor = "#ac1ef6";document.getElementById("divAQIValue").innerHTML = AQI;document.getElementById("MEASURETIME").innerHTML = MEASURETIME.substr(0, 10);document.getElementById("QUALITYLEVEL").innerHTML = QUALITYLEVEL;document.getElementById("SO2").innerHTML = SO2;document.getElementById("NO2").innerHTML = NO2;document.getElementById("PM2_5").innerHTML = PM2_5;document.getElementById("PM10").innerHTML = PM10;document.getElementById("O3").innerHTML = O3;document.getElementById("CO").innerHTML = CO;}},error: function (err) {console.log("err!");}});}});</script>

感觉很nice!!!

layui实现空气日历动态日期变色相关推荐

CORE-ESP32C3|eink|墨水屏日历+时间日期+温度显示|I2C软件模拟| LuatOS-SOC接口|官方demo|学习(14)：墨水屏动态日历+oled日期显示+ AHT10测温模组
目录参考博文源于网友oled+eink+aht10项目源代码修改及复现说明主要修改显示效果编辑硬件准备软件版本日志及soc下载工具软件使用接线说明天气显示屏硬件接线温度采集 ...
基于layui实现的日历记事本
前言本文是一款基于layui实现的日历记事本.我们可以根据点击页面上的日期,给这一天添加一个事件提醒.静态资源来自网络:http://www.jq22.com/jquery-inf ...
空气日历 for mac(日历软件)
空气日历是一款支持原生的农历显示的中文日历软件,并且能够在菜单栏上运行,用户可以直接的在上面查看各种日期内容,以最快速.便捷的方式将您订阅的所有日历事件,包括会议.约会.节假日等,实时同步. 空气日历 ...
【Android从零单排系列十一】《Android视图控件——日历、日期、时间选择控件》
目录一.日历.日期.时间组件基本介绍二.几种常见的控件类型 1.CalendarView –日历控件 2. DatePicker –日期选择控件 3.TimePicker –时间选择控件 4.Ch ...
Layui框架中table解决日期格式问题
Layui框架中table解决日期格式问题参考文章: (1)Layui框架中table解决日期格式问题 (2)https://www.cnblogs.com/slacker-z/p/996347 ...
java做日历怎么对齐日期_如何使用Java日历从日期中减去X天？
如何使用Java日历从日期中减去X天? 有人知道使用Java日历从日期中减去X天的简单方法吗? 我无法找到任何允许我直接从Java中的日期减去X天的函数. 有人能指出我正确的方向吗? 9个解决方案 2 ...
php历法,Atitit.基于时间戳的农历日历历法日期计算
Atitit.基于时间戳的农历日历历法日期计算 1.农历xx年的大小月份根据万年历查询1 2.农历xx年1月1日的时间戳获取1 3.计算当年的时间戳与农历日期的对应表,时间戳为key,日期为val1 ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
动态旋转变色的3D爱心
之前为了在女朋友面前露一手(啊不是闲得无聊),为了证明两年多的图像没有白学,总不能做个控制台黑窗口print循环打印爱心字符串吧,于是乎做了一个可以动态旋转变色的3D爱心,效果如下图所示.虽然效果也 ...

layui实现空气日历动态日期变色

layui实现空气日历动态日期变色相关推荐

最新文章

热门文章