Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
1 / 1 / 0
Регистрация: 06.03.2017
Сообщений: 26

Вывести в картинку в соответствии с днем недели.

27.12.2018, 12:09. Показов 1376. Ответов 24
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте
Нужно вывести в картинку в соответствии с днем недели. События каждый день разные, соответственно данные находятся в json файле ибо иначе скрипт стал бы огромным.
Собсна вопрос - как вывести картинку (путь в json) Сам файл
код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrapper">
<h2>Сегодня</h2>
<div id="calendar"></div>
<div id="calendar_data">
  <h3>No Events</h3>
  <dl>
    <dt><dfn>Title:</dfn></dt><dd>No Events for this Day</dd>
    <dt><dfn>Hour:</dfn></dt><dd>No provide</dd>
    <dt><dfn>Venue:</dfn></dt><dd>No provide</dd>
    <dt><dfn>Location:</dfn></dt><dd>No provide</dd>
    <dt><dfn>Description:</dfn></dt><dd>No provide</dd>
    <dt><dfn>More Info:</dfn></dt><dd><a href="#" title="More info">Here</a><dt></dd>
  </dl>
</div>
<div class="clearfix"></div>
<div id="json">
 
</div>
        </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// Start
_('#calendar').innerHTML = calendar();
 
// short queySelector
function _(s) {
  return document.querySelector(s);
};
 
// show info
function showInfo(event) {
  // link 
  var url = 'http://site.ru/calendar.json';
  // get json
  getjson(url, function(obj) {
    for (key in obj) {
      // if has envent add class
      if(_('[data-id="' + key + '"]')){
        _('[data-id="' + key + '"]').classList.add('event');        
      }
      if (event === key) {
        // template info
        var data = '<h3>' + obj[key].type + '</h3>' +
            '<dl>' +
            '<dt><dfn>Title:</dfn></dt><dd>' + obj[key].title + '</dd>' +
            '<dt><dfn>Hour:</dfn></dt><dd>' + obj[key].time + '</dd>' +
            '<dt><dfn>Venue:</dfn></dt><dd>' + obj[key].venue + '</dd>' +
            '<dt><dfn>Location:</dfn></dt><dd>' + obj[key].location + '</dd>' +
            '<dt><dfn>Description:</dfn></dt><dd>' + obj[key].desc + '</dd>' +
            '<dt><dfn></dfn></dt><dd><a href="' + obj[key].more +
            '" title="">Утренняя служба</a><dt></dd>' +
            '</dl>' +
        '<dt><dfn></dfn></dt><dd><a href="' + obj[key].more1 +
            '" title="титле">Литургия</a><dt></dd>' +
            '</dl>' +
            '<dt><dfn></dfn></dt><dd><a href="' + obj[key].more2 +
            '" title="титле">Мчч.</a><dt></dd>' +
            '</dl>'
        ;
        return _('#calendar_data').innerHTML = data;
      }
    }
  });
}
 
