实现两种时钟效果
535人加入学习
(3人评价)
Future老师带你使用JS和JQuery实现两种时钟效果

完成于2019-07-13 开发工具WebStorm10.0.3 Jquery3.4.2

价格 免费

ClockRotate.css

* {
    padding: 0px;
    margin: 0px;
}
#clock {
    width: 800px;
    height: 800px;
    /* border: 1px solid red; */
    margin: auto;
    background: url("../imgs/timg.png") 0px 0px no-repeat;
    background-size: 100% 100%;
    position: relative;
    top:-42px;
    left:-14px;
    transform:scale(0.283);
}
.second {
    width: 22px;
    height: 373px;
    /* border: 1px solid red; */
    background: url("../imgs/pointer.png") -9px 0px no-repeat;
    background-size: 606% 100%;
    position: absolute;
    left: 393px;
    top: 135px;
    /* opacity:0.5; */
    transform:rotate(0deg);
    transform-origin:11px 273px;
}
.secHead{
    width:40px;
    height:40px;
    background:url("../imgs/dog.jpg") 0px 0px no-repeat;
    background-size:100% 100%;
    position:absolute;
    left:-10px;
    top:64px;
    border-radius:50%;
}
.minute{
    width: 22px;
    height: 373px;
    /* border: 1px solid red; */
    background: url("../imgs/pointer.png") -53px 0px no-repeat;
    background-size: 606% 100%;
    position: absolute;
    left: 393px;
    top: 135px;
    /* opacity:0.5; */
    transform:rotate(0deg);
    transform-origin:11px 273px;
}
.hour{
    width: 31px;
    height: 373px;
    /* border: 1px solid red; */
    background: url("../imgs/pointer.png") -101px 0px no-repeat;
    background-size: 468% 100%;
    position: absolute;
    left: 389px;
    top: 135px;
    /* opacity:0.5; */
    transform:rotate(0deg);
    transform-origin:16px 273px;
}
#btnSound{
    width:80px;
    height:80px;
    border-radius:50%;
    border:5px solid darkgray;
    position:absolute;
    left:20px;
    top:20px;
}
.muteBack{
    background:url("../imgs/mute.png") 2px 3px no-repeat;
}
.soundBack{
    background:url("../imgs/sound.png") 2px 3px no-repeat;
    animation:rotateBtn 5s linear infinite;
}
@keyframes rotateBtn{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg)
    }
}

