如何用jQuery加div写出炫酷的米粒时钟呢？

最新推荐文章于 2024-01-26 11:25:59 发布

无糖气泡

最新推荐文章于 2024-01-26 11:25:59 发布

阅读量216

点赞数 1

分类专栏： JavaScript / jQuery效果文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_47969241/article/details/120316155

版权

JavaScript / jQuery效果专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍如何使用JavaScript的Date对象、jQuery和div元素创建一个动态时钟，时钟会根据鼠标移动改变角度，并随着实际时间更新显示。通过CSS实现视觉效果，JavaScript处理时间显示和鼠标移动的交互。同时，文章提供了HTML、CSS和JavaScript的代码示例。

摘要由CSDN通过智能技术生成

我们知道，在JavaScript中可以利用好 Date 对象获取我们想要的时间点或时间戳，

相信在前端领域，写出炫酷的时钟是每个前端人都想过做出来的，那么这一次就让

我们一起利用jQuery和div打造一个炫酷的米粒时钟吧!!!

这个时钟可以随着鼠标移动而改变角度的偏移，随着当地时间而变动，其中利用了

JavaScript中鼠标位置变换的知识点

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>米粒钟</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.8.3.js"></script>
    <script src="./js/index.js"></script>
    <script src=""></script>
</head>

<body>
    <iframe src="./js/网状粒子效果1.html" frameborder="0" class="bjj"></iframe>
    <div id="app">
        <div class="box">
            <div class="one">
                <div class="odd1"></div>
                <div class="even1"></div>
                <div class="odd1"></div>
                <div class="even1"></div>
            </div>

            <div class="two">
                <div class="odd2"></div>
                <div class="even2"></div>
                <div class="odd2"></div>
                <div class="even2"></div>
            </div>

            <div class="three">
                <div class="odd3"></div>
                <div class="even3"></div>
                <div class="odd3"></div>
                <div class="even3"></div>
            </div>
        </div>
    </div>
</body>

</html>

学习好css 也是做好前端页面效果的重中之重

CSS部分：