// simple calendar
function calendar() {
  // show info on init
  showInfo();
 
  // vars
  var day_of_week = new Array(
    'Sun', 'Mon', 'Tue',
    'Wed', 'Thu', 'Fri', 'Sat'),
      month_of_year = new Array(
    'January', 'February', 'March',
    'April', 'May', 'June', 'July',
    'August', 'September', 'October',
    'November', 'December'),
      
      Calendar = new Date(),
      year = Calendar.getYear(),
      month = Calendar.getMonth(),
      today = Calendar.getDate(),
      weekday = Calendar.getDay(),
      html = '';
 
  // start in 1 and this month
  Calendar.setDate(1);
  Calendar.setMonth(month);
 
  // template calendar
  html = '<table>';
  // head
  html += '<thead>';
  html += '<tr class="head_cal"><th colspan="7">' + month_of_year[month] + '</th></tr>';
  html += '<tr class="subhead_cal"><th colspan="7">' + Calendar.getFullYear() + '</th></tr>';
  html += '<tr class="week_cal">';
  for (index = 0; index < 7; index++) {
    if (weekday == index) {
      html += '<th class="week_event">' + day_of_week[index] + '</th>';
    } else {
      html += '<th>' + day_of_week[index] + '</th>';
    }
  }
  html += '</tr>';
  html += '</thead>';
 
  // body
  html += '<tbody class="days_cal">';
  html += '</tr>';
  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }
  
  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {
 
      week_day = Calendar.getDay();
      
      if (week_day === 0) {
        html += '</tr>';
      }
      if (week_day !== 7) {
        // this day
        var day = Calendar.getDate();
        var info = (Calendar.getMonth() + 1) + '/' + day + '/' + Calendar.getFullYear();
 
        if (today === Calendar.getDate()) {
          html += '<td><a class="today_cal" href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
            day + '</a></td>';
 
          showInfo(info);
          
        } else {
          html += '<td><a href="#" data-id="' + info + '" onclick="showInfo(\'' + info + '\')">' +
            day + '</a></td>';
        }
 
      }
      if (week_day == 7) {
        html += '</tr>';
      }
    }
    Calendar.setDate(Calendar.getDate() + 1);
  } // end for loop
  return html;
}
 
 
//   Get Json data  
function getjson(url, callback) {
  var self = this,
      ajax = new XMLHttpRequest();
  ajax.open('GET', url, true);
  ajax.onreadystatechange = function() {
    if (ajax.readyState == 4) {
      if (ajax.status == 200) {
        var data = JSON.parse(ajax.responseText);
        return callback(data);
      } else {
        console.log(ajax.status);
      }
    }
  };
  ajax.send();
}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
*,
*:after,
*:before {
  box-sizing: border-box;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
 
 
body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}
/* for demo */
.wrapper {
  display:block;
  width: 600px;
  margin: 10px auto;
  background: #FCFCFC;
  color: #C5C2C2;
}
div#calendar {
  margin: 0;
  padding: 0;
  display: block;
  width: 50%;
  float: left;
  height: 300px;
  background: #F3F3F3;
}
table {
  width: 100%;
  font-family: sans-serif;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #DADADA;
  background: #ECECEC;
  height: 300px;
}
thead {} tr.head_cal {
  background: #FFAFAF;
  color: #FF8D8D;
  font-size: 20px;
  line-height: 60px;
  text-transform: uppercase;
}
tr.subhead_cal {
  background: #FF8585;
  color: #FFF;
  font-size: 18px;
  line-height: 28px;
}
tr.week_cal {
  background: #FFF;
  color: #D5D5D5;
  font-size: 15px;
  line-height: 27px;
}
td.white_cal {
  background: #ECECEC!important;
}
tbody.days_cal tr td a {
  padding: 5px 7px;
  text-decoration: none;
  color: #B9B9B9;
  line-height: 30px;
}
tbody.days_cal tr td {
  padding: 0;
  margin: 0;
  background: #FAFAFA;
  border: 1px solid #EBEAEA;
  text-align: center;
}
.event {
  border-radius: 100%;
  border-bottom: 1px solid #3498DB;
  transition: all 0.3s ease;
}
.today_cal.event {
  border-radius: 100%;
  border-bottom: 1px solid #EE7171;
  transition: all 0.3s ease;
}
.today_cal.event:hover,
.event:hover{
  border-color: #E26D2B;
  color: #E26D2B;
  transition: all 0.3s ease;
}
.week_event {
  color: #EE7171;
}
#calendar_data {
  margin: 0;
  padding: 0;
  display: block;
  width: 50%;
  float: left;
  height: 300px;
  background: #fff;
  border: 1px solid #E6E6E6;
  color: #C5C2C2;
  font-size: 13px;
  font-family: sans-serif;
  font-weight: 700;
}
#calendar_data h3 {
  text-align: center;
  font-size: 20px;
  padding: 5px 10px;
  margin: 0;
  color: #FF7676;
  border-bottom: 1px solid #EEEBEB;
  text-transform: capitalize;
}
#calendar_data  dl {
  padding: 0.5em;
  margin-left: -1em;
}
#calendar_data  dt {
  float: left;
  clear: left;
  width: 100px;
  text-align: right;
  font-weight: bold;
  color: #8F8F8F;
}
#calendar_data  dd {
  margin: 0 0 0 110px;
  padding: 0 0 0.5em 0;
}
#calendar_data a {
  color: #FF8585;
  text-decoration: underline;
}
#json pre {
  display: block;
  clear: left;
  margin-top: 21px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: auto;
  height: 220px;
  background: #E46868;
  color: #FFF;
  border: 1px solid #E47B7B;
}
http://jsfiddle.net/Gegemon/nog0ymb9/1/
JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "12/26/2018": {
        "type":"",
        "title": "26 декабря 2018 г. ( 13 декабря ст.ст.), среда.Седмица 31-я по Пятидесятнице. Рождественский пост.",        
        "venue":"Hyatt Regency Hotel",
        "time": "10:00 AM",
        "desc": "htyh-cerkvej.html", 
        "more": "http://site.ru/biblija/novyj-zavet/evangelie-ot-matfeja/1673-glava-10.html#10-16",
        "more1": "http://site.ru/biblija/novyj-zavet/sobornoe-poslanie-svjatogo-apostola-iakova/1674-glava-1.html#1-18",
        "more2": "http://site.ru/biblija/novyj-zavet/poslanie-k-efesjanam-svjatogo-apostola-pavla/1684-glava-6.html#6-10"
   },
    "12/27/2018": {
        "type":"",
        "title": "27 декабря 2018 г. ( 14 декабря ст.ст.), четверг.\nСедмица 31-я по Пятидесятнице. Рождественский пост.",
        "venue":"Hyatt Regency Hotel",
        "time": "10:00 AM",
        "desc": "htyh-cerkvej.html",
        "more": "http://site.ru/biblija/novyj-zavet/sobornoe-poslanie-svjatogo-apostola-iakova/1674-glava-1.html#1-19",
        "more1": "",
        "more2": "http://site.ru/zhitija/1726-mucheniki-firs-levkij-i-kallinik-kesarijskie.html"
    }
 }
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.12.2018, 12:09
Ответы с готовыми решениями:

