Создание живых часов в javascript

Question

Часы видные работы. Но вместо замены текущего времени суток он печатает новое время дня каждую секунду. Я понимаю, почему он это делает, но я не знаю, как это исправить. Я был бы признателен, если бы вы могли дать мне несколько советов, не сказав ответ прямо. Спасибо. Вот мой код:

function time(){ 
    var d = new Date(); 
    var s = d.getSeconds(); 
    var m = d.getMinutes(); 
    var h = d.getHours(); 
    document.write(h + ":" + m + ":" + s); 
} 

setInterval(time,1000); 

Answer 1

Добавить элемент span и обновить его текстовое содержимое.

var span = document.getElementById('span'); 
 

 
function time() { 
 
    var d = new Date(); 
 
    var s = d.getSeconds(); 
 
    var m = d.getMinutes(); 
 
    var h = d.getHours(); 
 
    span.textContent = h + ":" + m + ":" + s; 
 
} 
 

 
setInterval(time, 1000);

<span id="span"></span>

Answer 2

рабочая демо, перейдите по ссылке

http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Обновлено вы используете document.write, который присоединяет текущее время каждый раз, когда (и это то, что ваша проблема была, если я не ошибаюсь). Итак, для замены предыдущего времени на новое время - 1. Вам нужно открыть документ с режимом замены (как показано ниже) 2. Вы записываете текущее время 3. затем вы закрываете документ.

function time(){ 
    var d = new Date(); 
    var s = d.getSeconds(); 
    var m = d.getMinutes(); 
    var h = d.getHours(); 
    document.open("text/html", "replace"); 
    document.write(h + ":" + m + ":" + s); 
    document.close(); 
} 

setInterval(time,1000); 

Answer 3

Что вы подразумеваете под «новым временем дня»? Но для того, чтобы заменить новое время, вы можете создать DIV содержать время и каждый раз, когда вы звоните времени(), установить, что div.innerHTML = «», как показано ниже

HTML:

<div id="curr_time"></div> 

JS:

var div = document.getElementById('curr_time'); 
function time() { 
    div.innerHTML = ""; 
    var d = new Date(); 
    var s = d.getSeconds(); 
    var m = d.getMinutes(); 
    var h = d.getHours(); 
    div.innerHTML = h + ":" + m + ":" + s; 
} 

setInterval(time, 1000); 

Answer 4

любой желающий знать, как закодировать цифровые часы с сигнализацией? Вот мой codepen http://codepen.io/abhilashn/pen/ZLgXbW

function AmazeTime(almbtnobj) { 
 
\t this.date,this.day,this.dt,this.month, this.year,this.hour,this.minute,this.second = null; 
 
\t this.almHour, this.almMinute, almMeridiem = null; 
 
\t this.meridiem = "AM"; 
 
\t this.almBtn = almbtnobj; 
 
\t this.almBtn = this.setAlarm; 
 
} 
 

 
AmazeTime.prototype.initializeTime = function() { 
 
\t this.dt = new Date(); 
 
\t this.day = this.getDayInWords(this.dt.getDay()); 
 
\t this.date = this.dt.getDate(); 
 
\t this.month = this.getMonthInShort(this.dt.getMonth()); 
 
\t this.year = this.dt.getFullYear(); 
 
\t this.hour = this.setHour(this.dt.getHours()); 
 
\t this.minute = this.doubleDigit(this.dt.getMinutes()); 
 
\t this.second = this.doubleDigit(this.dt.getSeconds()); 
 
\t this.meridiem = this.setMeridiem(this.dt.getHours()); 
 
} 
 

 
AmazeTime.prototype.setHour = function(hr) { \t 
 
\t if(hr > 12) { 
 
\t \t hr = hr - 12; 
 
\t } 
 
\t if(hr === 0) { 
 
\t \t hr = 12; 
 
\t } 
 
\t return this.doubleDigit(hr); 
 
} 
 

 
AmazeTime.prototype.doubleDigit = function(val) { 
 
\t if(val < 10) { 
 
\t \t val = "0" + val; 
 
\t } 
 
\t return val; 
 
} 
 
