JQ+html写的 罗盘时钟

最新推荐文章于 2023-04-08 16:30:11 发布
最新推荐文章于 2023-04-08 16:30:11 发布
阅读量727 收藏 3
点赞数 1
分类专栏： 小案例 文章标签： jquery css3 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/little_shallot/article/details/115238370
版权

效果图
在这里插入图片描述
点击中间的年份还可以切换颜色
在这里插入图片描述

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    body {

        font-size: 12px;
        color: #fff;
        background: #000;
        transition: 2s;
    }

    .datatime {
        position: relative;
        height: 860px;
        width: 860px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .Y {
        display: none;
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;
        left: 380px;
        top: 380px;
        color: #ff0000;
        transition: 1s;
        z-index: 9999;
        font-weight: bold;

    }

    .Y::after {
        content: '';
        position: absolute;
        top: 65px;
        left: 10px;
        right: -430px;
        height: 1px;
        background: #fff;
        transition: 1s;
        z-index: -1;
    }

    .Y::before {
        content: '';
        position: absolute;
        top: 63px;
        left: 8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        transition: 1s;
    }

    .M {
        position: absolute;
        width: 160px;
        height: 160px;
        z-index: 999;

        left: 350px;
        top: 350px;
        transition: 1s;
        /* background: rgb(58, 49, 49); */
        position: relative;
    }

    .D {
        position: absolute;
        width: 300px;
        height: 300px;

        z-index: 999;
        left: 280px;
        top: 280px;
        transition: 1s;
    }

    .h {
        position: absolute;
        width: 570px;
        height: 570px;
        z-index: 999;
        left: 145px;
        top: 145px;
        transition: 1s;
    }

    .m {
        position: absolute;
        width: 700px;
        height: 700px;
        z-index: 999;
        transition: 1s;

        left: 80px;
        top: 80px;
    }

    .s {
        position: absolute;
        width: 860px;
        height: 860px;
        left: 0;
        top: 0;
        transition: 0.1s;
        z-index: 999;
        z-index: 999;
    }

    .bg {
        position: absolute;
        width: 450px;
        height: 450px;

        z-index: 2;

        left: 205px;
        top: 205px;
        transition: 1s;
    }

    span {
        position: absolute;
        width: 50%;
        height: 100%;

    }

    label {
        transform: rotate(0deg);

        display: inline-block;
        width: 860px;
        height: 860px;
    }
</style>

<body>
    <div>
        <div class="datatime" data-id="1">
            <label for="">
                <div class="Y" style="transform:rotate(0deg)"></div>
                <div class="M" style="transform:rotate(0deg)"></div>
                <div class="D" style="transform:rotate(0deg)"></div>
                <div class="h" style="transform:rotate(0deg)"></div>
                <div class="m" style="transform:rotate(0deg)"></div>
                <div class="s" style="transform:rotate(0deg)"></div>
                <div class="bg" style="transform:rotate(0deg)"></div>
            </label>
        </div>
    </div>
    <script>
        var dataM = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        var dataD = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']
        var datah = ['十二点', '一点', '二点', '三点', '四点', '五点', '六点', '七点', '八点', '九点', '十点', '十一点',]
        var datam = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分',]
        var datas = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒',]
        var bg = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        var datay = ''
        var html = ''
        var color = true

        var myDate = new Date();
        var d = new Date(myDate.getFullYear(), myDate.getMonth() + 1, 0);
        var days = d.getDate();


        html = ''
        var lengths = 0
        switch (days) {
            case 28:
                dataD.length = 28
                lengths = 360 / 28
                break;

            case 29:
                dataD.length = 29
                lengths = 360 / 29
                break;

            case 30:
                dataD.length = 30
                lengths = 360 / 30
                break;

            case 31:
                lengths = 360 / 31
                break;
        }


        setTimeout(() => {
            var index6 = 0
            var param = setInterval(() => {
                console.log(index6)
                if (index6 < dataM.length) {
                    if (index6 == 0) {
                        $('.M').append('<span  " style="transform: rotate(0deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>')
                    } else {
                        $('.M').append('<span  " style="transform: rotate(' + index6 * 30 + 'deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>')
                    }

                    index6++
                } else {
                    clearInterval(param)
                }
            }, 100)
        }, 100);

        setTimeout(() => {
            var index5 = 0
            var param = setInterval(() => {
                if (index5 < dataD.length) {
                    if (index5 == 0) {
                        $('.D').append('<span  " style="transform: rotate(0deg)translateX(50%);line-height: 300px;;padding-left:50%">' + dataD[index5] + '</span>')
                    } else {
                        $('.D').append('<span  " style="transform: rotate(' + index5 * lengths + 'deg)translateX(50%);line-height: 300px;;padding-left:50%">' + dataD[index5] + '</span>')
                    }

                    index5++
                } else {
                    clearInterval(param)
                }
            }, 10)
        }, 300);

        setTimeout(() => {
            var index4 = 0

            var param = setInterval(() => {
                if (index4 < bg.length) {
                    $('.bg').append('<span  " style="transform: rotate(' + index4 * (360 / 7) + 'deg)translateX(50%);line-height: 450px;;padding-left:50%"">' + bg[index4] + '</span>')
                    index4++
                } else {
                    clearInterval(param)
                }
            }, 100)
        }, 600);

        setTimeout(() => {
            var index3 = 0
            var param = setInterval(() => {
                if (index3 < datah.length) {
                    $('.h').append('<span  " style="transform: rotate(' + index3 * (360 / 12) + 'deg)translateX(50%);line-height: 570px;;padding-left:50%"">' + datah[index3] + '</span>')
                    index3++
                } else {
                    clearInterval(param)
                }
            }, 100)
        }, 900);

        setTimeout(() => {
            var index2 = 0
            var param = setInterval(() => {
                if (index2 < datam.length) {
                    $('.m').append('<span  " style="transform: rotate(' + index2 * 6 + 'deg)translateX(50%);line-height: 700px;;padding-left:50%">' + datam[index2] + '</span>')
                    index2++
                } else {
                    clearInterval(param)
                }
            }, 10)
        }, 1200);

        setTimeout(() => {
            var index1 = 0
            var param = setInterval(() => {
                if (index1 < datas.length) {
                    $('.s').append('<span  " style="transform: rotate(' + index1 * 6 + 'deg)translateX(50%);line-height: 860px;;padding-left:50%"">' + datas[index1] + '</span>')
                    index1++
                } else {
                    clearInterval(param)
                }
            }, 10)
        }, 1500);
        setTimeout(() => {
            $('.Y').html(digitize(datay))
            $('.Y').show(1000)
        }, 2000)

        $('.Y').click(function () {
            console.log(color)
            if (!color) {
                console.log(color)
                $('body').css({ 'background': '#000', 'color': '#fff' })
                color = true
                $(".Y").append("<style>.Y::after{background: #fff}.Y::before{background: #fff}</style>")
            } else {
                $('body').css({ 'background': '#fff', 'color': '#000' })
                color = false
                $(".Y").append("<style>.Y::after{background: #00000063}.Y::before{background: #00000063}</style>")

            }

        })
        var times = myDate.getSeconds()
        var timem = myDate.getMinutes()
        var timeh = myDate.getHours()
        var timeD = myDate.getDate();
        var timeM = myDate.getMonth()
        var datay = myDate.getFullYear()
        var xinqi = new Date().getDay()
        if (timeh > 12) {
            timeh = timeh - 12
        }
        var arrtssss = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
        function digitize(n) {  //接受一个number类参数，拆分成一个数组并返回

            var str = n + "";    //加上空字符中，把接收的参数转换为字符串
            var arr = [];         //声明结果空数组，稍后返回
            str.split("").forEach(function (item) {   //调用split，以空字符串为分隔符切割字符串并返回数组，在数组上调用forEach方法
                arr.push(parseInt(item));    //对传入的每个字符用pasreInt转换为数字并压入arr数组
            })

            let text = []
            var dataarr = ''
            arr.forEach((tien) => {

                text.push(arrtssss[tien]);
                dataarr = text.join("");

            })
            return dataarr  //返回结果数组
        }

        $('.Y').html(digitize(datay))

        timeD--
        timem--
        setTimeout(() => {
            let index_list = $(".s").children('span')
            let index_list1 = $(".m").children('span')
            let index_list2 = $(".h").children('span')
            let index_list3 = $(".D").children('span')
            let index_list4 = $(".M").children('span')
            let index_list5 = $(".bg").children('span')


            index_list.eq(times).css('color', '#ff0000')
            index_list1.eq(timem).css('color', '#ff0000')
            console.log(timeh)

            if (timeh > 11) {
                timeh = timeh - 12

                index_list2.eq(timeh).css('color', '#ff0000')
            } else {
                index_list2.eq(timeh).css('color', '#ff0000')

            }
            index_list3.eq(timeD).css('color', '#ff0000')
            index_list4.eq(timeM).css('color', '#ff0000')
            index_list5.eq(xinqi).css('color', '#ff0000')

            setInterval(() => {
                index_list.css('color', '')
                index_list1.css('color', '')
                index_list2.css('color', '')
                index_list3.css('color', '')
                index_list4.css('color', '')
                index_list5.css('color', '')
                var myDate = new Date();
                times = myDate.getSeconds()
                timem = myDate.getMinutes()
                timeh = myDate.getHours()
                timeD = myDate.getDate();
                timeM = myDate.getMonth()
                datay = myDate.getFullYear()
                xinqi = myDate.getDay()

                if (timeM == 0 && timeh == 0 && timeD == 0 && timem == 0 && times < 1) {
                    var arrtssss = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
                    function digitize(n) {  //接受一个number类参数，拆分成一个数组并返回

                        var str = n + "";    //加上空字符中，把接收的参数转换为字符串
                        var arr = [];         //声明结果空数组，稍后返回
                        str.split("").forEach(function (item) {   //调用split，以空字符串为分隔符切割字符串并返回数组，在数组上调用forEach方法
                            arr.push(parseInt(item));    //对传入的每个字符用pasreInt转换为数字并压入arr数组
                        })

                        let text = []
                        var dataarr = ''
                        arr.forEach((tien) => {

                            text.push(arrtssss[tien]);
                            dataarr = text.join("");

                        })
                        return dataarr  //返回结果数组
                    }

                    $('.Y').html(digitize(datay))
                }
                if (timeD == 0 && timeh == 0 && timem == 0 && times < 1) {
                    var myDate = new Date();
                    var d = new Date(myDate.getFullYear(), myDate.getMonth() + 1, 0);
                    var days = d.getDate();
                    html = ''
                    lengths = 0
                    switch (days) {
                        case 28:
                            datam.length = 28
                            lengths = 360 / 28
                            break;

                        case 29:
                            datam.length = 29
                            lengths = 360 / 29
                            break;

                        case 30:
                            datam.length = 30
                            lengths = 360 / 30
                            break;

                        case 31:
                            lengths = 360 / 31
                            break;
                    }
                    var index6 = 0
                    $('.M').html('')
                    var param = setInterval(() => {
                        console.log(index6)
                        if (index6 < dataM.length) {
                            if (index6 == 0) {
                                $('.M').append('<span  " style="transform: rotate(0deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>')
                            } else {
                                $('.M').append('<span  " style="transform: rotate(' + index6 * 30 + 'deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>')
                            }

                            index6++
                        } else {
                            clearInterval(param)
                        }
                    }, 100)

                }
                $('.s').css('transform', 'rotate(' + -times * 6 + 'deg)')
                $('.m').css('transform', 'rotate(' + - (timem - 1) * 6 + 'deg)')
                $('.h').css('transform', 'rotate(' + -timeh * 30 + 'deg)')
                $('.D').css('transform', 'rotate(' + -(timeD - 1) * lengths + 'deg)')
                $('.M').css('transform', 'rotate(' + -timeM * 30 + 'deg)')
                $('.bg').css('transform', 'rotate(' + -xinqi * (360 / 7) + 'deg)')



                index_list.eq(times).css('color', '#ff0000')
                timem--
                index_list1.eq(timem).css('color', '#ff0000')
                if (timeh > 11) {
                    timeh = timeh - 12

                    index_list2.eq(timeh).css('color', '#ff0000')
                } else {
                    timeh
                    index_list2.eq(timeh).css('color', '#ff0000')
                }
                timeD--
                index_list3.eq(timeD).css('color', '#ff0000')
                index_list4.eq(timeM).css('color', '#ff0000')

                index_list5.eq(xinqi).css('color', '#ff0000')
            }, 500)

        }, 3000);

    </script>
</body>

</html>

纯属个人爱好，之前写的辣鸡布局还有js和动画
这是下载链接 或者直接复制也行 不过要引入JQ文件 因为用JQ写的
下载链接
写的很粗糙，小白一个多多包涵

little_shallot
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【罗盘时钟---使用html,js,css编写。附源代码及效果】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-20 6万+
代码 罗盘效果.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js罗盘时钟
罗盘时钟——使用html，js，css编写
m0_57202083的博客
09-03 1万+
罗盘效果.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="style.
抖音罗盘时钟
LIAOJIASONG1024的博客
10-08 6491
***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！ HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
八卦时钟html代码_自制酷酷罗盘时钟（附代码）
weixin_39569894的博客
12-08 1万+
复制以下代码，到txt文档，保存，后缀改为html。即可。罗盘时钟* {margin:0;padding:0;}#wrap {position:fixed;left:0;top:300px;width:800px;height:800px;border:1px solid #000;position:fixed;left:0;top:0;color:gold;font-size:14px;posi...
罗盘时钟代码
2303_77137340的博客
04-08 1512
接下来就是核心内容了，我们要使用JavaScript来绘制罗盘时钟。以上就是罗盘时钟的基本实现，您可以根据自己的需要进行优化和修改。
笔顺书写jq+html.rar
06-15
本文将深入探讨一个名为"笔顺书写jq+html"的项目，这是一个利用jQuery和HTML技术实现的笔顺书写系统，旨在帮助用户直观地学习和理解汉字的正确笔画顺序。 首先，我们来了解jQuery，这是一个高效、简洁且功能丰富的...
jQ+HTML5视差滑动幻灯片特效代码
03-20
"jQ+HTML5视差滑动幻灯片特效代码"就是一个很好的示例，它展示了如何将这两种技术结合以实现视觉效果丰富的滑动幻灯片。 首先，jQuery是一个流行的JavaScript库，它简化了JavaScript的使用，让开发者能够更高效地...
jq+html实现倒计时进度条与 点击进度条
最新发布
04-11
jq+html实现倒计时进度条与 点击进度条
html5 + jq 写的播放器
05-31
HTML5和jQuery是现代网页开发中的两个重要技术。HTML5是超文本标记语言的最新版本，带来了许多增强功能，如音频和视频内嵌、离线存储、画布绘图、地理定位等，使得网页交互性更强。jQuery则是一个轻量级的JavaScript...
jq+css3弹动下拉菜单特效代码
03-20
【jq+css3弹动下拉菜单特效代码】是一种结合了jQuery库和CSS3技术的网页导航菜单设计，它能够为网站的交互体验增添生动有趣的元素。这种特效使得用户在鼠标悬停在菜单项上时，下拉菜单会以弹动的方式展开，增加了...
html+css实心罗盘时钟特效
06-28
偶然在抖音上看到一个时钟特效！感觉挺好玩的！就自己做了一个罗盘时钟、八卦时钟、炫酷时钟，欢迎大家下载互相探讨！
jQuery创意圆形罗盘时钟代码
06-24
jQuery创意圆形罗盘时钟代码是一款基于jQuery跟CSS3属性制作的酷炫圆形罗盘时钟，支持获取当前本地时间。
CSS3和Html5实现超级炫酷的风水罗盘效果
11-03
CSS3和Html5实现超级炫酷的风水罗盘效果 CSS3和Html5实现超级炫酷的风水罗盘效果
抖音罗盘时钟javascripts版本源码
05-21
抖音罗盘时钟javascript版本源码 代码仅供参考 有兴趣的同学可以一起研究
罗盘时钟HTML源码下载
07-09
罗盘时钟
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5学生网页设计作业成品模板
11-16 6535
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????100款七夕情人节告白源码-专栏文章 作品介绍 1.网页作品简介 ：基
一个非常是个程序员表白的浪漫网站(嫦娥奔月)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-24 1265
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
CSS+JS+HTML实现罗盘时钟（附完整代码）
热门推荐
willwe的博客
06-11 2万+
CSS+JS+HTML实现罗盘时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge".
抖音上的时钟屏保，被我改造完用来表白
漫漫前端路，进一寸有进一寸的欢喜
04-08 1万+
抖音上很火的时钟屏保，被我改造完后用来准备准备准备表白，谁说程序员不浪漫？！ 闲言少叙，书归正文，因为gif格式的图片只能上传5M，所以我只能切成两块，中间还删减了一些，大家凑合着看，不要打我，大家可以把源码拷下来，源码在最下面，自己运行康康，嘿嘿，话不多说，上图： 效果主要分成了三个部分，第一个是进入页面的时候平铺的时钟效果，当点击按钮的时候，变为圆盘时钟，左边的文字以键盘敲击的而方式出现...
用html+jq写一个产品放大镜代码
02-28
以下是一个简单的用 HTML 和 jQuery 实现产品放大镜的示例代码： HTML 代码： ```html ``` CSS 代码： ```css .product-image-container { position: relative; } .zoom-container { position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值