gpt4 book ai didi

javascript - 我的设备重叠,条件不工作

转载 作者:太空宇宙 更新时间:2023-11-03 21:04:00 24 4
gpt4 key购买 nike

我使用为齿轮 watch 等制作的 tizen studio 创建了简单的网络 watch 。

在这个网络 watch 中,我有 6 个条件。这些条件应该根据一天中的当前时间切换 watch 的背景。我可以说它应该像一天中的阶段一样。所以早-早-早-早-晚-晚-晚。

这些条件与数字 watch 一起加载。这是我设法让它工作的唯一方法。我的问题是。

夜间条件不工作,我不知道为什么,因为它与白天的条件相同。晚上 watch 应该回到“白天模式”时,它也不起作用。几天后,我猜 watch 会被重叠。

js

window.onload = function() {
// TODO:: Do your initialization job

// variables for img transitions

// add eventListener for tizenhwkey
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59


if(h === 0){
h = 24;
}

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;

// day1 starting

if('10:00:05' <= time&&time < '16:00:00')
{
document.getElementById("day1").style.opacity = "0";
document.getElementById("day2").style.opacity = "1";
}

if('16:00:05' <= time&&time < '20:00:00')
{
document.getElementById("day2").style.opacity = "0";
document.getElementById("day3").style.opacity = "1";
}

if('20:00:05' <= time&&time < '23:00:00')
{
document.getElementById("day3").style.opacity = "0";
document.getElementById("night1").style.opacity = "1";
}

if('23:00:05' <= time&&time < '04:00:00')
{
document.getElementById("night1").style.opacity = "0";
document.getElementById("night2").style.opacity = "1";
}

if('04:00:05' <= time&&time < '06:00:00')
{
document.getElementById("night2").style.opacity = "0";
document.getElementById("night3").style.opacity = "1";
}

if('06:00:05' <= time&&time < '10:00:00')
{
document.getElementById("nigth3").style.opacity = "0";
document.getElementById("day1").style.opacity = "1";
}

setTimeout(showTime, 1000);

}

showTime();

function showdate(){

var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
}

showdate();

};

html

.clock {
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 30px;
/* font-family: Orbitron; */
letter-spacing: 7px;
}

img {
position: fixed;
top: 0%;
left: 0%;
height: 360px;
width: 360px;
transition: all 5s ease;
}

#components-main {
position: absolute;
width: 100%;
height: 100%;
}

.showsPM {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 28px;
/* font-family: Orbitron; */
letter-spacing: 7px;
}

.showsDate {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 22px;
/* font-family: Orbitron; */
letter-spacing: 5px;
}

html

            <script src="js/main.js"></script>
</head>

<body>
<div id="container">


<img id="day1" src="/images/day1.png" style="opacity: 0"/>
<img id="day2" src="/images/day2.png" style="opacity: 1"/>
<img id="day3" src="/images/day3.png" style="opacity: 0"/>
<img id="night1" src="/images/night1.png" style="opacity: 0"/>
<img id="night2" src="/images/night2.png" style="opacity: 0"/>
<img id="night3" src="/images/night3.png" style="opacity: 0"/>

<!-- <div id="backgroundNight" style="opacity: 0;"></div>-->

<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<div id="date" class="showsDate"></div>

</div>
<script src="js/main.js"></script>

有什么更好的方法可以做这样的事情吗?或者您是否看到我的代码中有任何错误?

最佳答案

你的问题在这一行 if('23:00:05' <= time&&time < '04:00:00')此测试永远不会为真,因为您说时间应该大于 23 且小于 04。

比较运算符不知道01晚于23。所以你应该把&&变成|| (或)因为它们都在范围的边缘:

if('23:00:05' <= time || time < '04:00:00')

关于javascript - 我的设备重叠,条件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55880396/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com