Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2019, 14:43
Новичок на форуме
Отправить личное сообщение для GariVUdI Посмотреть профиль Найти все сообщения от GariVUdI
 
Регистрация: 19.07.2019
Сообщений: 2

javascript события
<html>
<head>
  <meta http-eqyiv="Content-Type" Content="text/html;charset UTF-8"/>
  <meta http-equiv="content-language" content="ru">
  <link rel="stylesheet" type="text/css" href="../www/css/calendarStyle.css"/>
  <title>Calendar Test</title>

<style type="text/css"></style>
</head>
<body>
<div class="calendar-header">
    <button class="open-button"  onclick="openForm()">Добавить</button>
    <button class="open-button" onclick="window.location.reload()">Обновить</button>
    <input type="text" class="search" placeholder="Событие, дата, участник">
      
        <div class="form-popup" id="myForm">
                <form action="#" class="form-container">
         <label for="name" for="date" for="info"><b></b></label>
          <input type="text" class='inputEnter' placeholder="Событие и дата" name="name" required pattern="[A-Za-z A-Za-z 0-31.0-12.0-3000 ">
                  
                  <button type="submit" id="btnFast" class="btn">Готово</button>
                  <button type="button" class="btn cancel" onclick="closeForm()">Закрыть</button>
                </form>
        </div>
</div>

<div class="modal">
  <h1>Создать событие</h1>
  <form id="formContainer" >
      <label for="eventName"> 
        <input type="text" class="textType" id="eventName" placeholder="Событие"><br>
      </label>
      <label for="eventDate">  
        <input type="date" class="textType" id="eventDate" placeholder="Дата" ><br>
      </label>
      <label for="eventMember">
        <input type="text" class="textType" id="eventMember" placeholder="Участник"><br>
      </label>
      <label for="textArea">
        <textarea  id="textArea" placeholder="Описание" cols="20" rows="5"></textarea><br>
      </label> 
  </form>
       <input id="btnsubmit" type="button" value="Готово" class="submitType"/>
       <input type="button" class="submitType" style="display: none" value="Редактировать">
       <input type="reset" class="submitType" onclick="resetForm();" >
</div>


<div id="calendar_table"></div> 
<script type="text/javascript" src="../www/js/CalendarJS.js"></script>
</body>
</html>



