HTML+CSS+JS製作一個立體感藍色簡約動態時鐘
阿新 • • 發佈:2021-08-30
HTML+CSS+JS製作一個立體感藍色簡約動態時鐘
HTML+CSS+JS製作一個藍色簡約動態時鐘
1. 效果圖:
2. 特點:這次使用了SVG,這樣可以簡化程式碼並提高各個比例視窗的相容性。
3. 程式碼實現:
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name ="viewport" content ="width = device-width" /> <meta name="author" content="戈小戈"> <title>時鐘</title> </head> <style lang="css"> .border { width: 100%; z-index: 999; } .s { position: absolute; left:0px; width: 100%; z-index: 9999; } .m { position: absolute; width: 100%; left:0px; z-index: -1; } .h { position: absolute; width: 100%; left:0px; z-index: -99; } </style> <body> <div style="position: relative;width: 200px;border-radius: 50%;background-color: #fff;z-index: -99;"> <svg class="border" id="clockborder" data-name="clockborder" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve"> <g id="图层_1"><g><circle style="fill:none;stroke:#47A1FF;stroke-width:25;stroke-miterlimit:10;" cx="500.642" cy="500.642" r="400"/><radialGradient id="SVGID_1_" cx="500.9512" cy="500.5284" r="403" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#FFFFFF"/><stop offset="3.615690e-07" style="stop-color:#FFFFFF"/><stop offset="4.238552e-07" style="stop-color:#FFFFFF"/> <stop offset="0.3219" style="stop-color:#FDFEFF"/> <stop offset="0.4713" style="stop-color:#F5FAFF"/> <stop offset="0.5852" style="stop-color:#E9F4FF"/> <stop offset="0.6811" style="stop-color:#D6EAFF"/> <stop offset="0.7657" style="stop-color:#BFDEFF"/> <stop offset="0.8422" style="stop-color:#A1CFFF"/> <stop offset="0.9128" style="stop-color:#7EBDFF"/> <stop offset="0.9767" style="stop-color:#57A9FF"/> <stop offset="1" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:none;stroke:url(#SVGID_1_);stroke-width:26;stroke-miterlimit:10;" cx="500.951" cy="500.528" r="390"/> <circle style="fill:none;stroke:#47A1FF;stroke-width:25;stroke-miterlimit:10;" cx="500.951" cy="500.528" r="365"/> </g> <radialGradient id="SVGID_2_" cx="500.7642" cy="162.0488" r="15" fx="500.9213" fy="149.125" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> <stop offset="1" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_2_);" cx="500.764" cy="162.049" r="15"/> <radialGradient id="SVGID_3_" cx="500.5122" cy="838.9675" r="15" fx="500.4798" fy="850.6807" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_3_);" cx="500.512" cy="838.967" r="15"/> <radialGradient id="SVGID_4_" cx="162.7398" cy="499.8293" r="15.5693" fx="149.2479" fy="499.7672" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_4_);" cx="162.74" cy="499.829" r="15"/> <radialGradient id="SVGID_5_" cx="839.3496" cy="499.8781" r="15" fx="851.7777" fy="499.649" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_5_);" cx="839.35" cy="499.878" r="15"/> <radialGradient id="SVGID_6_" cx="206.328" cy="670.4587" r="10" fx="201.4576" fy="673.2062" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_6_);" cx="206.328" cy="670.459" r="10"/> <radialGradient id="SVGID_7_" cx="206.8542" cy="329.6594" r="10" fx="200.6703" fy="321.8007" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5917" style="stop-color:#90C6FF"/> <stop offset="1" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_7_);" cx="206.854" cy="329.659" r="10"/> <radialGradient id="SVGID_8_" cx="672.353" cy="794.5993" r="10" fx="677.7106" fy="803.043" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_8_);" cx="672.353" cy="794.599" r="10"/> <radialGradient id="SVGID_9_" cx="793.9512" cy="328.2602" r="10" fx="800.3887" fy="323.2533" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_9_);" cx="793.951" cy="328.26" r="10"/> <circle style="fill:#47A1FF;" cx="500.235" cy="500.235" r="15"/> <radialGradient id="SVGID_10_" cx="671.042" cy="205.6975" r="10" fx="676.2205" fy="197.2985" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_10_);" cx="671.042" cy="205.697" r="10"/> <radialGradient id="SVGID_11_" cx="330.1263" cy="794.6352" r="10" fx="326.4055" fy="800.4544" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_11_);" cx="330.126" cy="794.635" r="10"/> <radialGradient id="SVGID_12_" cx="795.1361" cy="671.1677" r="10" fx="800.1601" fy="675.4394" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5484" style="stop-color:#90C6FF"/> <stop offset="0.9268" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_12_);" cx="795.136" cy="671.168" r="10"/> <radialGradient id="SVGID_13_" cx="330.9886" cy="205.9367" r="10" fx="326.0141" fy="197.2617" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="0.5917" style="stop-color:#90C6FF"/> <stop offset="1" style="stop-color:#47A1FF"/> </radialGradient> <circle style="fill:url(#SVGID_13_);" cx="330.989" cy="205.937" r="10"/> </g> </svg> <svg class="s" id="clockpointer" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.clss-1{fill:none;stroke:#47a1ff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:13px;}</style></defs><title>clockpointer</title><line class="clss-1" x1="500.75781" y1="497.33397" x2="501.57309" y2="135.82353"/></svg> <svg class="m" id="clockpointer" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.clsss-1{fill:none;stroke:#68b9ff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:17px;}</style></defs><title>clockpointer</title><line id="分針" class="clsss-1" x1="500.75938" y1="497.33397" x2="500.665" y2="225.36975"/></svg> <svg class="h" id="clockpointer" data-name="clockpointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.clssss-1{fill:none;stroke:#2fc8ff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:22px;}</style></defs><title>clockpointer</title><line id="時針" class="clssss-1" x1="500.75938" y1="495.33397" x2="500.665" y2="300.36975"/></svg> </div> <script> // autor:戈小戈 function setTime() { const sHand = document.querySelector('.s'); const mHand = document.querySelector('.m'); const hHand = document.querySelector('.h'); const d = new Date(); const ms = d.getMilliseconds();//毫秒 const s = d.getSeconds();//秒 const m = d.getMinutes();//分 const h = d.getHours();//時 const sDeg = (( s / 60 ) * 360 ) + (( ms / 1000 ) * 6 ); const mDeg = (( m / 60 ) * 360 ) + (( s / 60 ) * 6 ); const hDeg = (( h / 12 ) * 360 ) + (( m / 60 ) * 6 ); sHand.style.transform = 'rotate('+sDeg+'deg )'; mHand.style.transform = 'rotate('+mDeg+'deg )'; hHand.style.transform = 'rotate('+hDeg+'deg )'; } setInterval( setTime, 10 ); </script> </body> </html>