我正在重写此小部件,我想为一周中的每一天设置颜色,例如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="" width="320"/>
<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
}
};
你能帮我吗?您认为可能吗?使它起作用的正确方法是什么?
谢谢
答案 0 :(得分:0)
您的代码有点阴暗,并且使用了很少的库。这是一个简单的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>