我會如何逆時針編輯極座標時鐘？

從這裏：http://raphaeljs.com/polar-clock.html 我會如何逆時針編輯極座標時鐘？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Raphaël · Polar Clock</title> 
     <link rel="stylesheet" href="demo.css" media="screen"> 
     <link rel="stylesheet" href="demo-print.css" media="print"> 
     <script src="raphael.js"></script> 
     <script> 
      window.onload = function() { 
       var r = Raphael("holder", 600, 600), 
        R = 200, 
        init = true, 
        param = {stroke: "#fff", "stroke-width": 30}, 
        hash = document.location.hash, 
        marksAttr = {fill: hash || "#444", stroke: "none"}, 
        html = [ 
         document.getElementById("h"), 
         document.getElementById("m"), 
         document.getElementById("s"), 
         document.getElementById("d"), 
         document.getElementById("mnth"), 
         document.getElementById("ampm") 
        ]; 
       // Custom Attribute 
       r.customAttributes.arc = function (value, total, R) { 
        var alpha = 360/total * value, 
         a = (90 - alpha) * Math.PI/180, 
         x = 300 + R * Math.cos(a), 
         y = 300 - R * Math.sin(a), 
         color = "hsb(".concat(Math.round(R)/200, ",", value/total, ", .75)"), 
         path; 
        if (total == value) { 
         path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]]; 
        } else { 
         path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; 
        } 
        return {path: path, stroke: color}; 
       }; 

       drawMarks(R, 60); 
       var sec = r.path().attr(param).attr({arc: [0, 60, R]}); 
       R -= 40; 
       drawMarks(R, 60); 
       var min = r.path().attr(param).attr({arc: [0, 60, R]}); 
       R -= 40; 
       drawMarks(R, 12); 
       var hor = r.path().attr(param).attr({arc: [0, 12, R]}); 
       R -= 40; 
       drawMarks(R, 31); 
       var day = r.path().attr(param).attr({arc: [0, 31, R]}); 
       R -= 40; 
       drawMarks(R, 12); 
       var mon = r.path().attr(param).attr({arc: [0, 12, R]}); 
       var pm = r.circle(300, 300, 16).attr({stroke: "none", fill: Raphael.hsb2rgb(15/200, 1, .75).hex}); 
       html[5].style.color = Raphael.hsb2rgb(15/200, 1, .75).hex; 

       function updateVal(value, total, R, hand, id) { 
        if (total == 31) { // month 
         var d = new Date; 
         d.setDate(1); 
         d.setMonth(d.getMonth() + 1); 
         d.setDate(-1); 
         total = d.getDate(); 
        } 
        var color = "hsb(".concat(Math.round(R)/200, ",", value/total, ", .75)"); 
        if (init) { 
         hand.animate({arc: [value, total, R]}, 900, ">"); 
        } else { 
         if (!value || value == total) { 
          value = total; 
          hand.animate({arc: [value, total, R]}, 750, "bounce", function() { 
           hand.attr({arc: [0, total, R]}); 
          }); 
         } else { 
          hand.animate({arc: [value, total, R]}, 750, "elastic"); 
         } 
        } 
        html[id].innerHTML = (value < 10 ? "0" : "") + value; 
        html[id].style.color = Raphael.getRGB(color).hex; 
       } 

       function drawMarks(R, total) { 
        if (total == 31) { // month 
         var d = new Date; 
         d.setDate(1); 
         d.setMonth(d.getMonth() + 1); 
         d.setDate(-1); 
         total = d.getDate(); 
        } 
        var color = "hsb(".concat(Math.round(R)/200, ", 1, .75)"), 
         out = r.set(); 
        for (var value = 0; value < total; value++) { 
         var alpha = 360/total * value, 
          a = (90 - alpha) * Math.PI/180, 
          x = 300 + R * Math.cos(a), 
          y = 300 - R * Math.sin(a); 
         out.push(r.circle(x, y, 2).attr(marksAttr)); 
        } 
        return out; 
       } 

       (function() { 
        var d = new Date, 
         am = (d.getHours() < 12), 
         h = d.getHours() % 12 || 12; 
        updateVal(d.getSeconds(), 60, 200, sec, 2); 
        updateVal(d.getMinutes(), 60, 160, min, 1); 
        updateVal(h, 12, 120, hor, 0); 
        updateVal(d.getDate(), 31, 80, day, 3); 
        updateVal(d.getMonth() + 1, 12, 40, mon, 4); 
        pm[(am ? "hide" : "show")](); 
        html[5].innerHTML = am ? "AM" : "PM"; 
        setTimeout(arguments.callee, 1000); 
        init = false; 
       })(); 
      }; 
     </script> 
     <style media="screen"> 
      #holder { 
       height: 600px; 
       margin: -300px 0 0 -300px; 
       width: 600px; 
      } 
      #time { 
       text-align: center; 
       font: 100 3em "Helvetica Neue", Helvetica, Arial, sans-serif; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="holder"></div> 
     <div id="time"> 
      <span id="h"></span>:<span id="m"></span>:<span id="s"></span> <span id="ampm"></span> · <span id="d"></span>/<span id="mnth"></span> 
     </div> 
     <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p> 
    </body> 
</html>

我怎麼會去只得到了幾分鐘，把它逆時針？

這裏是什麼要帶我大概有點像：http://i.imgur.com/Pvmkvs7.png

會存在也有辦法來編輯，他輕鬆地將彩色或CSS編輯的大小？

來源

2013-05-22 Liam Ramsey

沒有「初學者」，「簡單」的方法來做到這一點。它將涉及調整javascript，這需要一些高級js（以及我所看到的數學mathmathics）知識，或創建一個具有圓形，其他幾何形狀和圖像的複雜div結構。 – Tyblitz

這個時鐘很奇怪，它給了我以下時間：'11:60:29 PM'（應該是11:00）。 – bfavaretto

@bfavaretto我也遇到過這個問題。當分鐘（或應該是）00時，分鐘樂隊無法確定其想要的位置。 – Christopher

首先，下載所有東西，以便編輯它。您需要html源代碼，樣式表和腳本文件（raphael.js）。然後我們可以開始工作。

讓我們一個接一個的問題。要翻轉時鐘，我們可以在onload函數中編輯極座標數學（這使我們必須考慮），或者，我們可以使用scaleX來使用css3變換屬性（並且它是瀏覽器特定的別名）。我發現後者更加平易近人，更直觀。

#holder svg //apply to any elements of type svg within the element with the id 'holder' 
{ 
    transform:scaleX(-1); 
    -webkit-transform:scaleX(-1);//for chrome and safari 
    -ms-transform:scaleX(-1);//IE 9 
    -ms-filter: "FlipH";//IE 8 (not sure if it also applies to 7) 
}

接下來，您只想顯示分鐘數。爲此，我們需要刪除繪製其他弧線的代碼。有兩個地方引用這些弧線;一次一次（即「var sec = r.path（）。blahblahblah」），並且在更新期間（updateval（）的調用）一次。註釋掉所有這些行，除了引用min的那些行以外，因爲這是您要保留的分鐘弧。然後測試，看看它是否工作。

如果你想擺脫圓圈周圍的小點，你也可以評論每一個標記符號。你的選擇;在你測試的時候，不要生成這些小點是有意義的。他們通過svg來源滾動PITA。

希望有幫助！

來源

2013-05-22 03:21:00

我會如何逆時針編輯極座標時鐘？

回答

相關問題