Предусмотрено любое число от 1 до 7. Вывести день недели в соответствии с этим номером
Предусмотрено любое число от 1 до 7. Вывезти день недели в соответствии с этим номером (1 - понедельник, 2 - вторник и т. Д.).

Найти номер дня недели К-го дня года, если в этом году 1 января было днем недели с номером N
Дни недели пронумерованы следующим образом: 0 - воскресенье, 1 - понедельник, 2 - вторник, ..., 6 - суббота. Даны целые числа K в...

ds1307 проблема с днем недели
Имею в наличии ds1307 + атмега32а. Часы, в принципе, работают. Время и дата установлены, с ними проблем нет. Однако значение дня недели...

24
108 / 76 / 27
Регистрация: 14.11.2016
Сообщений: 260
15.01.2019, 08:04
Студворк — интернет-сервис помощи студентам
Позже попробую дописать. Вы мне другое скажите: может, я, конечно, не заметил чего, но я не вижу ни одного URL изображений (.jpg,.png,.gif) в json-ответе, откуда берётся изображение?
0
1 / 1 / 0
Регистрация: 06.03.2017
Сообщений: 26
15.01.2019, 08:35  [ТС]
а их там и нет. Как их правильно туда прописать - отчасти и из-за этого создана тема.
0
108 / 76 / 27
Регистрация: 14.11.2016
Сообщений: 260
15.01.2019, 08:49
Так, стоп...JSON-ответ генерируется сервером, там же и рендерится (происходит его сборка). В этом случае клиентский JavaScript-код тут не поможет. На стороне клиента мы можем взять JSON-ответ, распарсить его (т.е. разобрать по кусочкам) и вставить нужный url в атрибут src нужного элемента <img />. Если вам нужно вставить на сайт картинку, то, соответственно, вам нужна и сама картинка! :-)
0
1 / 1 / 0
Регистрация: 06.03.2017
Сообщений: 26
15.01.2019, 09:05  [ТС]
shsv382,
Что нужна картинка это я понимаю. В соседней теме товарищу нужно определенный текст выводить еженедельно, может на основе того скрипта можно сделать.
Вы просто командуйте ибо JS я не знаю совсем!
0
108 / 76 / 27
Регистрация: 14.11.2016
Сообщений: 260
15.01.2019, 09:10
Цитата Сообщение от Dimon25 Посмотреть сообщение
d("куда_надо_вставить_картинку").
? я так понимаю она будет выводится в том блоке в котором вставлю js
неправильно понимаете - JavaScript автоматически ничего вставлять не будет. Вы можете сгенерировать элемент (img, например), а место вставки указывается отдельно:
JavaScript
1
2
3
4
5
let img = document.createElement("img");
img.src = "/url_картинки/";
 
let wrapper = document.getElementById("wrapper");
wrapper.append(img); // либо appendChild / insertBefore / и еще много много разных методов
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.01.2019, 09:10
Помогаю со студенческими работами здесь

Определить каким днем недели будет 1 января
Дни недели пронумерованы таким образом: 0 - воскресенье, 1 - понедельник, 2 - вторник, ..., 6 - субота. Сегодня N-й день недели. К новому...

Сравнить элемент массива с текущим днем недели
Здравствуйте. У меня возникла проблема, я решил обратиться к Вам. Задача стоит так: у меня есть программа, которая забивается в...

Какой спецификатор для даты с днем недели?
Здравствуйте, русское название дня недели в С# можно получить Console.WriteLine( &quot;День недели: {0}&quot;, DateTime.Now.ToString(...

Определить, каким днем недели является введенное число
Добрый день помогите пожалуйста написать программу: 1) Составить программу, определяющую каким днем недели является введенное...

Найти, каким днем недели является k-ый день года
Помогите решить задачку в QBasic. Дано целое число k (1 ≤ k ≤ 365). Присвоить целочисленной величине n значе- ние 1, 2, ..., 6 или 0 в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
25
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru