Javascript 为每天设置不同的颜色（小部件）_Javascript_Jquery_Html_Ios_Widget

Javascript 为每天设置不同的颜色（小部件）

javascript jquery html ios

Javascript 为每天设置不同的颜色（小部件）,javascript,jquery,html,ios,widget,Javascript,Jquery,Html,Ios,Widget,我正在重写这个小部件，我想为一周中的每一天设置一种颜色，比如Monday=blue，tuday=purple，等等，这样每天都会显示在所选颜色的屏幕上我在网上搜索过，但没有找到对我有帮助的东西。我尝试了不同的方法，如getDay（），getElementsByTagName，var colors，if/else，但这些方法都不起作用（可能是因为我做错了什么）（功能（）{ 如果（window.innerWidth==375）{ document.querySelector（“meta[nam

我正在重写这个小部件，我想为一周中的每一天设置一种颜色，比如

Monday=blue

，

tuday=purple

，等等，这样每天都会显示在所选颜色的屏幕上

我在网上搜索过，但没有找到对我有帮助的东西。我尝试了不同的方法，如

getDay（）

，

getElementsByTagName

，

var colors

，

if/else

，但这些方法都不起作用（可能是因为我做错了什么）


（功能（）{
如果（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'）；
}
}());
--LOCKPLUS.js--
var dev='LockPlus'；var-wIcon=''；var墙纸=null；var覆盖=null；
变量元素={
“日”：{
“z指数”：2，
“字体系列”：“alpine”，
“颜色”：“白色”，
“位置”：“绝对”，
“字体大小”：“38px”，
“顶部”：“52px”，
“左”：0，
“宽度”：“320px”，
“文本对齐”：“居中”，
“文本阴影”：“rgb（0,0,0）1px 2px 2px”
},
“zclock”：{
“z指数”：2，
“颜色”：“白色”，
“字体系列”：“bebasbold”，
“位置”：“绝对”，
“字体大小”：“25px”，
“顶部”：“101px”，
“左”：0，
“宽度”：“320px”，
“文本对齐”：“居中”，
“文本阴影”：“rgb（0,0,0）1px 2px 2px”
},
“datemonth”：{
“z指数”：2，
“颜色”：“白色”，
“字体系列”：“alpine”，
“位置”：“绝对”，
“字体大小”：“23px”，
“top”：122，
“左”：0，
“宽度”：“320px”，
“文本对齐”：“居中”，
“文本阴影”：“rgb（0,0,0）1px 2px 2px”
},
“boxOne”：{
“宽度”：“50px”，
“高度”：“1px”，
“背景色”：“rgba（255255,0.73）”，
“z指数”：1，
“边框颜色”：“红色”，
“边框样式”：“实心”，
“边框宽度”：“0px”，
“位置”：“绝对”，
“顶部”：“117px”，
“左”：“186px”
},
“第二箱”：{
“宽度”：“50px”，
“高度”：“1px”，
“背景色”：“rgba（255，255，255，0.73）”，
“z指数”：1，
“边框颜色”：“红色”，
“边框样式”：“实心”，
“边框宽度”：“0px”，
“位置”：“绝对”，
“顶部”：“117px”，
“左”：“82px”
},
“第三箱”：{
“宽度”：“30px”，
“高度”：“1px”，
“背景色”：“rgba（255，255，255，0.73）”，
“z指数”：1，
“边框颜色”：“红色”，
“边框样式”：“实心”，
“边框宽度”：“0px”，
“位置”：“绝对”，
“顶部”：“105px”，
“左”：“186px”
},
“第四箱”：{
“宽度”：“30px”，
“高度”：“1px”，
“背景色”：“rgba（255，255，255，0.73）”，
“z指数”：1，
“边框颜色”：“红色”，
“边框样式”：“实心”，
“边框宽度”：“0px”，
“位置”：“绝对”，
“顶部”：“105px”，
“左”：103
}
};

你能帮我吗？你认为可能吗？什么是使它工作的正确方法

谢谢

您的代码有点晦涩难懂，而且使用的库很少。下面是一个简单的html/css/js示例，实现了您的目标：

const daysOfWeek=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
常量背景=[
{
姓名：‘星期日’，
颜色：“红色”
}, {
姓名：‘星期一’，
颜色：“蓝色”
}, {
姓名:"星期二",，
颜色：“绿色”
}, {
姓名:"星期三",，
颜色：“黄色”
}, {
姓名:"星期四",，
颜色：“橙色”
}, {
姓名：‘星期五’，
颜色：“紫色”
}, {
姓名：‘星期六’，
颜色：“棕色”
}
];
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
#今天的文本{
宽度：100px；
高度：20px；
文本对齐：居中；
}
今天是：

这会更改背景颜色，而不是文本。也许代码有点可疑，因为小部件有时钟、日历、天气等？我已经更新了我的答案。现在它正在更改文本颜色。您已经发布了整个应用：）最好只发布导致您出现问题的片段。不管怎样，把你的工作代码，我会看看。

<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
  }
};