编程模拟时钟时出现JavaScript问题_Javascript_Html

编程模拟时钟时出现JavaScript问题

javascript html

编程模拟时钟时出现JavaScript问题,javascript,html,Javascript,Html,我试着做一个简单的模拟时钟，当我试着给时钟的指针编程时，它们不动。我只是用CSS标记了秒针进行测试，但它不起作用代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0;

我试着做一个简单的模拟时钟，当我试着给时钟的指针编程时，它们不动。我只是用CSS标记了秒针进行测试，但它不起作用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        body{
            margin:0;
            padding:0;
            background-color:#E9E9E9;
            height:100%;
            width:100%;
            overflow:hidden;
            text-align:center;
            position:absolute;
        }

        #clock {
            margin:0 auto;
            top:100px;
            width:600px;
            height:600px;
            background-color:white;
            box-shadow:0px 0px 10px #A4A4A4;
            border-radius:300px;
            text-align:center;
        }

        #sec{
            position:relative;
            width:300px;
            height:10px;
            top:300px;
            left:300px;
            background-color:black;
            transform-origin:top left;
        }

    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
    </div>

    <script>

    window.addEventListener('load',(function init(){clock();}));

function clock(){
    var d, hour, min, sec;
        d = new Date;
        hour = d.getHours();
        min = d.getMinutes();
        sec = d.getSeconds();

    setAttr('min',min*6);
    setAttr('sec',sec*6);

    setInterval(clock, 1000);

}

function setAttr(id,val){
    var a = 'rotate(' + val + 'deg)';
    document.getElementById(id).style.transform = a;
}

function setAttr(id,val){
    var a = 'rotate(' + val + 'deg)';
    document.getElementById(id).style.transform = a;
}


    </script>
</body>
</html>


文件
身体{
保证金：0；
填充：0；
背景色：#E9E9E9；
身高：100%；
宽度：100%；
溢出：隐藏；
文本对齐：居中；
位置：绝对位置；
}
#钟{
保证金：0自动；
顶部：100px；
宽度：600px；
高度：600px；
背景色：白色；
盒影：0px 0px 10px#A4A4A4；
边界半径：300px；
文本对齐：居中；
}
#秒{
位置：相对位置；
宽度：300px；
高度：10px；
顶部：300px；
左：300px；
背景色：黑色；
变换原点：左上角；
}
addEventListener（'load'，（函数init（）{clock（）；}））；
功能时钟（）{
变量d，小时，分钟，秒；
d=新日期；
小时=d.getHours（）；
min=d.getMinutes（）；
sec=d.getSeconds（）；
setAttr（'min'，min*6）；
setAttr（'秒'，秒*6）；
设置间隔（时钟，1000）；
}
函数setAttr（id，val）{
变量a='旋转（'+val+'deg'）；
document.getElementById（id）.style.transform=a；
}
函数setAttr（id，val）{
变量a='旋转（'+val+'deg'）；
document.getElementById（id）.style.transform=a；
}

如果有人能帮我的话，我就把小提琴寄出去。

这是迄今为止的一个打字错误

function clock(){
     var date, hour, min, sec;
     date = new Date;
     hour = date.getHours();
     min = date.getMinutes();
     sec = date.getSeconds();

     setAttr('min',min*6);
     setAttr('sec',sec*6);

     setTimeout(clock, 1000);

}

有两件事阻碍了这项工作

首先，您的代码永远不会执行。您正在将事件附加到窗口的

load

事件，但该事件只能附加一个内容。按照设置JSIDdle的方式，JSIDdle加载事件处理程序正在对其进行重击（覆盖），因此永远不会调用它。如果您将JSFIDLE选项更改为

No wrap-in

，它将解决该问题

更好的解决方案仍然是使用安全、可移植的解决方案，如jQuery，它可以处理管理多个页面加载脚本所涉及的复杂性

一旦处理完毕，代码中就会出现一个输入错误：使用

而不是

date

（一旦代码实际运行，您将在控制台上看到）

修复了JSFIDLE:

我在你的小提琴中注意到的两件事：

什么是“d”？需要更改为“日期”

什么是‘s’？需要更改为整数

将setTimeout更改为setInterval

更新代码：

function clock(){
    var date, hour, min, sec;
        date = new Date;
        hour = date.getHours();
        min = date.getMinutes();
        sec = date.getSeconds();

    setAttr('min',min*6);
    setAttr('sec',sec*6);

    setInterval(clock, 1000);

}

更新小提琴：

以防万一，这是模拟时钟的工作版本：

var日期、hourPos、minPos、secPos；
函数时钟（）{
日期=新日期；
secPos=date.getSeconds（）*（360/60）；
minPos=date.getMinutes（）*（360/60）+secPos/60；
hourPos=date.getHours（）%12*（360/12）+minPos/60+secPos/3600；
setAttr（“小时”，小时-90）；
setAttr（'min'，minPos-90）；
setAttr（'sec'，secPos-90）；
}
函数setAttr（id，val）{
变量a='旋转（'+val+'deg'）；
document.getElementById（id）.style.transform=a；
}
设置间隔（时钟，1000/60）
正文{
保证金：0；
填充：0；
背景色：#E9E9E9；
身高：100%；
宽度：100%；
溢出：隐藏；
文本对齐：居中；
位置：绝对位置；
}
#钟{
保证金：0自动；
顶部：100px；
宽度：600px；
高度：600px；
背景色：白色；
盒影：0px 0px 10px#A4A4A4；
边界半径：300px；
文本对齐：居中；
}
#秒{
位置：相对位置；
宽度：250px；
高度：3倍；
顶部：300px；
左：300px；
背景色：黑色；
变换原点：左上角；
}
#时辰{
位置：相对位置；
宽度：150px；
高度：3倍；
顶部：300px；
左：300px；
背景颜色：黄色；
变换原点：左上角；
}
#闵{
位置：相对位置；
宽度：230px；
高度：3倍；
顶部：300px；
左：300px；
背景颜色：蓝色；
变换原点：左上角；
}
#秒{
位置：相对位置；
宽度：280px；
高度：3倍；
顶部：300px；
左：300px；
背景色：黑色；
变换原点：左上角；
}

跳出的两个bug。。。在您的时钟中（）-d.getHours（）。。。什么是d？setTimout（）只调用该方法一次，请尝试多次调用的setInterval（）。然后，在chrome中运行，使用F12工具并在脚本中设置断点，以查看发生了什么。一旦我看到问题，我就解决了它，它工作了，现在我有了我的工作模拟时钟：D感谢您的努力！