Question

var doc = document;
clock({
  twentyfour: !!twentyfour,
  padzero: true,
  refresh: 5000,
  success: function(clock) {
    doc.getElementById('time').innerHTML = clock.hour() + ":" + clock.minute();
    document.getElementById('todate').innerHTML = clock.date() + ' ' + translate[current].month[clock.month()] + ' ' + clock.year();
    document.getElementById('today').innerHTML = translate[current].weekday[clock.day()]
  }
});

function mainUpdate(type) {
  doc.getElementById("sunrise").innerHTML = weather.sunriseTimeFormatted;
  doc.getElementById("sunset").innerHTML = weather.sunsetTimeFormatted;

  var dtime = document.getElementById('time');
  var dsunrise = document.getElementById('sunrise');
  var dsunset = document.getElementById('sunset');
  var sunriseI = document.getElementById('sunriseImg');
  var sunsetI = document.getElementById('sunsetImg');

  function sunriseI() {
    if (dtime >= dsunrise) {
      sunriseI.src = 'images/daytwilight.png';
    } else {
      sunriseI.src = 'images/blank.png';
    }
  }

  function sunsetI() {
    if (dtime == dsunset) {
      sunsetI.src = 'images/nighttwilight.png';
    } else {
      sunriseI.src = 'images/blank.png';
    }
  }
}

<img onload="sunriseI()" id="sunriseImg" src="images/blank.png" />
<img onload="sunsetI()" id="sunsetImg" src="images/blank.png" />

不起作用。我想将微光图像放在日出和日落时间一会儿。当前时间=日落或日出。或者，您可以给我显示不同的选项。谢谢您的帮助。

Answer 1

var sunrise = 5;
var sunset = 19;

var sunriseImage = "https://img.freepik.com/free-vector/mountain-landscape-background_1284-10559.jpg?size=338&ext=jpg";

var sunsetImage = "https://img.freepik.com/free-photo/3d-hazy-mountain-range-against-sunset-sky_1048-10361.jpg?size=626&ext=jpg";

var nightImage = "https://img.freepik.com/free-vector/starry-night-sky-background_23-2148058243.jpg?size=338&ext=jpg";

var dayImage = "https://img.freepik.com/free-photo/sky-with-sun-rays_1048-4473.jpg?size=626&ext=jpg";

var initClock = function(){
  setInterval(function(){
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var seconds = date.getSeconds();
    
    changeTime(hour + " : " + minute + " : " + seconds);
    
    if(hour == sunrise){
      changeImage(sunriseImage);
    }else if(hour == sunsetImage){
      changeImage(sunsetImage);
    }else if(hour > sunset || hour < sunrise){
      changeImage(nightImage);
    }else{
      changeImage(dayImage);
    }
  }, 1000);
}

var changeTime = function(time){
  document.getElementById("clock").innerHTML = time;
}

var changeImage = function(img){
      document.getElementById("clock").style.backgroundImage = "url('"+img+"')";
      document.getElementById("clock").style.backgroundSize = "cover";
}

initClock();

#clock{
  width: 300px;
  height: 140px;
  background-size: cover;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  overflow:hidden;
  background-repeat: no-repeat;
  border: 1px solid black;
  color: blue;
}

<div id="clock">

</div>

Answer 2

您应检查当前时间是否在日落/日出附近，并有一定偏移，然后根据该时间设置图像元素的来源。

要比较时间，首先应将时间string转换为Date对象。这是它的功能：

function parse_time(str){
  var d_ = new Date();
  d_.setHours(str.split(':')[0]);
  d_.setMinutes(str.split(':')[1]);
  d_.setSeconds(0);
 return d_;
}

用于检查某个时间是否与某个时间相隔一段时间，您可以使用isAround函数，如下所示：

function addHours(date, h) {
  var result = new Date(date);
  result.setTime(result.getTime() + (h*60*60*1000));
  return result;
}

function isAround(d1,d2,period){
  return (d1 >= (addHours(d2,-period)) && d1 <= (addHours(d2,period)));
}

最后，要检查当前时间是否在日落或日出附近，请使用isAround函数。然后将图像元素的来源设置为对应的图像。

if (isAround(dtime, dsunrise, 1)) {
  weatherImage.src = "sunrise_img";
}
else if (isAround(dtime, dsunset, 1)) {
  weatherImage.src = 'sunset_img';
} else {
  weatherImage.src = 'empty_img';
}

文件中还存在其他一些问题，例如使用functions with same names as variables（sunriseI，sunsetI），使用错误的变量（最后一行sunriseI），使用范围错误且不必要的onload事件，使用两个不必要的图像元素，等等。

以下是经过天气检查的更正代码（我对其进行了测试及其工作）：

https://pastebin.com/dKmy8Rcu

请注意：将clock1.0.3.2.js替换为clock.js版本。我也删除了代码中的translate函数用法。我也删除了weather，并用日落和日出的自定义变量替换了它。

我删除了它们是因为您没有在源代码中提供它们，因此，如果您拥有这些资源，只需将它们更改回去。

使用JavaScript的当前时间的日出日落时间图像

2 个答案: