1. 程式人生 > 其它 >HTML+CSS+JS製作一個立體感藍色簡約動態時鐘

HTML+CSS+JS製作一個立體感藍色簡約動態時鐘

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="&#x56FE;&#x5C42;_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>