轮盘时钟(开源)edit icon

Fork(复制)
下载
嵌入
设置
BUG反馈
index.html
test.css
common.js
config.js
test.js
现在支持上传本地图片了!
            
            <!DOCTYPE html>
<html>
<head>
    <!-- 由于在bi.cool官网上不支持跨越操作或jQuery配置出错导致的不显示问题,下载源码后即可恢复正常 -->
    <!-- 如果您懒得下载可以访问江枫官网【https://yicc.3c.ink】但是有可能会被新内容覆盖 -->
    <!-- 创意云网络科技工作室 -->
    <!-- 创意云江枫/总 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>轮盘时钟(开源)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="test.js"></script>
    <script src="common.js"></script>
    <script src="config.js"></script>
</head>

<style>

    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-attachment: fixed;
        color: #F5F4F6;
        font-size: 12px;
        font-weight: bold;
        overflow: hidden;
        width: 1000px;
        height: 900px;
        font-family: "微软雅黑";
        
    }

    audio{
        position: absolute;
        right: 0;
        opacity: 0.1;
        transition: all 1s;
        
    }

    audio:hover{
        opacity: 1;
    }

    .current{
        color: #D1A3F7;
    }

    video{
        z-index: -1;
        position: fixed;
        min-width: 100%;
        min-height: 100%;
    }

    .main-content{
        position: absolute; 
        top:50%;
        left: 50%;
    }

    .main-content .year{
        position: relative;
        top: -13px;
        left: -38px;
        text-align: center
    }

    .main-content .year span{
        position: absolute;
        width: 80px;
    }

    .main-content .month{
        position: relative;
        top: -13px;
        left: 40px;
    }

    .month span{
        position: absolute;
        width: 60px;
        
    }

    .main-content .day{
        position: relative;
        top: -13px;
        left: 85px;
    }

    .day span{
        position: absolute;
        width: 65px;
        
    }

    .main-content .week{
        position: relative;
        top: -13px;
        left: 145px;
    }
    .week span{
        position: absolute;
        width: 65px;
        
    }

    .main-content .shichen{
        position: relative;
        top: -13px;
        left: 200px;
    }
    .shichen span{
        position: absolute;
        width: 125px;
        
    }

    .main-content .hour{
        position: relative;
        top: -13px;
        left: 240px;
    }
    .hour span{
        position: absolute;
        width: 60px;
        
    }

    .main-content .minute{
        position: relative;
        top: -13px;
        left: 300px;
    }
    .minute span{
        position: absolute;
        width: 60px;
        
    }

    .main-content .second{
        position: relative;
        top: -13px;
        left: 370px;
    }
    .second span{
        position: absolute;
        width: 60px;
        
    }

</style>
<body>
    <div class="main-content">
        <div class="year">
        </div> 
        <div class="month"></div>
        <div class="day"></div>
        <div class="week"></div>
        <div class="shichen"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>
</html>
        
预览
控制台