用JavaScript編寫模擬時鐘時出現問題

-2

我試圖製作一個簡單的模擬時鐘，而我試圖編程時鐘的手，他們不動。我只用CSS來標記要測試的秒針，但它不起作用。用JavaScript編寫模擬時鐘時出現問題

這是代碼：

<!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>

我發佈小提琴如果有人能幫助我。 https://jsfiddle.net/ubm06q32/

來源

2015-08-18 Amat Martinez

夫婦是跳出來......在你的時鐘（）的bug - d.getHours（）...什麼是d？ setTimout（）只調用一次方法，嘗試重複調用setInterval（）。然後，使用chrome運行，使用F12工具並在腳本中設置斷點以查看正在發生的事情。 –

有一對夫婦的事情，是防止這種工作。

首先是你的代碼永遠不會執行。您將一個事件附加到窗口的load事件中，但該事件只能附加一件事情。你有你的jsFiddle的方式設置，jsFiddle加載事件處理程序是clobbering（覆蓋）它，所以它永遠不會被調用。如果您將jsFiddle選項更改爲No wrap - in <head>，它將解決該問題。

更好的解決方案仍然是使用像jQuery這樣的安全的可移植解決方案，它可以處理管理多個頁面加載腳本所涉及的複雜問題。

處理完畢後，代碼中出現拼寫錯誤：使用d而不是date（代碼實際運行後，您將在控制檯上看到該代碼）。

固定的jsfiddle：https://jsfiddle.net/kjs7esbs/1/

來源

2015-08-18 22:26:16

非常感謝的人，真的！ –

它是一個錯字化妝d迄今爲止

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

}

來源

2015-08-18 22:23:47 joyBlanks

夫婦的事情，我在你的提琴注意到：

什麼是 '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); 

}

更新小提琴：

https://jsfiddle.net/ubm06q32/13/

來源

2015-08-18 22:44:06

只需在您需要的情況下，這是模擬時鐘的工作版本：

var date, hourPos, minPos, secPos; 
 
    
 
function clock(){ 
 
    date = new Date; 
 
    
 
    secPos = date.getSeconds() * (360/60); 
 
    minPos = date.getMinutes() * (360/60) + secPos/60; 
 
    hourPos = date.getHours() % 12 * (360/12) + minPos/60 + secPos/3600; 
 
    
 
    setAttr('hour', hourPos - 90); 
 
    setAttr('min', minPos - 90); 
 
    setAttr('sec', secPos - 90); 
 
} 
 

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

 
setInterval(clock, 1000/60);

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:250px; 
 
    height:3px; 
 
    top:300px; 
 
    left:300px; 
 
    background-color:black; 
 
    transform-origin:top left; 
 
} 
 

 
#hour{ 
 
    position:relative; 
 
    width:150px; 
 
    height:3px; 
 
    top:300px; 
 
    left:300px; 
 
    background-color:yellow; 
 
    transform-origin:top left; 
 
} 
 

 
#min{ 
 
    position:relative; 
 
    width:230px; 
 
    height:3px; 
 
    top:300px; 
 
    left:300px; 
 
    background-color:blue; 
 
    transform-origin:top left; 
 
} 
 

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

<div id="clock"> 
 
    <div id="hour"></div> 
 
    <div id="min"></div> 
 
    <div id="sec"></div> 
 
</div>

的jsfiddle：https://jsfiddle.net/ubm06q32/18/

來源

2015-08-18 23:14:07 quanfoo

一旦我看到問題，我解決了它，它的工作，現在我有我的工作模擬時鐘：D謝謝你的努力！ –

用JavaScript編寫模擬時鐘時出現問題

回答

相關問題