用 javascript 制作实时时钟

问题描述 投票：0回答：17

时钟还可以用。但它不是替换当前的时间，而是每秒打印一个新的时间。我明白为什么会这样，但我不知道如何解决它。如果您能在不直接说出答案的情况下给我一些提示，我将不胜感激。这是我的代码：

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);
javascript date time setinterval clock
17个回答
29
投票

添加一个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 = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);
<span id="span"></span>

答案已更新[2022]https://stackoverflow.com/a/67149791/7942242

20
投票

您还可以在 Date() 上使用 toLocaleTimeString() 来获取显示日期，而不是通过这么多变量来创建。

window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.body.innerHTML = display;
  setTimeout(displayClock, 1000); 
}

7
投票

在 setInterval 函数中使用 

new Date().toLocaleTimeString()
。

setInterval(() => console.log(new Date().toLocaleTimeString()),1000);

5
投票

以上是我的回答，希望对你有帮助。

<html>

<body>
  <script type="text/javascript" charset="utf-8">
    let a;
    let time;
    setInterval(() => {
      a = new Date();
      time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
      document.getElementById('time').innerHTML = time;
    }, 1000);
  </script>
  <span id="time"></span>
</body>

</html>

我使用了

setInterval
箭头函数，并在外部声明了变量
a
，
time
，以避免重复分配，其中span id（时间）运行指定的时间间隔（这里是1000）和
document.getElementById("time")
调用通过指定的 ID 获取元素，并且将该元素的 
innerHTML
设置为 
time
的值。

3
投票

请点击此链接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>
2
投票

代码将以数字格式显示时钟

function myClock() {         
  setTimeout(function() {   
    const d = new Date();
    const n = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = n; 
    myClock();             
  }, 1000)
}
myClock();    
<html>
    <body>
      <div id="demo"></div>
    </body>
</html>

1
投票

使用 ES6 可以很好地完成此操作。

const clock12 = document.getElementById('clock12')
const clock24 = document.getElementById('clock24')

// Concatenate a zero to the left of every single digit time frame
function concatZero(timeFrame) {
  return timeFrame < 10 ? '0'.concat(timeFrame) : timeFrame
}

function realTime() {
  let date = new Date()
  let sec = date.getSeconds()
  let mon = date.getMinutes()
  let hr = date.getHours()
  // 12 hour time
  // If the hour equals 0 or 12, the remainder equals 0, so output 12 instead. (0 || 12 = 12)
  clock12.textContent = `${concatZero((hr % 12) || 12)} : ${concatZero(mon)} : ${concatZero(sec)} ${hr >= 12 ? 'PM' : 'AM'}`
  // 24 hour time
  clock24.textContent = `${concatZero(hr)} : ${concatZero(mon)} : ${concatZero(sec)}`
}

setInterval(realTime, 1000)
body,
html {
  height: 100%;
  display: grid;
}

div {
  margin: auto;
  font-size: 2rem;
  font-family: consolas;
}
<div>
  <p id="clock12"></p>
  <p id="clock24"></p>
</div>

1
投票

如果这是您问题的根源

但是它不是替换 当前 一天中的时间，而是每秒打印 一个新的 一天中的时间。

那么你无法使 Date 对象响应，因为

JavaScript Date 对象以独立于平台的格式表示时间中的单个时刻。

如果你不想每秒创建一个新对象，你可以注册一个专用的Webworker，每秒调用performance.now()，但这比简单地创建Date对象对系统资源的要求更高，它只是复制实际的 system 时钟（因此不会创建单独的过程来测量时间）。 tl;dr: 就像你一样，每秒创建一个新的 Date 对象。

您的

document.write()
问题的根源源于这个：

因为 document.write() 写入文档流，所以在关闭（已加载）文档上调用 document.write() [在您的情况下在 setInterval 中] 自动调用 document.open()，这将 清除文档 .

要更新页面的一部分，您通常按照 @Pranav 的建议设置某些元素的 innerHTML。

1
投票

<html>
<head>
  <script>
    function clock() {
      var clockDiv = document.querySelector("#clock");
      return setInterval(() => {
        let date = new Date();
        let tick = date.toLocaleTimeString();
        clockDiv.textContent = tick;
      }, 1000);
    }
  </script>
</head>
<body onload="clock()">
  <div id="clock"></div>
</body>
</html>

1
投票

还请记住，代码并不是在一秒钟之内准确加载的，而且存在一个小的自然漂移。因此，如果您关心确切的秒数，您还需要保持同步。

这是一个例子继续上面yusrasyed的回答：

window.onload = displayClock();
function displayClock(){

  const d = new Date();
  var sync = d.getMilliseconds();
  var syncedTimeout = 1000 - sync;

  var display = d.toLocaleTimeString();
  document.body.innerHTML = display;

  setTimeout(displayClock, syncedTimeout); 
}
1
投票

setInterval(function () {
  const time = new Date().toTimeString().slice(0, 8);
  span.textContent = time
}, 1000)
<span id="span"></span>

0
投票

工作演示，请点击链接

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
投票

有人想知道如何编写带闹钟的数字时钟吗？这是我的代码笔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
投票

您可以在 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
投票

尝试这样的事情。

new Date()
将为您提供今天的日期。获取日期后获取今天日期的小时、分钟、秒。

setTimeout(startTime, 1000)
将帮助您连续运行计时器。

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

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

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

0
投票

一个简单的时钟就像这样

setInterval(() => {
     let arr  = Date().match(/\d{2}(?=:)|(?<=:)\d{2}/g).map(x => x = Number(x))
console.log(new Object({hours: arr[0], minutes: arr[1], seconds: arr[2]}))
},1000)

它的控制台打印出一个数组 [h, m, s]。

-1
投票

“一天中的新时间”是什么意思？但是为了替换新时间，您可以创建一个包含时间的 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);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.