为每一天设置不同的颜色（小部件）
Posted
技术标签:
【中文标题】为每一天设置不同的颜色（小部件）【英文标题】：Set a different color for each day (widget) 【发布时间】：2018-07-13 15:28:24 【问题描述】：我正在重写这个小部件，我想为一周中的每一天设置一种颜色，如Monday = blue、Tuesday = purple 等。这样每一天都会显示在所选颜色的屏幕上。
我在网上搜索过，但没有找到任何对我有帮助的东西。我尝试了不同的方法，如getDay()、getElementsByTagName、var colors、if/else，但都没有奏效（可能是因为我做错了什么）
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/lockplus.js"></script>
<script type="text/javascript" src="Config.js"></script>
</head>
<body>
<div class="container">
<div id="screenElements">
</div>
<img id="wallpaper" src="" />
<div class="screenOverlay"></div>
<img class='svg' style="display:none; opacity:0;"/>
<script type="text/javascript" src="js/svg.js"></script>
<script type="text/javascript" src="js/clock.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/weather.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript" src="js/misc.js"></script>
<script type="text/javascript">
(function ()
if (window.innerWidth === 375)
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=1.5, maximum-scale=1.5, user-scalable=0');
else if (window.innerWidth === 414)
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=1.5, maximum-scale=1.5, user-scalable=0');
());
</script>
</body>
</html>
—- LOCKPLUS.js ——
var dev='LockPlus';var wIcon ='';var wallpaper=null;var overlay=null;
var elements=
"day":
"z-index":2,
"font-family":"alpine",
"color":"white",
"position":"absolute",
"font-size":"38px",
"top":"52px",
"left":0,
"width":"320px",
"text-align":"center",
"text-shadow":"rgb(0,0,0) 1px 2px 2px"
,
"zclock":
"z-index":2,
"color":"white",
"font-family":"bebasbold",
"position":"absolute",
"font-size":"25px",
"top":"101px",
"left":0,
"width":"320px",
"text-align":"center",
"text-shadow":"rgb(0, 0,0) 1px 2px 2px"
,
"datemonth":
"z-index":2,
"color":"white",
"font-family":"alpine",
"position":"absolute",
"font-size":"23px",
"top":122,
"left":0,
"width":"320px",
"text-align":"center",
"text-shadow":"rgb(0,0,0) 1px 2px 2px"
,
"boxOne":
"width":"50px",
"height":"1px",
"background-color":"rgba(255,255,255,0.73)",
"z-index":1,
"border-color":"red",
"border-style":"solid",
"border-width":"0px",
"position":"absolute",
"top":"117px",
"left":"186px"
,
"boxTwo":
"width":"50px",
"height":"1px",
"background-color":"rgba(255, 255, 255, 0.73)",
"z-index":1,
"border-color":"red",
"border-style":"solid",
"border-width":"0px",
"position":"absolute",
"top":"117px",
"left":"82px"
,
"boxThree":
"width":"30px",
"height":"1px",
"background-color":"rgba(255, 255, 255, 0.73)",
"z-index":1,
"border-color":"red",
"border-style":"solid",
"border-width":"0px",
"position":"absolute",
"top":"105px",
"left":"186px"
,
"boxFour":
"width":"30px",
"height":"1px",
"background-color":"rgba(255, 255, 255, 0.73)",
"z-index":1,
"border-color":"red",
"border-style":"solid",
"border-width":"0px",
"position":"absolute",
"top":"105px",
"left":103
;
你能帮帮我吗？你认为可能吗？什么是让它发挥作用的正确方法？
谢谢
【问题讨论】：
【参考方案1】：您的代码有点阴暗，而且它使用的库很少。这是一个实现您想要的简单 html/css/js 示例：
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const backgrounds = [
name: 'Sunday',
color: 'red'
,
name: 'Monday',
color: 'blue'
,
name: 'Tuesday',
color: 'green'
,
name: 'Wednesday',
color: 'yellow'
,
name: 'Thursday',
color: 'orange'
,
name: 'Friday',
color: 'purple'
,
name: 'Saturday',
color: 'brown'
];
const todayDayNumber = new Date().getDay();
const todayDayName = daysOfWeek[todayDayNumber];
const todayColor = backgrounds.find(day => day.name === todayDayName).color;
document.getElementById("todayText").innerHTML = todayDayName;
document.getElementById("todayText").style.color = todayColor;#todayText
width: 100px;
height: 20px;
text-align: center;
<p>Today is:</p>
<div id='todayText'></div>【讨论】：
这会改变背景颜色，而不是文本。也许代码有点阴暗，因为小部件有时钟、日历、天气等？ 我已经更新了我的答案。现在它正在改变文本颜色。您已经发布了整个应用程序 :) 最好只发布导致您出现问题的片段。不管怎样，把你的工作代码here(jsfiddle)我看看。以上是关于为每一天设置不同的颜色（小部件）的主要内容，如果未能解决你的问题，请参考以下文章