英文:
Second function isn't called in javascript using setInterval
问题
I'm trying to make a simple live clock and a dd/mm/yy output on the page, first function seems to work fine, but unfortunately the second function is not displaying on the page for some reason, tried everything but didn't help. I would be grateful if you could help me. Thank you in advance.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function clock() {
var date = new Date();
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var day = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var Part = (hour >= 12) ? 'PM' : 'AM';
if (hour == 0 && Part == 'PM') {
if (min == 0 && sec == 0) {
hour = 12;
Part = 'Noon'
} else {
hour = 12;
Part = 'PM';
}
}
if (hour > 12) {
hour = hour - 12;
}
var currentday = ('<br></br>' + 'Today is: ' + daylist[day]);
var time = ('Current time is: ' + hour + Part + ': ' + min + ': ' + sec + currentday);
document.getElementById('time').innerHTML = time;
}, 1000);
setInterval(function display() {
var date = new Date();
var date = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate = ('Current date is: ' + date + ':' + month + ':' + year);
document.getElementById('x').innerHTML = fullDate;
}, 1000);
<!-- language: lang-css -->
body {
background-color: red;
}
#time {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 20%;
}
#x {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 50%;
}
<!-- language: lang-html -->
<div id="time"></div>
<div id="x"></div>
<!-- end snippet -->
(Note: I have fixed some syntax errors in your code.)
英文:
I'm trying to make a simple live clock and a dd/mm/yy output on page,first function seems to work fine , but unfortunately the second function is not displaying on the page for some reason , tried everything but didn't helped. I would be grateful if you could help me. Thank you in advance
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setInterval(function clock() {
var date = new Date();
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"];
var day = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var Part = (hour >= 12) ? 'PM' : 'AM';
if (hour == 0 && Part == 'PM') {
if (minute == 0 && sec == 0) {
hour = 12;
Part = 'Noon'
} else {
hour = 12;
Part = 'PM'
}
}
if (hour > 12) {
hour = hour - 12;
}
var curentday = ('<br></br>' + 'Today is: ' + daylist[day]);
var time = ('Current time is : ' + hour + Part + ': ' + min + ': ' + sec + curentday);
document.getElementById('time').innerHTML = time;
}, 1000);
setInterval(function display() {
var date = new Date();
var date = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate = ('Current date is :' + date + ':' + month + ':' + year);
document.getElementById('x').innerHTML = fullDate;
}, 1000);
<!-- language: lang-css -->
body {
background-color: red;
}
#time {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 20%;
}
#x {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 50%;
}
<!-- language: lang-html -->
<div id="time"></div>
<div id="x"></div>
<!-- end snippet -->
答案1
得分: 1
当您执行var date = date.getDate();时，您覆盖了date的值，将其替换为一个数值（日期的天数）。删除该行代码将解决此问题。我还将函数定义从setInterval调用中提取出来，以使代码更可读，并确保无论JavaScript的实现和版本如何，它们都按正确的顺序调用。（我不预期第二个setInterval调用的回调会在第一个之前被调用，但最好知道事情是否正常运行，而不是仅仅希望和相信。另外，将业务逻辑与事件处理分开更容易阅读）
function display() {
var date = new Date();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate = ('Current date is :' + date + ':' + month + ':' + year);
document.getElementById('x').innerHTML = fullDate;
}
function clock() {
var date = new Date();
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"];
var day = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var Part = (hour >= 12) ? 'PM' : 'AM';
if (hour == 0 && Part == 'PM') {
if (min == 0 && sec == 0) {
hour = 12;
Part = 'Noon'
} else {
hour = 12;
Part = 'PM';
}
}
if (hour > 12) {
hour = hour - 12;
}
var curentday = ('<br></br>' + 'Today is: ' + daylist[day]);
var time = ('Current time is : ' + hour + Part + ': ' + min + ': ' + sec + curentday);
document.getElementById('time').innerHTML = time;
}
setInterval(function() {
clock();
display();
}, 1000);
body {
background-color: red;
}
#time {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 20%;
}
#x {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 50%;
}
<div id="time"></div>
<div id="x"></div>
英文:
When you did var date = date.getDate(); then you have overriden the value of date with a numeric value (date of month). Removing that line fixes the issue. I have also taken out the function definitions from inside the setInterval call to make it more readable and to ensure that they are called in the correct order, regardless of the Javascript implementations and versions. (I do not anticipate the callback of the second setInterval call to ever be called before the first, but it's always better to know that things work correctly rather than hoping and believing. Additionally, it's much more readable if we separate business logic from event handling)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function display() {
var date = new Date();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate = ('Current date is :' + date + ':' + month + ':' + year);
document.getElementById('x').innerHTML = fullDate;
}
function clock() {
var date = new Date();
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"];
var day = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var Part = (hour >= 12) ? 'PM' : 'AM';
if (hour == 0 && Part == 'PM') {
if (minute == 0 && sec == 0) {
hour = 12;
Part = 'Noon'
} else {
hour = 12;
Part = 'PM'
}
}
if (hour > 12) {
hour = hour - 12;
}
var curentday = ('<br></br>' + 'Today is: ' + daylist[day]);
var time = ('Current time is : ' + hour + Part + ': ' + min + ': ' + sec + curentday);
document.getElementById('time').innerHTML = time;
}
setInterval(function() {
clock();
display();
}, 1000);
<!-- language: lang-css -->
body {
background-color: red;
}
#time {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 20%;
}
#x {
color: white;
font-size: 3vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
text-align: center;
margin: 50%;
}
<!-- language: lang-html -->
<div id="time"></div>
<div id="x"></div>
<!-- end snippet -->
答案2
得分: 1
这是代码的修改版本，我将变量“date”更改为“day”，以使其更加明确，并将getDate()更改为getDay()
setInterval(function display(){
var date = new Date();
var day = date.getDay();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate =('Current date is :' + day + ':' + month + ':' + year );
document.getElementById('x').innerHTML = fullDate;
}, 1000);
我认为这是您要找的内容。
英文:
this is a modified version of the code, i changed "date" variable to "day" to be more explicit and i changed getDate() by getDay()
setInterval(function display(){
var date = new Date();
var day = date.getDay();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullDate =('Current date is :' + day + ':' + month + ':' + year );
document.getElementById('x').innerHTML = fullDate;
}, 1000);
I think this what you looking for
答案3
得分: 1
在@CBroe的回答中提到，你覆盖了`date`变量，这就是第一次运行时的原因 - 但第二次运行时它使用了`date.getDate()`的输出
setInterval(function display(){
var date = new Date();
var date = date.getDate(); <= 这是你覆盖的地方
var month = date.getMonth() + 1;
我想提供一种更简单的描述时间的方法：
nd = new Date();
"10/05/2023"，你可以格式化它
nd.toLocaleDateString([])
"16:14"，你可以格式化它
nd.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
<details>
<summary>英文:</summary>
Beside @CBroe's answer on the fact that you're overriding the `date` variable, this is why it runs the first time - but 2nd time it uses the output from `date.getDate()`
setInterval(function display(){
var date = new Date();
var date = date.getDate(); <= this is where you override
var month = date.getMonth() + 1;
I want to suggest a simpler way to describe time:
nd = new Date();
10/05/2023", you can format it
ns.toLocaleDateString([])
"16:14", you can format it
nd.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
</details>
# 答案4
**得分**: 1
你不需要进行所有这些计算。JavaScript已得到改进，包含了自己的i18n（国际化）库，即`Intl`，其中包括本地化格式化。
<details>
<summary>英文:</summary>
You do not need to do all those calculations. JavaScript has been improved and includes its own i18n (internationalization) library i.e. `Intl` which includes localization formatting.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const
timeEl = document.querySelector('#time'),
dateEl = document.querySelector('#date'),
locale = 'default'; // or 'en-US', etc...
update();
setInterval(update, 1000);
function update() {
updateTimeDisplay();
updateDateDisplay();
}
function updateTimeDisplay() {
const
now = new Date(),
timeString = now.toLocaleTimeString(locale),
weekday = now.toLocaleDateString(locale, { weekday: 'long' });
timeEl.innerHTML = `
<div>Current time: ${timeString}</div>
<div>Today is: ${weekday}</div>
`;
}
function updateDateDisplay() {
const
now = new Date(),
dateString = now.toLocaleDateString(locale);
dateEl.innerHTML = `
<div>Current date: ${dateString}</div>
`;
}
<!-- language: lang-css -->
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
font-family: Arial, Helvetica, sans-serif;
background-color: red;
color: white;
}
#date, #time {
font-size: 3vw;
font-weight: 900;
text-align: center;
}
<!-- language: lang-html -->
<div id="time"></div>
<div id="date"></div>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论