js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:11:38

js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

本文實(shí)例為大家分享了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下：<。-- viewBox是坐標(biāo)系，width和height是指屏幕大小 -->；<；svg id="clock" viewBox="0 0 100 100" width="500" height="500">；<；defs>；<。-- 鐘緬 -->；<；g id="ticks">；<。-- 初始繪制成豎直的指針，之后通過(guò)js來(lái)做旋轉(zhuǎn) -->；<；g id="hands" filter="url(#shadow)">；<

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文實(shí)例為大家分享了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下：<。-- viewBox是坐標(biāo)系，width和height是指屏幕大小 -->；<；svg id="clock" viewBox="0 0 100 100" width="500" height="500">；<；defs>；<。-- 鐘緬 -->；<；g id="ticks">；<。-- 初始繪制成豎直的指針，之后通過(guò)js來(lái)做旋轉(zhuǎn) -->；<；g id="hands" filter="url(#shadow)">；<

本文實(shí)例為大家分享了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>Analog Clock</title>
<script>
function updateTime() { 
 var now = new Date(); // 當(dāng)前時(shí)間
 var min = now.getMinutes(); // 分鐘
 var hour = (now.getHours() % 12) + min/60; // 轉(zhuǎn)行成可以在時(shí)鐘上表示的時(shí)間
 var seconds = now.getSeconds(); //秒鐘
 var minangle = min*6; // 6度表示一分鐘
 var hourangle = hour*30; // 30 表示一小時(shí)
 var secrangel = seconds * 6; // 6度表示一秒鐘
 // 獲取表示時(shí)鐘時(shí)針的SVG元素
 var minhand = document.getElementById("minutehand");
 var hourhand = document.getElementById("hourhand");
 var secondhand = document.getElementById("secondhand");

 // 設(shè)置這些元素的SVG屬性，將它們移動(dòng)到鐘面上
 minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
 hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
 secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)");
 // 每秒鐘更新下時(shí)鐘顯示時(shí)間
 setTimeout(updateTime, 1000);
}
</script>
<style>

#clock { 
 stroke: black; 
 stroke-linecap: round; 
 fill: #eef; 
}
#face { stroke-width: 2px;} 
#ticks { stroke-width: 2px; } 
#hourhand {stroke-width: 3px;} 
#minutehand {stroke-width: 2px;} 
#secondhand{stroke-width: 1px;}
#numbers { 
 font-family: sans-serif; font-size: 7pt; font-weight: bold; 
 text-anchor: middle; stroke: none; fill: black;
}
</style>
</head>
<body onload="updateTime()">
 <!-- viewBox是坐標(biāo)系，width和height是指屏幕大小 -->
 <svg id="clock" viewBox="0 0 100 100" width="500" height="500"> 
 <defs> <!-- 定義下拉陰影的濾鏡 -->
 <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
 <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
 <feOffset in="blur" dx="1" dy="1" result="shadow" />
 <feMerge>
 <feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
 </feMerge>
 </filter>
 </defs>
 <circle id="face" cx="50" cy="50" r="45"/> <!-- 鐘緬 -->
 <g id="ticks"> <!-- 12小時(shí)的刻度 -->
 <line x1='50' 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.97' 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.97' 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.03' x2='30.00' y2='15.36'/>
 </g>
 <g id="numbers"> <!-- 標(biāo)記重要的幾個(gè)刻度值-->
 <text x="50" y="18">12</text><text x="85" y="53">3</text>
 <text x="50" y="88">6</text><text x="15" y="53">9</text>
 </g>
 <!-- 初始繪制成豎直的指針，之后通過(guò)js來(lái)做旋轉(zhuǎn) -->
 <g id="hands" filter="url(#shadow)"> <!-- 給指針添加陰影 -->
 <line id="hourhand" x1="50" y1="50" x2="50" y2="25"/>
 <line id="minutehand" x1="50" y1="50" x2="50" y2="18"/>
 <line id="secondhand" x1="50" y1="50" x2="50" y2="11"/>
 </g>
 </svg>
</body>
</html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：動(dòng)態(tài)時(shí)鐘 svg實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果 svg時(shí)鐘

熱門(mén)焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

最新推薦

猜你喜歡

熱門(mén)推薦