AmazeTime.prototype.setMeridiem = function(hr) { 
 
\t if(hr > 12) { 
 
\t \t hr = hr - 12; 
 
\t \t return "PM"; 
 
\t } else { 
 
\t \t return "AM"; 
 
\t } 
 
} 
 

 
AmazeTime.prototype.getMonthInShort = function(value) { 
 
\t switch(value) { 
 
\t \t case 0: 
 
\t \t \t return "Jan"; 
 
\t \t \t break; 
 
\t \t case 1: 
 
\t \t \t return "Feb"; 
 
\t \t \t break; 
 
\t \t case 2: 
 
\t \t \t return "Mar"; 
 
\t \t \t break; 
 
\t \t case 3: 
 
\t \t \t return "Apr"; 
 
\t \t \t break; 
 
\t \t case 4: 
 
\t \t \t return "May"; 
 
\t \t \t break; 
 
\t \t case 5: 
 
\t \t \t return "Jun"; 
 
\t \t \t break; 
 
\t \t case 6: 
 
\t \t \t return "Jul"; 
 
\t \t \t break; 
 
\t \t case 7: 
 
\t \t \t return "Aug"; 
 
\t \t \t break; 
 
\t \t case 8: 
 
\t \t \t return "Sep"; 
 
\t \t \t break; 
 
\t \t case 9: 
 
\t \t \t return "Oct"; 
 
\t \t \t break; 
 
\t \t case 10: 
 
\t \t \t return "Nov"; 
 
\t \t \t break; 
 
\t \t case 11: 
 
\t \t \t return "Dec"; 
 
\t \t \t break; \t \t } 
 
} 
 

 
AmazeTime.prototype.getDayInWords = function(value) { 
 
\t switch(value) { 
 
\t \t \t case 0: 
 
\t \t \t \t return "Sunday"; 
 
\t \t \t \t break; 
 
\t \t \t case 1: 
 
\t \t \t \t return "Monday"; 
 
\t \t \t \t break; 
 
\t \t \t case 2: 
 
\t \t \t \t return "Tuesday"; 
 
\t \t \t \t break; 
 
\t \t \t case 3: 
 
\t \t \t \t return "Wednesday"; 
 
\t \t \t \t break; 
 
\t \t \t case 4: 
 
\t \t \t \t return "Thursday"; 
 
\t \t \t \t break; 
 
\t \t \t case 5: 
 
\t \t \t \t return "Friday"; 
 
\t \t \t \t break; 
 
\t \t \t case 6: 
 
\t \t \t \t return "Saturday"; 
 
\t \t \t \t break; 
 
\t } \t \t 
 
} 
 

 
AmazeTime.prototype.setClock = function() { 
 
\t var clockDiv = document.getElementById("clock"); 
 
\t var dayDiv = document.getElementById("day"); 
 
\t var dateDiv = document.getElementById("date"); 
 
\t var self = this; 
 
\t dayDiv.innerText = this.day; 
 
\t dateDiv.innerText = this.date + " " + this.month + " " + this.year; 
 
\t clockDiv.innerHTML = "<span id='currentHr'>" + this.hour + "</span>:<span id='currentMin'>" + this.minute + "</span>:" + this.second + " <span id='meridiem'>" + this.meridiem + "</span>"; 
 
} 
 

 
AmazeTime.prototype.setAlarm = function() { 
 
\t this.almHour = this.doubleDigit(document.getElementById('almHour').value); 
 
\t this.almMinute = this.doubleDigit(document.getElementById('almMin').value); 
 
\t if(document.getElementById("am").checked == true) { 
 
\t \t this.almMeridiem = "AM"; 
 
\t } else { 
 
\t \t this.almMeridiem = "PM"; 
 
\t } 
 
} 
 
