首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >更改后台Javascript项目

更改后台Javascript项目
EN

Stack Overflow用户
提问于 2018-06-13 04:47:01
回答 1查看 85关注 0票数 3

我正在尝试制作一个背景,可以在一天中的某个时间改变颜色。然而,我似乎无法修改我的参数。将它们放入变量中。从HTML到JavaScript的输入是固定的。

感觉我漏掉了一些很明显的东西。( JavaScript和一般编码的新手)。

jQuery(document).ready(function($) {
      function alerts(alert1, alert2, alert3, alert4, alert5, alert6) {
        var hours = new Data().getHours();

        if (alert1.empty() || alert2.empty() || alert3.empty() || alert4.empty() || alert5.empty() || alert6.empty()) {

          alert1 = 0;
          alert2 = 12;
          alert3 = 12;
          alert4 = 17;
          alert5 = 17;
          alert6 = 24;

          if (hours >= alert1 && hours < alert2) {
            document.body.style.backgroundColor = "#fceea1";
          } else if (hours >= alert3 && hours < alert4) {
            document.body.style.backgroundColor = "#dbbc0a";
          } else if (hours >= alert5 && hours < alert6) {
            document.body.style.backgroundColor = "#706527";
          } else {

          }
        }
      };
body {
  font-family: sans-serif;
  background: white;
  font-size: 150px;
  color: #333;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Welkom</title>

  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="js/index.js">
    alerts(0, 12, 12, 17, 17, 20);
  </script>

</body>

</html>

EN

回答 1

Stack Overflow用户

发布于 2018-06-13 05:04:21

我认为实验随机的小项目是一个很好的学习方法,所以我做了一个简单的脚本来做你用注释描述的事情,这样你就可以试着理解每件事是如何工作的!

颜色看起来很奇怪和丑陋,但这只是因为我给它的值,所以请随意摆弄重量和不同的时间度量!

function changeColor() {
  var d = new Date(); // Creates a 'date' object
  var ms = d.getMilliseconds(); // Gets the current millisecond
  var minute = d.getMinutes(); // Gets the current minute
  var second = d.getSeconds(); // Gets the current second
  /*
  Other methods of obtaining the time:
  d.getFullYear()       Get the year as a four digit number (yyyy)
  d.getMonth()        	Get the month as a number (0-11)
  d.getDate()           Get the day as a number (1-31)
  d.getHours()          Get the hour (0-23)
  d.getTime()           Get the time (milliseconds since January 1, 1970)
  d.getDay()	          Get the weekday as a number (0-6)
  */
  document.body.style.backgroundColor = 'rgb(' + ms/4 + ',' + minute + ',' + second + ')';
  // This sets the backgroundColor of the document to an RGB value where red is the milliseconds, green is the minute, and blue is the second
  // Note: I divided the millisecond value by 4 because the highest possible value is 255 and the millisecond value can reach 999.
  // It would still work without dividing it, but the color wouldn't change as much because it would interpret 255-999 as 255
}

var interval = setInterval(changeColor, 100) // Runs the changeColor() function every .1 seconds
// Note: This would still work if I didn't set it as a variable, but it's good practice to set intervals as variables so you can use clearInterval(variable)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50825612

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档