007-Shop-购物网站应用钟表案例.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>购物</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .main{
            background:url("./imgs/gouwu.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            width:1000px;
            height:4500px;
            margin:auto;
            position:relative;
        }
        .plane2{
            background:url("./imgs/plane2.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            width:571px;
            height:520px;
            position:absolute;
            top:200px;
            right:-336px;
            z-index:-10;
        }
    </style>
    <link rel="stylesheet"  href="./css/ClockRotate.css" />
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;
        // 声音是否在播放
        var playing = false;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        $(function(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
            
            $("#btnSound").click(function(){
                playing = !playing;
                if(playing == true){
                    $(this).removeClass("muteBack");
                    $(this).addClass("soundBack");
                }
                else{
                    $(this).removeClass("soundBack");
                    $(this).addClass("muteBack");
                }
            });
        });
        // 每秒钟调用一次
        function clockRotate(){
            if(playing == true){
                $("audio")[0].volume = 0.02;
                $("audio")[0].play();
            }
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            $(".second").rotate(
                {
                    angle:secDegree,
                    center:[11,273]
                }
            );
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            $(".minute").rotate({
                angle:minuteDeg,
                center:[11,273]
            });

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            $(".hour").rotate({
                angle:hourDeg,
                center:[16,273]
            });
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body>
    <div class="main">
        <div class="plane2">
            <div id="clock">
                <div class="hour"></div>
                <div class="minute"></div>
                <div class="second">
                    <div class="secHead"></div>
                </div>
                <div id="btnSound" class="muteBack" style="display:none"></div>
            </div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>购物</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .main{
            background:url("./imgs/gouwu.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            width:1000px;
            height:4500px;
            margin:auto;
            position:relative;
        }
        .plane2{
            background:url("./imgs/plane2.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            width:571px;
            height:520px;
            position:absolute;
            top:200px;
            right:-336px;
            z-index:-10;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="plane2">

        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div,第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
    <script src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript">

        // $(document).ready(function(){
        // });
        // 文档准备好以后的操作
        $(function(){

        });

        // 一次修改两张图片
        function change2img(timeVal,className,idx0,idx1){
            var val0 = timeVal % 10;
            var val1 = Math.floor(timeVal / 10);
            // 设置个位的图片
            $(className).eq(idx0).css({
                "background-image":'url("./imgs/countdown'+val0+'.png")'
            });
            // 设置十位的图片
            $(className).eq(idx1).css({
                "background-image":'url("./imgs/countdown'+val1+'.png")'
            });
        }

        // 每秒钟数据的变化
        function change(){
            // 拿到当前时间
            var now = new Date();
            // 秒、分、小时、月份、几号
            change2img(now.getSeconds(),".timenum",5,4);
            change2img(now.getMinutes(),".timenum",3,2);
            change2img(now.getHours(),".timenum",1,0);
            change2img(now.getMonth()+1,".datenum",5,4);
            change2img(now.getDate(),".datenum",7,6);
            
            // 星期
            var day0 = now.getDay(); // 1-6 0=日
            if(day0 == 0){
                day0 = 7;
            }
            // 设置个位的图片
            $(".datenum").eq(8).css({
                "background-image":'url("./imgs/countdown'+day0+'.png")'
            });

            // 年份
            var year = now.getFullYear();
            var year0 = year % 10;
            var year1 = Math.floor((year / 10) % 10); //2019/10=201.9  向下取整201  201%10=1
            var year2 = Math.floor((year / 100) % 10);
            var year3 = Math.floor(year / 1000);
            // 设置个位的图片
            $(".datenum").eq(3).css({
                "background-image":'url("./imgs/countdown'+year0+'.png")'
            });
            $(".datenum").eq(2).css({
                "background-image":'url("./imgs/countdown'+year1+'.png")'
            });
            $(".datenum").eq(1).css({
                "background-image":'url("./imgs/countdown'+year2+'.png")'
            });
            $(".datenum").eq(0).css({
                "background-image":'url("./imgs/countdown'+year3+'.png")'
            });

            // // 拿到秒
            // var second = now.getSeconds();
            // var sec0 = second % 10; // 123456 % 10 = 6
            // var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整,取比较小的数字。
            // // 设置秒的图片
            // $(".timenum").eq(5).css({
            //     "background-image":'url("./imgs/countdown'+sec0+'.png")'
            // });
            // $(".timenum").eq(4).css({
            //     "background-image":'url("./imgs/countdown'+sec1+'.png")'
            // });

            // // 拿到分钟
            // var minute = now.getMinutes();
            // var min0 = minute % 10;
            // var min1 = Math.floor(minute / 10);
            // // 设置分钟的图片
            // $(".timenum").eq(3).css({
            //     "background-image":'url("./imgs/countdown'+min0+'.png")'
            // });
            // $(".timenum").eq(2).css({
            //     "background-image":'url("./imgs/countdown'+min1+'.png")'
            // });

            // // 拿到时钟
            // var hour = now.getHours();
            // var hour0 = hour % 10;
            // var hour1 = Math.floor(hour / 10);
            // // 设置时钟的图片
            // $(".timenum").eq(1).css({
            //     "background-image":'url("./imgs/countdown'+hour0+'.png")'
            // });
            // $(".timenum").eq(0).css({
            //     "background-image":'url("./imgs/countdown'+hour1+'.png")'
            // });

        }
        setInterval("change()",1000);
    </script>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div,第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
    <script src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript">

        // $(document).ready(function(){
        // });
        // 文档准备好以后的操作
        $(function(){

        });
        function change(){
            // 拿到当前时间
            var now = new Date();
            // 拿到秒
            var second = now.getSeconds();
            var sec0 = second % 10; // 123456 % 10 = 6
            var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整,取比较小的数字。
            // 设置秒的图片
            $(".timenum").eq(5).css({
                "background-image":'url("./imgs/countdown'+sec0+'.png")'
            });
            $(".timenum").eq(4).css({
                "background-image":'url("./imgs/countdown'+sec1+'.png")'
            });

            // 拿到分钟
            var minute = now.getMinutes();
            var min0 = minute % 10;
            var min1 = Math.floor(minute / 10);
            // 设置分钟的图片
            $(".timenum").eq(3).css({
                "background-image":'url("./imgs/countdown'+min0+'.png")'
            });
            $(".timenum").eq(2).css({
                "background-image":'url("./imgs/countdown'+min1+'.png")'
            });

            // 拿到时钟
            var hour = now.getHours();
            var hour0 = hour % 10;
            var hour1 = Math.floor(hour / 10);
            // 设置时钟的图片
            $(".timenum").eq(1).css({
                "background-image":'url("./imgs/countdown'+hour0+'.png")'
            });
            $(".timenum").eq(0).css({
                "background-image":'url("./imgs/countdown'+hour1+'.png")'
            });

        }
        setInterval("change()",1000);
    </script>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div,第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
    <script src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript">

        // $(document).ready(function(){
        // });
        // 文档准备好以后的操作
        $(function(){

        });
        function change(){
            // 拿到当前时间
            var now = new Date();
            var second = now.getSeconds();
            var sec0 = second % 10; // 123456 % 10 = 6
            var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整,取比较小的数字。
            $(".timenum").eq(5).css({
                "background-image":'url("./imgs/countdown'+sec0+'.png")'
            });
            $(".timenum").eq(4).css({
                "background-image":'url("./imgs/countdown'+sec1+'.png")'
            });
        }
        setInterval("change()",1000);
    </script>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div,第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>VerticalAlign样式说明</title>
    <style type="text/css">
        .app>div{
            display:inline-block;
            vertical-align:middle;
        }
        .div0{
            width:30px;
            height:50px;
            background-color:red;
        }
        .div1{
            width:30px;
            height:70px;
            background-color:green;
        }
        .div2{
            width:30px;
            height:90px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="div0"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            background-color:red;
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            background-color:green;
            opacity:0.6;
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            background-color:blue;
            opacity:0.6;
        }
    </style>
</head>
<body>
    <div class="ledback">
        <div class="top1"></div>
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <div class="datediv"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            background-color:red;
            opacity:0.6;
        }
        .timediv{
            width:100%;
            height:38%;
            background-color:green;
            opacity:0.6;
        }
        .datediv{
            width:100%;
            height:34%;
            background-color:blue;
            opacity:0.6;
        }
    </style>
</head>
<body>
    <div class="ledback">
        <div class="top1"></div>
        <div class="timediv"></div>
        <div class="datediv"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .hour{
            width: 31px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -101px 0px no-repeat;
            background-size: 468% 100%;
            position: absolute;
            left: 389px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:16px 273px;
        }
        #btnSound{
            width:80px;
            height:80px;
            border-radius:50%;
            border:5px solid darkgray;
            position:absolute;
            left:20px;
            top:20px;
        }
        .muteBack{
            background:url("./imgs/mute.png") 2px 3px no-repeat;
        }
        .soundBack{
            background:url("./imgs/sound.png") 2px 3px no-repeat;
            animation:rotateBtn 5s linear infinite;
        }
        @keyframes rotateBtn{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg)
            }
        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;
        // 声音是否在播放
        var playing = false;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
            
            $("#btnSound").click(function(){
                playing = !playing;
                if(playing == true){
                    $(this).removeClass("muteBack");
                    $(this).addClass("soundBack");
                }
                else{
                    $(this).removeClass("soundBack");
                    $(this).addClass("muteBack");
                }
            });
        }
        // 每秒钟调用一次
        function clockRotate(){
            if(playing == true){
                $("audio")[0].volume = 0.02;
                $("audio")[0].play();
            }
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            $(".second").rotate(
                {
                    angle:secDegree,
                    center:[11,273]
                }
            );
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            $(".minute").rotate({
                angle:minuteDeg,
                center:[11,273]
            });

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            $(".hour").rotate({
                angle:hourDeg,
                center:[16,273]
            });
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <audio src="./audio/da.wav"></audio>
    <div id="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second">
            <div class="secHead"></div>
        </div>
        <div id="btnSound" class="muteBack"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .hour{
            width: 31px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -101px 0px no-repeat;
            background-size: 468% 100%;
            position: absolute;
            left: 389px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:16px 273px;
        }
        #btnSound{
            width:80px;
            height:80px;
            border-radius:50%;
            border:5px solid darkgray;
            background:url("./imgs/mute.png") 2px 3px no-repeat;
            position:absolute;
            left:20px;
            top:20px;
        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
        }
        // 每秒钟调用一次
        function clockRotate(){
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            $(".second").rotate(
                {
                    angle:secDegree,
                    center:[11,273]
                }
            );
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            $(".minute").rotate({
                angle:minuteDeg,
                center:[11,273]
            });

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            $(".hour").rotate({
                angle:hourDeg,
                center:[16,273]
            });
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <div id="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second">
            <div class="secHead"></div>
        </div>
        <div id="btnSound"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .hour{
            width: 31px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -101px 0px no-repeat;
            background-size: 468% 100%;
            position: absolute;
            left: 389px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:16px 273px;
        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
        }
        // 每秒钟调用一次
        function clockRotate(){
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            $(".second").rotate(
                {
                    angle:secDegree,
                    center:[11,273]
                }
            );
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            $(".minute").rotate({
                angle:minuteDeg,
                center:[11,273]
            });

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            $(".hour").rotate({
                angle:hourDeg,
                center:[16,273]
            });
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <div id="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second">
            <div class="secHead"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .hour{
            width: 31px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -101px 0px no-repeat;
            background-size: 468% 100%;
            position: absolute;
            left: 389px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:16px 273px;
        }
    </style>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度,1小时等于3600秒,比如现在3点钟是90度,3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间,不然比如9点50,时钟依然指向9点,而不是靠近10点的位置。
        }
        // 每秒钟调用一次
        function clockRotate(){
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            var divSecond = document.getElementsByClassName("second");
            divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            var divMinute = document.getElementsByClassName("minute");
            divMinute[0].style.transform = "rotate(" + minuteDeg + "deg)";

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            var divHour = document.getElementsByClassName("hour");
            divHour[0].style.transform = "rotate(" + hourDeg + "deg)";
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <div id="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second">
            <div class="secHead"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            opacity:0.5;
            transform:rotate(45deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: red url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            opacity:0.5;
            transform:rotate(100deg);
            transform-origin:11px 273px;
        }
    </style>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;

        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
        }
        // 每秒钟调用一次
        function clockRotate(){
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            var divSecond = document.getElementsByClassName("second");
            divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            var divMinute = document.getElementsByClassName("minute");
            divMinute[0].style.transform = "rotate(" + minuteDeg + "deg)";
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <div id="clock">
        <div class="second">
            <div class="secHead"></div>
        </div>
        <div class="minute"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            opacity:0.5;
            transform:rotate(45deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
    </style>
    <script type="text/javascript">
        var secDegree = 0;
        // 文档准备好以后,咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
        }
        // 每秒钟调用一次
        function clockRotate(){
            secDegree += 6;//360度/60秒=6度/秒
            var divSecond = document.getElementsByClassName("second");
            divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <div id="clock">
        <div class="second">
            <div class="secHead"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            opacity:0.5;
            transform:rotate(45deg);
            transform-origin:11px 273px;
        }
    </style>
    <script type="text/javascript">
        var secDegree = 0;
        // 每秒钟调用一次
        function clockRotate(){
            secDegree += 6;//360度/60秒=6度/秒
            var divSecond = document.getElementsByClassName("second");
            divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
        }
        // 启动定时器,定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body>
    <div id="clock">
        <div class="second"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            opacity:0.5;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div class="second"></div>
    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>时钟Click</title>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
        }
        #clock{
            width:800px;
            height:800px;
            border:1px solid red;
            margin:auto;
            background:url("./imgs/timg.png") 0px 0px no-repeat;
            background-size:100% 100%;
        }
    </style>
</head>
<body>
    <div id="clock">

    </div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery方式实现旋转.</title>
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <style type="text/css">
        .second{
            width:300px;
            height:30px;
            background-color:red;
            position:fixed;
            left:500px;
            top:500px;
            /* transform:rotate(45deg); */
            /* transform-origin:0px 0px; */ /* CSS设置中心点,为左上角 */
        }
    </style>
    <script type="text/javascript">
        var degre = 0;
        function rotate(){
            degre += 10;
            var secDiv = document.getElementById("second");
            secDiv.style.transform = "rotate(" + degre + "deg)";
        }
        function rotate2(){
            degre += 10;
            $("#second").rotate({
                angle:degre,
                center:[0,0]
            });
        }
        function myload(){
            setInterval("rotate2()",1000);
        }
    </script>
</head>
<body onload="myload()">
    <div class="second" id="second"></div>
</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>test01</title>
    <style type="text/css">
        .second{
            width:300px;
            height:30px;
            background-color:red;
            position:fixed;
            left:500px;
            top:500px;
            transform:rotate(45deg);
        }
    </style>
    <script type="text/javascript">
        var degre = 0;
        function rotate(){
            degre += 10;
            var secDiv = document.getElementById("second");
            secDiv.style.transform = "rotate(" + degre + "deg)";
        }
        function myload(){
            setInterval("rotate()",1000);
        }
    </script>
</head>
<body onload="myload()">
    <div class="second" id="second"></div>
</body>
</html>

 

[展开全文]