使用svg實現動態時鐘效果

來源：懂視網責編：小采時間：2020-11-27 22:11:26

使用svg實現動態時鐘效果

使用svg實現動態時鐘效果:一個使用svg做的動態時鐘，供大家參考，具體內容如下怎么樣很酷吧，以下是源碼： <!DOCTYPE html> <html> <title>SVG clock</title> <meta http-equiv=content-type content=text

推薦度：

點擊下載本文 文檔為doc格式

導讀使用svg實現動態時鐘效果:一個使用svg做的動態時鐘，供大家參考，具體內容如下怎么樣很酷吧，以下是源碼： <!DOCTYPE html> <html> <title>SVG clock</title> <meta http-equiv=content-type content=text

一個使用svg做的動態時鐘，供大家參考，具體內容如下

怎么樣很酷吧，以下是源碼：

<!DOCTYPE html>
<html>
 <title>SVG clock</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link rel="stylesheet"  rel="external nofollow" >
 <!-- <link rel="stylesheet" type="text/css" href="canvas.css" rel="external nofollow" media="all" />-->
 <style type="text/css">
 #clock { 
 stroke: #adcd3c;
 stroke-linecap: round;
 fill: #f2fddb;
 }
 #face {
 stroke-width: 3px; 
 }
 #ticks {
 stroke-width: 2px;
 }
 #hands line { 
 stroke-linejoin: bevel; 
 }
 #hourhand {
 stroke-width: 4px; 
 }
 #minutehand {
 stroke-width: 3px; 
 }
 #numbers {
 font-size: 16px;
 text-anchor: middle;
 stroke: none;
 fill: #92b0dd;
 }
 </style>
 <script type="text/javascript">
 function updateTime() {
 var now = new Date();
 var second = now.getSeconds();
 var min = now.getMinutes();
 var hour = (now.getHours() % 12) + min / 60;
 var secondangle = second * 6; //6 degrees for every minute
 var minangle = min * 6; //6 degrees for every minute
 var hourangle = hour * 30; //30 degrees for every hour
 
 var minhand = document.getElementById('minutehand');
 var hourhand = document.getElementById('hourhand'); 
 var secondhand = document.getElementById('secondhand');
 var shadhand = document.getElementById("shadow");
 var clocks = document.getElementById("clock");
 if(second%2==0){
 //alert(clocks);
 clocks.style.stroke="#adcd3c";
 }else{
 //alert(secondangle);
 clocks.style.stroke="#ad223c";
 }
 
 minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)');
 hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)');
 secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)');
 for (var i = shadhand.childElementCount - 1; i >= 0; i--) {
 var chr = shadhand.children[i];
 switch (chr.tagName)
 {
 case "feGaussianBlur":
 /*if(secondangle/2)==1){
 chr.setAttribute(dx=-1)
 }else{
 chr.setAttribute(dx=1)
 }
 alert(chr.tagName);*/
 break;
 case "feOffset":
 if(second%2==0){
 //alert(secondangle);
 chr.setAttribute("dx","-3");
 }else{
 //alert(secondangle);
 chr.setAttribute("dx","3");
 }
 //alert(chr.tagName);
 break;
 case "feMerge":
 /*for (var i = 0; i < chr.childElementCount -1; i++) {
 chr.children[i].
 };*/
 //alert(chr.tagName);
 break;
 default:
 alert("could not found the Attribute");
 }
 };
 
 setTimeout(updateTime, 1000); //update time for every second
 }
 </script>
<body onload="updateTime()">
 <svg id="clock" viewBox="0 0 100 100" width="500" height="500">
 <defs>
 <!-- define an filter use to add shadow of some element -->
 <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
 <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
 <feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/>
 <feMerge>
 <feMergeNode in="SourceGraphic"/>
 <feMergeNode in="shadow" />
 </feMerge>
 </filter>
 </defs>
 <!-- clock face -->
 <circle id="face" cx="50" cy="50" r="45" />
 <!-- mark time lines -->
 <g id="ticks">
 <line x1="50.00" y1="5.000" x2="50.00" y2="10.00" />
 <line x1="72.50" y1="11.03" x2="70.00" y2="15.36" />
 <line x1="88.97" y1="27.50" x2="84.64" y2="30.00" />
 <line x1="95.00" y1="50.00" x2="90.00" y2="50.00" />
 <line x1="88.97" y1="72.50" x2="84.64" y2="70.00" />
 <line x1="72.50" y1="88.90" x2="70.00" y2="84.64" />
 <line x1="50.00" y1="95.00" x2="50.00" y2="90.00" />
 <line x1="27.50" y1="88.90" x2="30.00" y2="84.64" />
 <line x1="11.03" y1="72.50" x2="15.36" y2="70.00" />
 <line x1="5.000" y1="50.00" x2="10.00" y2="50.00" />
 <line x1="11.03" y1="27.50" x2="15.36" y2="30.00" />
 <line x1="27.50" y1="11.00" x2="30.00" y2="15.36" />
 </g>
 <!-- mark some important numbers -->
 <g id="numbers"> 
 <text x="50" y="20">12</text>
 <text x="85" y="55">3</text>
 <text x="50" y="88">6</text>
 <text x="15" y="55">9</text> 
 </g>
 <!-- show hands -->
 <g id="hands" filter="url(#shadow)">
 <line id="hourhand" x1="50" y1="50" x2="50" y2="24" />
 <line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
 <line id="secondhand" x1="50" y1="50" x2="50" y2="16" />
 </g> 
 </svg>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用svg實現動態時鐘效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現時鐘動態時鐘

熱門焦點

使用svg實現動態時鐘效果

使用svg實現動態時鐘效果

使用svg實現動態時鐘效果

最新推薦

猜你喜歡

熱門推薦