@charset 'utf-8';
*{
    padding: 0;
    margin: 0;
    cursor: pointer;
}
html{
    font-size: 12px;
    transition: font-size 0.4s;
    transform-style: preserve-3d;
    perspective: 500px;
    overflow: hidden;
}
@media screen and (max-width:900px){
    html{
        font-size: 7px;
    }
}
body{
    transform-style: preserve-3d;
    /* -webkit-transform-style:preserve-3d ; */
}
#app{
    /* transform-style: preserve-3d !important; */
    perspective: 1800px;
    height: 100vh;
    /* background-color: black; */
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.box{
    width: 100rem;
    height: 26rem;
    background-color: black;
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
    transition: all 0.2s;
    transform: rotateY(var(--i)) rotateX(var(--o))  !important ;
    /* transform-style: preserve-3d; */
    box-shadow: 0px 0px 16px 0.3px black;
}
.one,.two,.three{
    width: 21rem;
    height: 24rem;
    position: relative;
    /* border: 2px solid white; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}
/* 两点 */
.one::after,.two::after{
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    background-color: white;
    box-shadow: 0px 0px 12px white;
    left: 26.3rem;
    top: 8rem;
}
.one::before,.two::before{
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    background-color: white;
    box-shadow: 0px 0px 12px rgb(255, 255, 255);
    left: 26.3rem;
    top: 13rem;
}
.one>div,.two>div,.three>div{
    width: 9rem;
    height: 9rem;
    /* background-color: blanchedalmond; */
    border: 5px solid white;
    box-shadow: 0px 0px 2px white;
    transition: all 1.2s;
}
.one>div:nth-child(1),.one>div:nth-child(2),.two>div:nth-child(1),.two>div:nth-child(2),.three>div:nth-child(1),.three>div:nth-child(2){
    border-bottom: transparent;
}
/* .one>div:nth-child(1),.two>div:nth-child(1),.three>div:nth-child(1){
    border-right: transparent;
} */
/* .one>div:nth-child(3),.two>div:nth-child(3),.three>div:nth-child(3){
    border-right: transparent;
} */
.bjj{
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

JavaScript是整个页面运行的核心，当然，本次我们利用的是JavaScript的dom封装库jQuery

$(function () {
    //总类
    class Time {
        constructor() {
            this.arr = []
        }
        //获取时间
        // time() {
        //     let data = new Date()
        //     return {
        //         shi: data.getHours() > 10 ? data.getHours() : "0" + data.getHours(),
        //         fen: data.getMinutes() > 10 ? data.getMinutes() : "0" + data.getMinutes(),
        //         miao: data.getSeconds() > 10 ? data.getSeconds() : "0" + data.getSeconds()
        //     }
        // }
        //鼠标移动效果
        Mouse() {
            let bx = window.innerWidth / 2
            let by = window.innerHeight / 2
            $("body").mousemove(function (event) {
                event = event || window.event
                let x = event.pageX
                let y = event.pageY
                let cx = x - bx
                let cy = y - by
                $(".box")[0].style.setProperty("--i", (cx / 65) + "deg")
                $(".box")[0].style.setProperty("--o", -(cy / 30) + "deg")
            }).mouseleave(function () {
                $(".box")[0].style.setProperty("--i", 0 + "deg")
                $(".box")[0].style.setProperty("--o", 0 + "deg")
            })
        }
        //字库
        ku(kk, lei1) {
            switch (kk) {
                case 0:
                    $(lei1 + ":eq(1)").css({
                        "border-top": "rgb(255, 255, 255,0.2)"
                    })
                    break;
                case 1:
                    $(lei1).css({
                        "border-top": "rgb(255, 255, 255,0.2)",
                        "border-bottom": "rgb(255, 255, 255,0.2)",
                        "border-left": "rgb(255, 255, 255,0.2)",
                    })
                    break;
                case 2:
                    $(lei1 + ":eq(0)").css({
                        "border-left": "rgb(255, 255, 255,0.2)",
                    })
                    $(lei1 + ":eq(1)").css({
                        "border-right": "rgb(255, 255, 255,0.2)",
                    })
                    break;
                case 3:
                    $(lei1).css({
                        "border-left": "rgb(255, 255, 255,0.2)"
                    })
                    $(lei1 + ":eq(1)").css({
                        "border-left": "rgb(255, 255, 255,0.2)"
                    })
                    break;
                case 4:
                    $(lei1 + ":eq(0)").css({
                        "border-top": "rgb(255, 255, 255,0.2)"
                    })
                    $(lei1 + ":eq(1)").css({
                        "border-left": "rgb(255, 255, 255,0.2)",
                        "border-bottom": "rgb(255, 255, 255,0.2)"
                    })
                    break;
                case 5:
                    $(lei1 + ":eq(0)").css({
                        "border-right": "rgb(255, 255, 255,0.2)"
                    })
                    $(lei1 + ":eq(1)").css({
                        "border-left": "rgb(255, 255, 255,0.2)",
                    })
                    break;
                case 6:
                    $(lei1 + ":eq(0)").css({
                        "border-top": "rgb(255, 255, 255,0.2)",
                        "border-right": "rgb(255, 255, 255,0.2)",
                    })
                    break;
                case 7:
                    $(lei1).css({
                        "border-left": "rgb(255, 255, 255,0.2)"
                    })
                    $(lei1 + ":eq(1)").css({
                        "border-top": "rgb(255, 255, 255,0.2)",
                        "border-bottom": "rgb(255, 255, 255,0.2)",
                        "border-left": "rgb(255, 255, 255,0.2)"
                    })
                    break;
                case 8:
                    $(lei1).css({})
                    $(lei1 + ":eq(1)").css({})
                    break;
                case 9:
                    $(lei1).css({})
                    $(lei1 + ":eq(1)").css({
                        "border-bottom": "rgb(255, 255, 255,0.2)",
                        "border-left": "rgb(255, 255, 255,0.2)"
                    })
                    break;
                default:
                    // alert("不在字库范围内")
                    break;
            }
        }

        //将时间实例化
        Fz() {
            $(".odd1,.odd2,.odd3,.even1,.even2,.even3").css("border", "solid 5px white")
            $(".odd1:eq(0),.odd2:eq(0),.odd3:eq(0),.even1:eq(0),.even2:eq(0),.even3:eq(0)").css("border-bottom", "transparent")
            let data = new Date()
            let shi = data.getHours() >= 10 ? data.getHours() : "0" + data.getHours()
            let fen = data.getMinutes() >= 10 ? data.getMinutes() : "0" + data.getMinutes()
            let miao = data.getSeconds() >= 10 ? data.getSeconds() : "0" + data.getSeconds()
            let shis = [...shi.toString()]
            let fens = [...fen.toString()]
            let miaos = [...miao.toString()]
            // console.log(shis);
            this.ku(parseInt(shis[0]), ".odd1")
            this.ku(parseInt(shis[1]), ".even1")
            this.ku(parseInt(fens[0]), ".odd2")
            this.ku(parseInt(fens[1]), ".even2")
            this.ku(parseInt(miaos[0]), ".odd3")
            this.ku(parseInt(miaos[1]), ".even3")
        }
    }


    let obj = new Time()
    obj.Mouse()

    setInterval(() => {
        obj.Fz()
    }, 200);


    $("body").css({
        "background": "rgb(255, 255, 0,0.6)"
    })
});

在字体变化过程中，利用jQuery封装好字库，将对应的时间从字库中取出，再对应上相应的CSS样式，在定时器中，字体就可以随着时间而变动

效果图如下：

背景图是使用canvas画的小球连线，背景图可以自行加上或者自己写一个。

希望今天的分享能给你带来收获，

我是坠落.js 一个三观超正的博主，期待你的关注。

无糖气泡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何用jQuery加div写出炫酷的米粒时钟呢？

我们知道，在JavaScript中可以利用好 Date 对象获取我们想要的时间点或时间戳，相信在前端领域，写出炫酷的时钟是每个前端人都想过做出来的，那么这一次就让我们一起利用jQuery和div打造一个炫酷的米粒时钟吧!!!...
复制链接

扫一扫

专栏目录