在javascript中制作一个实时时钟

时间：2016-09-09 19:21:04

标签： javascript date time setinterval clock

时钟有点工作。但是，它不是替换当前的时间，而是每秒打印一个新的时间。我理解它为什么这样做，但我不知道如何解决它。如果你能直接给出一些提示而不说答案，我将不胜感激。谢谢。这是我的代码：

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);

12 个答案:

答案 0 :(得分：6)

添加span元素并更新其文本内容。

＆＃13;
＆＃13; 
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);
＆＃13; 
<span id="span"></span>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：6)

您还可以在Date（）上使用toLocaleTimeString（）来获取显示日期，而不用创建太多变量。

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

答案 2 :(得分：1)

以上是我的回答，希望能帮到你。

<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(time) 运行指定的时间间隔（这里是 1000)，document.getElementById("time") 调用通过指定的 ID 获取元素，并将该元素的 innerHTML 设置为 time 的值。

答案 3 :(得分：0)

工作演示，请点击链接

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

<强>更新 你正在使用document.write，它每次追加当前时间（如果我没有错，你的问题是什么）。 所以用新时间取代以前的时间 - 1.你必须用替换模式打开文档（如下面的代码所示） 你写下当前时间 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);

答案 4 :(得分：0)

“新时间”是什么意思？但是为了替换新的时间，你可以创建一个包含时间的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);

答案 5 :(得分：0)

有谁想知道如何用闹钟编码数字时钟？这是我的codepen 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>

答案 6 :(得分：0)

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

答案 7 :(得分：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;
}

答案 8 :(得分：0)

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

cyclicBarrier.await()
        Thread t1 = new Thread(() -> {
            try {
                deadlock.method1(); 
            } catch (BrokenBarrierException | InterruptedException e) {
                e.printStackTrace();
            }
        });
        t1.start();

        Thread t2 = new Thread(() -> {
            try {
                deadlock.method2();
            } catch (BrokenBarrierException | InterruptedException e) {
                e.printStackTrace();
            }
        });
        t2.start();

        deadlock.tryToSleep(5000); // Wait till all threads have a chance to become alive

        assertEquals(Thread.State.BLOCKED, t1.getState());
        assertTrue(t1.isAlive());

        assertEquals(Thread.State.BLOCKED, t2.getState());
        assertTrue(t2.isAlive());

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)

答案 9 :(得分：0)

如果这是您问题的根源

<块引用>

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

那么你就不能让 Date object 响应，因为

<块引用>

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

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

您的 document.write() 问题的根源源于 this：

<块引用>

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

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

答案 10 :(得分：0)

只需使用 new Date().toLocaleTimeString() 它就会给你你想要的。

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

答案 11 :(得分：0)

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

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>

相关问题
最新问题