日出闹钟 - 网站

Question

我的朋友有一个“日出闹钟”，当该醒来时它会变得更亮，以模拟日出以方便起床。

我以为我可以用我的笔记本电脑做同样的事情，但是我一直在努力让 Javascript 有时间工作。我将不胜感激任何帮助让这件事发挥作用。

我一直在尝试添加分钟值 (wakeupM)，无论我想睡多久，这都会延迟 setTimeout 函数并且仅在我要醒来时运行。不过，我希望能够在时间输入框中设置时间，并让“日出”功能仅在到达该时间时运行。

提前感谢您的帮助！

var countTime;

function mySleep() {
  var now = new Date();
  var nowM = now.getMinutes();


  var wakeup = new Date();
  var wakeupM = wakeup.getMinutes() + 3;


  var timeDif = wakeupM - nowM;
  countTime = 6000 * timeDif;


  document.getElementById("settime").innerHTML = countTime;

}

function mySunrise() {
  var colors = ['orange', 'yellow', 'white'];
  var active = 0;


  setInterval(function() {
    document.querySelector('body').style.background = colors[active];
    active++;
    if (active == colors.length) active = 0;
  }, 3000);;
}

body {
  background: green;
  /* initial color */
  transition: background 5s;
  /* .5s how long transition should take */
}

<input type="time" id="myTime" value="22:15:00">
<button onclick="setTimeout(mySunrise, countTime); mySleep();">Wake me up</button>
<h1>waking you up at:</h1>
<p id="settime"></p>

Answer 1

我的个人网站上的完成版 - http://piotrirving.com/alarm/sunrise.html

var wakeupH;
var wakeupM;
var wakeupS;

var nowH;
var nowM;
var nowS;


function mySleep() {
  var wakeUpTime = document.getElementById("myTime");
  var currentVal = wakeUpTime.value;
  var res = currentVal.split(":");

  wakeupH = res[0]
  wakeupM = res[1]
  wakeupS = res[2]

  var now = new Date();
  var nowH = now.getHours();
  var nowM = now.getMinutes();
  var nowS = now.getSeconds();

  var date1 = new Date(2000, 0, 1, nowH, nowM, nowS);

  var date2 = new Date(2000, 0, 1, wakeupH, wakeupM, 1);


  if (date2 < date1) {
    date2.setDate(date2.getDate() + 1);
  }

  countTime = date2 - date1;
  document.getElementById("settime").innerHTML = countTime;
}



function mySunrise() {
  var colors = ["#BDB76B", "#F0E68C", "#EEE8AA", "#FFDAB9", "#FFE4B5", "#FFA07A", "#FF7F50", "#FF6347", "#FF4500", "#FF8C00", "#FFA500", "#FFEFD5", "#FAFAD2", "#FFFACD", "#FFFFE0", "#FFFF00", "#FFD700", "white"];
  var active = 0;


  setInterval(function() {
    document.querySelector('body').style.background = colors[active];
    active++;
    if (active == colors.length) active = 0;
  }, 3000);;
}

body {
  background: black;
  /* initial color */
  transition: background 30s;
  /* .5s how long transition should take */
  color: white;
}

Time: <input type="time" id="myTime" value="22:53:01">
<button onclick="mySleep(); setTimeout(mySunrise, countTime);">Wake me up</button>
<p id="settime"></p>