(function(){
    var applicant = {
      
      eventName : "",
      eventDate : "",
      eventMember : "",
      textArea : ""
    };
    
    var storageLogic = {
      saveItem: function(){
        var lscount = localStorage.length;
        var inputs = document.getElementById("formContainer");
        applicant.eventName = inputs[0].value;
        applicant.eventDate = inputs[1].value;
        applicant.eventMember = inputs[2].value;
        applicant.textArea = inputs[3].value;
    
        localStorage.setItem("applicant_"+ lscount, JSON.stringify(applicant));
        location.reload();
      },
      loaddata: function() {
                    var datacount = localStorage.length;
                    if (datacount > 0)
                    {
                        var render = document.getElementById('tdID').onclick = calendar.selectDate();
                        
                        for (i=0; i < datacount; i++) {
                            var key = localStorage.key(i);
                            var applicant = localStorage.getItem(key);
                            var data = JSON.parse(applicant);
    
                            render +=  data.eventName+'<br>';
                            render +=  data.eventDate+'<br>';
                            render +=  data.eventMember+'<br>';
                            render +=  data.textArea+'<br>
                     }
                        var newTable = document.getElementById("tdID");
                        newTable.innerHTML = render;
                    }
                    
                    
                  }
                  
            };
            
            window.onload = function() {
                storageLogic.loaddata();
          var btnsubmit = document.getElementById('btnsubmit');
          btnsubmit.addEventListener('click', storageLogic.saveItem, false);
            };
    
    })();
    function resetForm(){
      document.getElementById('formContainer').reset();
    }
     
    function openForm() {
        document.getElementById("myForm").style.display = "block";
    }
    
    function closeForm() {
        document.getElementById("myForm").style.display = "none";
    }
    window.onclick = function ( event ){
        if(event.target == document.getElementById("myForm")){
            document.getElementById("myForm").style.display = 'none'
        }
    }
    
    
    calendar = {};
    
    
    
    // Названия месяцев
    calendar.monthName=[
      'Январь', 'Февраль', 'Март', 'Апрель',
      'Май', 'Июнь', 'Июль', 'Август',
      'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
    ];
    
    // Названия дней недели
    calendar.dayName=[
      'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'
    ];
    
    // Выбранная дата
    calendar.selectedDate = {
      'Day' : null,
      'Month' : null,
      'Year' : null
    };
    
    // ID элемента для размещения календарика
    calendar.elementId=null;
    
    // Выбор даты
    calendar.selectDate = function myFunc(day,month,year) {
      calendar.selectedDate={
        'Day' : day,
        'Month' : month,
        'Year' : year
      };
      
      openWin();
      
      (function (){
        var date = new Date ().toISOString().substring(0,10),
          field = document.querySelector ('#date');
        field.value = date;
        console.log(field.value);  
      })
    }
    
    // Отрисовка календарика на выбранный месяц и год
    calendar.drawCalendar = function(month,year) {
      var tmp='';
      tmp+='<table class="calendar" cellspacing="2" cellpadding="2">';
    
      // Месяц и навигация
      tmp+='<tr>';
      tmp+='<td class="navigation" '+
           'onclick="calendar.drawCalendar('+(month>1?(month-1):12)+
           ','+(month>1?year:(year-1))+');">◄<\/td>';
      tmp+='<td colspan="5" class="navigation" '+
           'onclick="calendar.drawCalendar('+
           calendar.selectedDate.Month+','+
           calendar.selectedDate.Year+');">'+
           calendar.monthName[(month-1)]+'&nbsp;-&nbsp;'+year+'<\/td>';
      tmp+='<td class="navigation" '+
           'onclick="calendar.drawCalendar('+(month<12?(month+1):1)+
           ','+(month<12?year:(year+1))+');">►<\/td>';
      tmp+='<\/tr>';
    
      // Шапка таблицы с днями недели
      tmp+='<tr>';
      tmp+='<th>'+calendar.dayName[0]+'<\/th>';
      tmp+='<th>'+calendar.dayName[1]+'<\/th>';
      tmp+='<th>'+calendar.dayName[2]+'<\/th>';
      tmp+='<th>'+calendar.dayName[3]+'<\/th>';
      tmp+='<th>'+calendar.dayName[4]+'<\/th>';
      tmp+='<th class="holiday">'+calendar.dayName[5]+'<\/th>';
      tmp+='<th class="holiday">'+calendar.dayName[6]+'<\/th>';
      tmp+='<\/tr>';
    
      // Количество дней в месяце
      var total_days = 32 - new Date(year, (month-1), 32).getDate();
      // Начальный день месяца
      var start_day = new Date(year, (month-1), 1).getDay();
      if (start_day==0) { start_day=7; }
      start_day--;
      // Количество ячеек в таблице
      var final_index=Math.ceil((total_days+start_day)/7)*7;
       
      var day=1;
      var index=0;
      do {
        // Начало строки таблицы
        if (index%7==0) {
          tmp+='<tr>';
        }
        // Пустые ячейки до начала месяца или после окончания
        if ((index<start_day) || (index>=(total_days+start_day))) {
          tmp+='<td class="grayed">&nbsp;<\/td>';
        }
        else {
          var class_name='';
            // Выбранный день
          if (calendar.selectedDate.Day==day &&
              calendar.selectedDate.Month==month &&
              calendar.selectedDate.Year==year) {     
            class_name='selected';
          }
          // Ячейка с датой
          tmp+='<td id="tdID" class="'+class_name+'" '+
               'onclick="calendar.selectDate('+
               day+','+month+','+year+');">'+day+'<\/td>';
          day++;
    
           
           
        }
        
        // Конец строки таблицы
        if (index%7==6) {
          tmp+='<\/tr>';
        }
        index++;
      }
      while (index<final_index);
    
      tmp+='<\/table>';
    
      // Вставить таблицу календарика на страницу
      var el=document.getElementById(calendar.element_id);
      if (el) {
        el.innerHTML=tmp;
      }
    }
    
    // ID элемента для размещения календарика
    calendar.element_id = 'calendar_table';
    
    // По умолчанию используется текущая дата
    calendar.selectedDate={
      'Day' : new Date().getDate(),
      'Month' : parseInt(new Date().getMonth())+1,
      'Year' : new Date().getFullYear()
    };
    
    // Нарисовать календарик
    calendar.drawCalendar(
      calendar.selectedDate.Month,
      calendar.selectedDate.Year
    );
    document.createElement('input')
    
    
    
    
    var modal = document.querySelector('.modal');
    var overflow = document.createElement('div');
    function openWin() {
            overflow.className = "overflow";
            document.body.appendChild(overflow);
            var height = modal.offsetHeight;
            modal.style.marginTop = - height / 2 + "px";
            modal.style.top = "50%";
    }
    
    if (!Element.prototype.remove) {
            Element.prototype.remove = function remove() {
                    if (this.parentNode) {
                            this.parentNode.removeChild(this);
                    }
            };
    }
    
    overflow.onclick = function () {
            modal.style.top = "-100%";
            overflow.remove();
    }
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2019, 14:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,624

36 строка закрой кавычку, поставь точку с запятой
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
события javascript s24344 Элементы интерфейса 4 18.06.2018 10:47
frontend разработчик JavaScript Москва Михаил2016 Работа 4 21.08.2016 13:30
Петербург: Javascript + Canvas. Разработчик для портирования игры. В офис. waxattack Работа 0 21.07.2016 14:06
Имитирование события KeyPress в браузере Firefox - JavaScript Mid1987 Events/DOM/Window 0 24.11.2015 05:50
Первый Moscow JavaScript Meetup korenyushkin Общие вопросы Javascript 0 26.07.2011 14:23