web-dev-qa-db-ja.com

JavaScriptでライブ時計を作る

時計はちょっと動作します。しかし、現在の時刻を置き換える代わりに、毎秒新しい時刻を出力します。なぜそれができるのかは理解していますが、それを修正する方法がわかりません。答えをすぐに言わずにいくつかのヒントを教えていただければ幸いです。ありがとうございました。これが私のコードです：

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);
javascriptdatetimesetintervalclock
9
WilliamG

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>
6
Pranav C Balan

動作するデモは、リンクに従ってください

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);
0
Aniket Singh

「新しい時間」とはどういう意味ですか？ただし、新しい時間を置き換えるには、時間を含むdivを作成し、time（）を呼び出すたびに、以下のように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);
0
Khanh Duc Tran

このリンクをたどってください https://codepen.io/uniqname/pen/eIApt あなたの欲望の時計を手に入れるか、このコードを試してください

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>
0
Ariful Islam

アラーム付きデジタル時計のコーディング方法を知りたい人はいますか？これが私のコードペンです http://codepen.io/abhilashn/pen/ZLgXbW

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

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

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

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

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

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

AmazeTime.prototype.setClock = function() {
        var clockDiv = document.getElementById("clock");
        var dayDiv = document.getElementById("day");
        var dateDiv = document.getElementById("date");
        var self = this;
        dayDiv.innerText = this.day;
        dateDiv.innerText = this.date + " " + this.month + " " + this.year;
        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() {
        this.almHour = this.doubleDigit(document.getElementById('almHour').value);
        this.almMinute = this.doubleDigit(document.getElementById('almMin').value);
        if(document.getElementById("am").checked == true) {
                this.almMeridiem = "AM";
        } else  {
                this.almMeridiem = "PM";
        }
}
AmazeTime.prototype.checkAlarm = function() {
        var audio = new Audio('http://abhilash.site44.com/images/codepen/audio/audio.mp3');
        if(this.hour == this.almHour && this.minute == this.almMinute && this.almMeridiem == this.meridiem) {
                audio.play();
                if(this.minute > this.almMinute) {
                        audio.pause();
                }
        } 
}

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

function saveAlarm() {          
        mytime.setAlarm();
        $('#myModal').modal('hide');
}
 
 
document.getElementById("savebtn").addEventListener("click", saveAlarm , false);
                        
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>
                <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>
          <form>
      <div class="modal-body">
                
                        <div class="form-inline">
                          <label for="hours" class="setalmlbl" >Hours  </label>
                          
                                <select class="form-control setalmtxtbox" name="almHour" id="almHour">
                                <script>
                                        for(var h = 1; h <= 12; h ++) {
                                  document.write("<option value="+ h +">" + h + "</option>");
                                  }
                                </script>
                                </select>
                                
                         <label for="minutes" class="setalmlbl"> Minutes  </label>
                                <select class="form-control setalmtxtbox" name="almMin" id="almMin">
                                <script>
                                        for(var m = 1; m <= 60; m++) {
                                  document.write("<option value="+ m +">" + m + "</option>");
                                  }
                                </script>
                                </select>
                         <div class="form-check">
                          <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="meridiem" id="am" value="am" checked>
                                 A.M.
                          </label>
                        </div> 
                        <div class="form-check">
                          <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm">
                                P.M.
                          </label>
                        </div> 
                         </form>
                        
                        
                        
                        </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>
         
    </div>
  </div>
</div>


                
                <div class="container-fluid">
                        
                        <div class="clock-content">
                                <div class="day" id="day"></div>
                                <div class="date" id="date"></div>
                                <div class="clock" id="clock"></div>
                        </div>
                </div>
0
Abhilash Narayan

ブラウザのライブクロックについては、このapp.jsのこの単純なjavascriptクロックを見ることができます https://github.com/danielrussellLA/simpleClock

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

setInterval(function(){
  clock.innerHTML = getCurrentTime();
}, 1);

function getCurrentTime() {
  var currentDate = new Date();
  var hours = currentDate.getHours() > 12 ? currentDate.getHours() - 12 : currentDate.getHours();
  hours === 0 ? hours = 12 : hours = hours;
  var minutes = currentDate.getMinutes();
  var seconds = currentDate.getSeconds() < 10 ? '0' + currentDate.getSeconds() : currentDate.getSeconds();
  var currentTime = hours + ':' + minutes + ':' + seconds;
  return currentTime;
}
0
drussell