时间戳

首页 > 解决方案 > 为每一天设置不同的颜色（小部件）

javascript - 为每一天设置不同的颜色（小部件）

问题描述

我正在重写这个小部件，我想为一周中的每一天设置一种颜色，比如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
  }
};

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

谢谢

标签： javascriptjqueryhtmlioswidget

解决方案

你的代码有点阴暗，它使用的库很少。这是一个实现您想要的简单 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>

推荐阅读