• 首页

    • 官方

    • 主题

    • 关注

    • 联系

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;
}
.sleepstate {
    display:none;
    position: absolute;
    width: 20%;
    left:40%;
    bottom: 20%;
    z-index: -99;
}
.motionstate {
    display:none;
    position: absolute;
    width: 20%;
    left:40%;
    bottom: 20%;
    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="350.36975"/></svg>
            <svg class="sleepstate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:none;stroke:#29abe2;stroke-linecap:round;stroke-linejoin:round;stroke-width:20px;}#z1{animation: haha1 2s linear infinite;-webkit-animation: haha1 2s linear infinite;-moz-animation: haha1 2s linear infinite;-ms-animation: haha1 2s linear infinite;-o-animation: haha1 2s linear infinite;}@keyframes haha1 { 0% {transform: rotate(0deg);} 50% {transform:rotate( 6deg);} 100% {transform: rotate(0deg);}}@-webkit-keyframes haha1 { 0% {transform: rotate(0deg); } 50% {transform: rotate( 6deg);} 100% {transform: rotate(0deg); }}@-moz-keyframes haha1 { 0% {transform: rotate(0deg); } 50% {transform: rotate( 6deg); } 100% {transform: rotate(0deg); }}@-ms-keyframes haha1 { 0% {transform: rotate(0deg); } 50% {transform: rotate( 6deg); } 100% {transform: rotate(0deg); }}@-o-keyframes haha1 { 0% {transform: rotate(0deg); } 50% {transform: rotate( 6deg); } 100% {transform: rotate(0deg); }}</style></defs><title>休息</title><rect class="cls-1" x="204.16955" y="667.00678" width="592.94546" height="74.97832"/><line class="cls-1" x1="203.33511" y1="805.112" x2="203.33511" y2="507.61739"/><line class="cls-1" x1="796.99407" y1="805.69248" x2="796.99407" y2="508.19786"/><circle class="cls-1" cx="264.53919" cy="610.38605" r="44.62419"/><path class="cls-1" d="M315.82666,662.16947a29.09947,29.09947,0,0,1-11.84513-27.44153c1.95735-13.58277,13.2514-20.16755,14.61463-20.93157a960.67376,960.67376,0,0,1,473.40341-32.808"/><polyline id="z1" class="cls-1" points="414.967 373.297 516.99 351.372 443.859 459.002 546.784 434.088"/><polyline id="z1" class="cls-1" points="751.161 210.856 808.256 196.578 767.329 266.671 824.93 250.446"/><polyline id="z1" class="cls-1" points="595.157 278.848 679.396 263.091 619.013 340.44 703.997 322.535"/></svg>
            <svg class="motionstate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:none;stroke:#29abe2;stroke-linecap:round;stroke-linejoin:round;stroke-width:20px;}#z1{animation: haha1 2s linear infinite;-webkit-animation: haha1 2s linear infinite;-moz-animation: haha1 2s linear infinite;-ms-animation: haha1 2s linear infinite;-o-animation: haha1 2s linear infinite;}@keyframes haha1 { 0% {transform: translateY(0px);} 50% {transform:translateY(50px);} 100% {transform: translateY(0px);}}@-webkit-keyframes haha1 { 0% {transform: translateY(0px);} 50% {transform:translateY(50px);} 100% {transform: translateY(0px);}}@-moz-keyframes haha1 { 0% {transform: translateY(0px);} 50% {transform:translateY(50px);} 100% {transform: translateY(0px);}}@-ms-keyframes haha1 { 0% {transform: translateY(0px);} 50% {transform:translateY(50px);} 100% {transform: translateY(0px);}}@-o-keyframes haha1 { 0% {transform: translateY(0px);} 50% {transform:translateY(50px);} 100% {transform: translateY(0px);}}</style></defs><title>motion</title><circle class="cls-1" cx="500.45528" cy="394.23577" r="50"/><rect class="cls-1" x="424.43902" y="463.77236" width="148.78049" height="190.2439" rx="12"/><polyline class="cls-1" points="423.626 802.423 499.236 654.455 574.846 803.236"/><line id="z1" class="cls-1" x1="203.58714" y1="246.57608" x2="203.58714" y2="196.57608"/><line id="z1" class="cls-1" x1="797.24611" y1="247.15655" x2="797.24611" y2="197.15655"/><polyline id="z1" class="cls-1" points="238.041 261.294 238.041 212.837 238.041 163.374"/><line id="z1" class="cls-1" x1="762.43095" y1="262.431" x2="762.43095" y2="164.51074"/><line id="z1" class="cls-1" x1="762.43089" y1="212.02439" x2="238.04072" y2="212.8374"/><polyline id="z1" class="cls-1" points="324.22 436.232 324.22 335.214 324.22 232.098"/><line id="z1" class="cls-1" x1="674.62599" y1="435.60171" x2="674.62599" y2="231.46748"/></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 ) * 30 );
                
                sHand.style.transform = 'rotate('+sDeg+'deg )';
                mHand.style.transform = 'rotate('+mDeg+'deg )';
                hHand.style.transform = 'rotate('+hDeg+'deg )';

                // 显示状态，8:00-22:00(不包括22:00以后)为运动状态，其他时间为休息状态
                if(h >= 22 || h <=7) {document.querySelector('.sleepstate').style.display = 'block';document.querySelector('.motionstate').style.display = 'none';}
                else {document.querySelector('.sleepstate').style.display = 'none';document.querySelector('.motionstate').style.display = 'block';}
                 
    }
    setInterval( setTime, 10 );
</script>
</body>
</html>
posted @ 2021-08-30 17:28  戈小戈  阅读(417)  评论(0)  编辑  收藏  举报