【web项目】前端生日礼物--clock篇

汪汪想变强

已于 2022-10-06 19:12:04 修改

阅读量495

点赞数

文章标签：前端 javascript 开发语言

于 2022-10-03 16:40:05 首次发布

本文链接：https://blog.csdn.net/m0_65431212/article/details/127087435

版权

文章目录

学习制作时钟
学习切换早晚状态
学习计时器
把背景放入
把时钟放入
加入计时器
加入音效
加入护眼模式
其他
成品

学习制作时钟

在这里插入图片描述
代码路径：

C:\wamp\www\SmallProject\GlassClock

学习切换早晚状态

在这里插入图片描述

C:\wamp\www\SmallProject\dayNight_cut

学习计时器

在这里插入图片描述

C:\wamp\www\lz_brithday\test\timer

把背景放入

在这里插入图片描述

把时钟放入

步骤：

扣除单独代码 ok
把代码放入clock页面中 err
把背景放入SmallProject中再抄过来 ok

在这里插入图片描述

加入计时器

没有鼠标我要死了。。。现在8：21了。。

加入音效

加入护眼模式

其他

what原来真的还要考虑考虑浏览器适配问题
谷歌浏览器
从大佬代码学到：绝对位置的出现，不一定需要父元素先出现
这种风格的图最好做背景了，拉大也不会花
背景和修饰放一起错乱，目前最好way
背景和修饰分离（body为absolute 其他为relative和自己的absolute）
引用多个样式
< div class=“evn1 iconfont icon-igw-f-sun” >< /div >

成品

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FishCake_Clock</title>
    <link rel="stylesheet" href="clock.css">
</head>
<body>
    <div class="content"></div>
    <div class="container">
        <div class="box">
            <div class="clock">
                <div class="hour">
                    <div class="hr" id="hr"></div>
                </div>
                <div class="min">
                    <div class="mn" id="mn"></div>
                </div>
                <div class="sec">
                    <div class="sc" id="sc"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const deg = 6;
        const hr =document.querySelector('#hr');
        const mn =document.querySelector('#mn');
        const sc =document.querySelector('#sc');

        setInterval(() =>{
            let day = new Date();
            let hh = day.getHours() * 30;
            let mm = day.getMinutes() * deg;
            let ss = day.getSeconds() * deg;

            hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
            mn.style.transform = `rotateZ(${(mm)}deg)`;
            sc.style.transform = `rotateZ(${(ss)}deg)`;
            })
    </script>
    </body>
    </html>

clock.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


.content{
    position: absolute;
    /* bottom: -6px; */
    width:100%;
    height:100%;
    
    background: url(1.jpg); 
    background-repeat: no-repeat;
    background-position: center 0;
    /* margin:auto; */
}

/* body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e91e63,#e91e63 50%,
                #ffc107 50%, #ffc107);
}
body::after{
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #03a9f4,#03a9f4 50%,
                transparent 50%, transparent);
    animation: animate 5s ease-in-out infinite;
} */

/* 浮动特效 */
@keyframes animate{
    0%,100%{
        transform: translateY(10px);
    }
    50%{
        transform: translateY(-10px);
    }
}

.container{
    position: relative;
}
.container::before{
    content: '';
    position: absolute;
    bottom: -80px;
    width: 100%;
    height: 60px;
    background: radial-gradient(rgba(0,0,0,0.2),
                transparent,transparent);
    border-radius: 50%;
}
.box{
    position: relative;
    z-index: 1;
    width: 300px;
    height: 300px;
    backdrop-filter: blur(25px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    animation: animate 5s ease-in-out infinite;
    animation-delay: -2.5s;
}
.clock{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(transparent, rgba(255,255,255,0.2))
    ,url(clock.png);
    background-size: cover;
    border-radius: 50%;
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.5);
    border-bottom: none;
    border-right: none;
    box-shadow: -10px -10px 20px rgba(255,255,255,0.1),
                10px 10px 20px rgba(0,0,0,0.1),
                0px 40px 50px rgba(0,0,0,0.2);

}
.clock::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 10000;
}
.hour,
.min,
.sec{
    position: absolute;
}
.hour, .hr{
    width: 160px;
    height: 160px;
}
.min, .mn{
    width: 190px;
    height: 190px;
}
.sec, .sc{
    width: 230px;
    height: 230px;
}
.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}
.hr::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    /* background: #ff105e; */
    background: #7087D8;
    z-index: 11;
    border-radius: 6px;
}
.mn::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #ffffff;
    z-index: 12;
    border-radius: 6px;
}
.sc::before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #fff;
    z-index: 12;
    border-radius: 6px;
}