связать HTML с JavaScript-объектом Date

Question

связать HTML с JavaScript-объектом Date

0

Я пытаюсь создать страницу, которая принимает текущие часы и минуты из модуля даты javascript, а затем делает фоновый цвет уникальным на основе этой информации.

что нужно изменить, чтобы получить html, понравившийся javascript? (новичок в этом, если вы не можете сказать).

HTML

<html>

    <head>
        <meta charset="UTF-8">
        <title>New color for each minute of day</title>

    </head>

    <body id="body">

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

    </body>

</html>

JAVASCRIPT

var body = document.getElementById("body");
var a = 0;
var b = 0;
var c = 0;


function currentTime() {
    var today = new Date();
    var hour = today.getHours();
    var minute = today.getMinutes();

    minute = formatTime(minute);

    text.innerHTML = hour + ":" + minute;

    return minute
}

function changeColor() {
    for (minute =< 59; a + 1); 

    for (hour =< 24; b + 10);

}

function setScene() {
    timeValue = currentTime();

}

window.addEventListener("load", initialScene, false);
document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')';

rs19 05 май 2014, в 22:35

Источник

0

А какой text будет внутри currentTime ?
Artjom B. 05 май 2014, в 20:36
0

@ArtjomB. упс была ошибка копирования / вставки.
rs19 05 май 2014, в 20:37
0

CSS не может прочитать то, что в вашем коде JavaScript (поэтому a , b и c имеют никакого значения в вашем CSS). Кроме того, вы не сделаете объединенную строку для значения background-color , вы просто сделаете ее background-color: rgb(123, 123, 123); где 123 с являются целыми числами от 0 до 255 . Вероятно, было бы проще, если бы JS применял определенный класс к вашему body зависимости от времени, а затем имел набор классов, определенных в вашем CSS, который будет устанавливать различный цвет фона для каждого класса (и JS в конечном итоге будет применять один из тех классов).
ajp15243 05 май 2014, в 20:39
0

@ ajp15243 Я нашел скрипку JS, которая сделала это так ... но независимо, как мне улучшить это, чтобы оно работало?
rs19 05 май 2014, в 20:40
0

@ rs202 Если вы нашли JS Fiddle, использующую JS-подобную логику в CSS, возможно, он использовал действительно старую функцию IE, которая позволяла оценивать JavaScript внутри CSS. Эта функция устарела, устарела и удалена в течение очень долгого времени.
ajp15243 05 май 2014, в 20:42
0

@ ajp15243 и повторно классы: не означает ли это 59 классов для каждого миина и затем 24 для каждого часа? Есть ли более эффективный способ?
rs19 05 май 2014, в 20:42
0

@ rs202 Если вам нужно столько классов, то, вероятно, проще, если JS будет напрямую редактировать стили, а не применять класс, и придумать некоторую простую арифметику в JS, которая может динамически генерировать значения цвета по времени. Или, если вы не можете придумать какой-либо удобный арифметический прием, просто создайте массив цветов или сопоставьте времена с цветами и используйте время, чтобы динамически выбирать свой цвет из массива / карты. Похоже, что вы уже делаете арифметическое решение с помощью циклов for . Посмотрите ответ @ tomysshadow, думаю, это поможет вам продвинуться дальше.
ajp15243 05 май 2014, в 20:44

Показать ещё 5 комментариев

Теги:

javascript

html

2 ответа

0

Я думаю, вы просите меняющийся фон на каждую минуту дня. Вам нужно определить повторяющуюся функцию, которая считывает время и изменяет цвет. У вас это как setScene.

Теперь вы можете вызывать его каждые 60 секунд автоматически, вставляя следующее где-то внутри initialScene:

setInterval(setScene, 60000);

Artjom B. 05 май 2014, в 19:34

Ещё вопросы

А какой text будет внутри currentTime ?
@ArtjomB. упс была ошибка копирования / вставки.
CSS не может прочитать то, что в вашем коде JavaScript (поэтому a , b и c имеют никакого значения в вашем CSS). Кроме того, вы не сделаете объединенную строку для значения background-color , вы просто сделаете ее background-color: rgb(123, 123, 123); где 123 с являются целыми числами от 0 до 255 . Вероятно, было бы проще, если бы JS применял определенный класс к вашему body зависимости от времени, а затем имел набор классов, определенных в вашем CSS, который будет устанавливать различный цвет фона для каждого класса (и JS в конечном итоге будет применять один из тех классов).
@ ajp15243 Я нашел скрипку JS, которая сделала это так ... но независимо, как мне улучшить это, чтобы оно работало?
@ rs202 Если вы нашли JS Fiddle, использующую JS-подобную логику в CSS, возможно, он использовал действительно старую функцию IE, которая позволяла оценивать JavaScript внутри CSS. Эта функция устарела, устарела и удалена в течение очень долгого времени.
@ ajp15243 и повторно классы: не означает ли это 59 классов для каждого миина и затем 24 для каждого часа? Есть ли более эффективный способ?
@ rs202 Если вам нужно столько классов, то, вероятно, проще, если JS будет напрямую редактировать стили, а не применять класс, и придумать некоторую простую арифметику в JS, которая может динамически генерировать значения цвета по времени. Или, если вы не можете придумать какой-либо удобный арифметический прием, просто создайте массив цветов или сопоставьте времена с цветами и используйте время, чтобы динамически выбирать свой цвет из массива / карты. Похоже, что вы уже делаете арифметическое решение с помощью циклов for . Посмотрите ответ @ tomysshadow, думаю, это поможет вам продвинуться дальше.

tomysshadow · Accepted Answer · 2014-05-05T18-45-00.000Z

Опустите CSS (тег стиля) в первом примере и просто используйте простой JS.

document.getElementsByTagName("body")[0].style.background="rgb("+a+", "+b+", "+c+");";

должен это сделать

Это главная проблема. Кроме того, в вашей функции changeColor вы не используете цикл for правильно, хотя у вас есть правильная идея.

for (minute=0;minute<=59;minute+=1) {
a=minute;
}
for (hour=0;hour=<24;hour+=10) {
b=hour;
}

для циклов может быть запутанным предметом для новичков JS, но есть несколько отличных обучающих онлайн. Сделайте Google Search и действительно потратите время, чтобы узнать, что делает цикл for когда-нибудь, это хорошо, что нужно знать.

PS Я не вижу, где c определено.

Спасибо за это! где должно быть ваше первое заявление JS?
@ rs202 Это меняет цвет, поэтому, вероятно, в конце changeColor .
Это должно идти после того, как a, b и c все были определены. Так что желательно в конце вашей функции "changeColor".