AmazeTime.prototype.checkAlarm = function() { 
 
\t var audio = new Audio('http://abhilash.site44.com/images/codepen/audio/audio.mp3'); 
 
\t if(this.hour == this.almHour && this.minute == this.almMinute && this.almMeridiem == this.meridiem) { 
 
\t \t audio.play(); 
 
\t \t if(this.minute > this.almMinute) { 
 
\t \t \t audio.pause(); 
 
\t \t } 
 
\t } 
 
} 
 

 
var mytime = null; 
 
mytime = new AmazeTime(document.getElementById("savebtn")); 
 
window.addEventListener('load', function() { 
 
\t function runTime() { 
 
\t mytime.initializeTime(); 
 
\t mytime.setClock(); 
 
\t mytime.checkAlarm(); 
 
\t } 
 
setInterval(runTime, 1000); \t 
 
} \t , false); \t 
 

 
function saveAlarm() { \t \t 
 
\t mytime.setAlarm(); 
 
\t $('#myModal').modal('hide'); 
 
} 
 
    
 
    
 
document.getElementById("savebtn").addEventListener("click", saveAlarm , false); 
 
\t \t \t

body { background:#A3ABF2; font-family:Arial; text-align:center; } 
 
.day { font-size:64px; } 
 
.date { font-size:33px; } 
 
.clock { font-size:44px; } 
 
.clock-content { margin-top:35vh; color:#FFF; } 
 
.alarm-icon { font-size:34px; cursor:pointer; position:absolute; top:15px; right:15px; color:#FFF; } 
 
.setalmlbl { padding-right:20px; } 
 
.setalmtxtbox { margin-right:10px; width:60px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i id="alarmbtn" data-toggle="modal" data-target="#myModal" class="fa fa-bell alarm-icon"></i> 
 
\t \t <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel"> Set Alarm</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
\t <form> 
 
     <div class="modal-body"> 
 
\t \t 
 
\t \t \t <div class="form-inline"> 
 
\t \t \t <label for="hours" class="setalmlbl" >Hours </label> 
 
\t \t \t 
 
\t \t \t \t <select class="form-control setalmtxtbox" name="almHour" id="almHour"> 
 
\t \t \t \t <script> 
 
\t \t \t \t \t for(var h = 1; h <= 12; h ++) { 
 
\t \t \t \t document.write("<option value="+ h +">" + h + "</option>"); 
 
\t \t \t \t } 
 
\t \t \t \t </script> 
 
\t \t \t \t </select> 
 
\t \t \t \t 
 
\t \t \t <label for="minutes" class="setalmlbl"> Minutes </label> 
 
\t \t \t \t <select class="form-control setalmtxtbox" name="almMin" id="almMin"> 
 
\t \t \t \t <script> 
 
\t \t \t \t \t for(var m = 1; m <= 60; m++) { 
 
\t \t \t \t document.write("<option value="+ m +">" + m + "</option>"); 
 
\t \t \t \t } 
 
\t \t \t \t </script> 
 
\t \t \t \t </select> 
 
\t \t \t <div class="form-check"> 
 
\t \t \t <label class="form-check-label"> 
 
\t \t \t \t <input class="form-check-input" type="radio" name="meridiem" id="am" value="am" checked> 
 
\t \t \t \t A.M. 
 
\t \t \t </label> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-check"> 
 
\t \t \t <label class="form-check-label"> 
 
\t \t \t \t <input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm"> 
 
\t \t \t \t P.M. 
 
\t \t \t </label> 
 
\t \t \t </div> 
 
\t \t \t </form> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="submit" id="savebtn" class="btn btn-primary">Save</button> 
 
     </div> 
 
\t 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
\t \t 
 
\t \t <div class="container-fluid"> 
 
\t \t \t 
 
\t \t \t <div class="clock-content"> 
 
\t \t \t \t <div class="day" id="day"></div> 
 
\t \t \t \t <div class="date" id="date"></div> 
 
\t \t \t \t <div class="clock" id="clock"></div> 
 
\t \t \t </div> 
 
\t \t </div>