0

我正在尝试为数字计算器编写程序。加载页面时，我的浏览器不显示任何时钟。

<html>
<head>
<style type="text/css">
.DigitalCalculator{
 background-color:blue;}

</style>        
</head>
<body>
<div **class="DigitalCalculator"**></div>
<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime = ;
setTime.innerHTML = **document.getElementsByClassName("DigitalCalculator")**;
setTimeout('updateTimer()',1000);
        }
updateTimer();    
</script>
</body>
</html>

为什么这不起作用？document.getElementsByClassName("DigitalCalculator")？

我通过更改代码解决了问题

和 var setTime = document.getElementById("clockDisplay");

为什么我不能使用以前的document.getElementsByClassName("DigitalCalculator") ？请看我下面的程序。.DigitalCalculator{ 背景颜色：蓝色；}

</style>        
</head>
<body>
<div id = "DisplayClock" **class="DigitalCalculator"**></div>
<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime =document.getElementById("DisplayClock");
setTime.innerHTML = h;
setTimeout('updateTimer()',1000);
        }
updateTimer();    
</script>
</body>
</html>
4

2 回答 2

0

不确定使用 getElementsById() 的优势。但是，这会返回一个数组，因此您要么必须引用第一个命中（如下例所示），要么枚举返回的实例并更新每个实例。 

<html>
<head>
<style type="text/css">
.DigitalCalculator { background-color:blue; }
</style>
</head>

<body>

<div class="DigitalCalculator"></div>

<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime = null;
setTime = document.getElementsByClassName('DigitalCalculator');
if ( setTime != null ) {
    setTime[0].innerHTML = h.toString() + ':' + m.toString() + ':' + s.toString();
    }
setTimeout('updateTimer()',1000);
}

updateTimer();
</script>

</body>
</html>
于 2013-06-11T20:37:02.680 回答
0

比较您的两个版本：

// syntax error
var setTime = ;

// trying to set the innerHTML of ? to a list of elements
// makes no sense!
setTime.innerHTML = document.getElementsByClassName("DigitalCalculator");

相对：

// grab the div and keep it in a variable
var setTime =document.getElementById("DisplayClock");

// set the innerHTML of the div to the value of h (a number)
// now it makes sense...
setTime.innerHTML = h;

另外，我建议将函数引用传递给setTimeout，而不是字符串：

setTimeout(updateTimer, 1000);
于 2013-06-11T20:31:55.703 回答