jQuery 手表时钟

最新推荐文章于 2024-05-05 17:01:45 发布

QuKie

最新推荐文章于 2024-05-05 17:01:45 发布

阅读量134

点赞数

分类专栏： HTML+CSS 文章标签： jquery css3 html5

本文链接：https://blog.csdn.net/qukinx/article/details/111281432

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先看

不说，直接上代码

index.html

<!doctype html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Watch OS</title>
    <link rel="stylesheet" href="style.css">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <header class="fix"></header>
    <main>
        <nav>
            <div class="box rel" id="box_second">
                <ul class="abs">
                    <li><p class="abs"></p></li>
                </ul>
            </div>
            <div class="box rel" id="box_minute">
                <ul class="abs">
                    <li><p class="abs"></p></li>
                </ul>
            </div>
            <div class="box rel" id="box_hour">
                <ul class="abs">
                    <li><p class="abs"></p></li>
                </ul>
            </div>
            <div class="box rel" id="box_week">
                <ul class="abs">
                    <li><p class="abs" style="border-bottom-color:#ff7800;"></p></li>
                </ul>
            </div>
        </nav>
    </main>
    <footer class="fix"></footer>
</body>
</html>

style.css

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul li {
    list-style: none;
}

.fix{
    position: fixed;
}

.rel{
    position: relative;
}

.abs{
    position: absolute;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

header,footer{
    width: 100px;
    height: 50vh;
    background: #795548;
    border-radius: 25px 25px 50px 50px;
}

header{
    top: 0;
}

footer{
    bottom: 0;
}

main{
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background-color: rgba(210, 207, 207, 0.87);
    z-index: 1;
}

main nav{
    /*display: none;*/
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: black;
    margin-left: 5px;
    margin-top: 5px;
}

.box{
    transition: all 1s linear 0ms;
}

.box p{
    border-right-color: transparent;
    border-right-style: solid;
    border-bottom-color: white;
    border-bottom-style: solid;
    border-left-color: transparent;
    border-left-style: solid;
    border-radius: 20px;
    transform-origin: bottom;
    transition: all 1s linear 0ms;
}

#box_second ul{
    left: 150px;
    top: 30px;
}

#box_second p{
    border-right-width: 8px;
    border-bottom-width: 120px;
    border-left-width: 8px;
}

#box_minute{
    left: 42px;
    top: 105px;
    width: 115px;
    height: 68px;
    /*border: 1px solid white;*/
    transform-origin: right center;
    transform: rotate(0deg);
}

#box_minute ul{
    /*left: 55px;*/
    /*top: 80px;*/
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid white;
}

#box_minute p{
    border-right-width: 4px;
    border-bottom-width: 40px;
    border-left-width: 4px;
    left: 29px;
    top: 11px;
    transform-origin: 3px;
    transform: rotate(0deg);
}

#box_hour{
    left: 100px;
    top: 77px;
    width: 112px;
    height: 140px;
    /* border: 1px solid white; */
    transform-origin: top center;
    transform: rotate(0deg);
}

#box_hour ul{
    /* left: 100px; */
    top: 28px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid white;
}

#box_hour p{
    border-right-width: 6px;
    border-bottom-width: 52px;
    border-left-width: 6px;
    left: 52px;
    top: 3px;
    transform: rotate(0deg);
}

#box_week{
    left: 157px;
    top: -105px;
    width: 115px;
    height: 68px;
    /* border: 1px solid white; */
    transform-origin: left center;
    transform: rotate(0deg);
}

#box_week ul{
    /* left: 55px; */
    /* top: 80px; */
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-left: 48px;
    border: 1px solid white;
}

#box_week p{
    border-right-width: 4px;
    border-bottom-width: 40px;
    border-left-width: 4px;
    left: 29px;
    top: 11px;
    transform-origin: 3px;
    transform: rotate(0deg);
}

script.js

$(function () {
    function time(){
        var time=new Date();
        var s=time.getSeconds();
        var sDeg=s/60*360;
        var m=time.getMinutes();
        var mDeg=(m*60+s)/3600*360-sDeg;
        var h=time.getHours();
        var hDeg=(h*3600+m*60+s)/(3600*12)*360-sDeg;
        var w=time.getDay();
        var wDeg=w/7*360-sDeg;
        $('#box_second p').css('transform',"rotate("+sDeg+"deg)");
        $('#box_minute p').css('transform',"rotate("+mDeg+"deg)");
        $('#box_hour p').css('transform',"rotate("+hDeg+"deg)");
        $('#box_week p').css('transform',"rotate("+wDeg+"deg)");
        $('#box_minute').css('transform',"rotate("+sDeg+"deg)");
        $('#box_hour').css('transform',"rotate("+sDeg+"deg)");
        $('#box_week').css('transform',"rotate("+sDeg+"deg)");
    }
    time();
    setInterval(time,1000);
    $('#box_minute ul').click(function () {
        alert("现在是"+new Date().getMinutes()+"分钟");
    });
    $('#box_hour ul').click(function () {
        alert("现在是"+new Date().getHours()+"小时");
    });
    $('#box_week ul').click(function () {
        var time=new Date();
        var Day=time.getDay();
        if (time.getDay()==0){
            Day=7;
        }
        alert("现在是周"+Day);
    });
});

——————————————————求个一键三连↓

QuKie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 手表时钟

先看不说，直接上代码index.html<!doctype html><html lang="zn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制链接

扫一扫