天天看点
返回

时钟

<!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>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        html {

            width: 100%;

            height: 100%;

        body {

            background-image: url(./g1.gif);

            background-repeat: no-repeat;

            background-position: center;

            background-size: 100% 100%;

        #div1 {

            width: 800px;

            height: 800px;

            border: 60px solid transparent;

            position: relative;

            margin: 100px auto 40px;

            background-image: url(./1.PNG);

            background-size: 800px 800px;

            /* border-image: linear-gradient(#F80, #2ED) 20 20; */

        .common_style {

            width: 94%;

            height: 40px;

            text-align: center;

            position: absolute;

            top: 50%;

            left: 50%;

            display: flex;

            justify-content: space-between;

            align-items: center;

        .fs {

            font-size: 24px;

        .div2 {

            transform: translate(-50%, -50%) rotateZ(120deg);

        .span1 {

            transform: rotateZ(240deg);

            color: orange;

        .div3 {

            transform: translate(-50%, -50%) rotateZ(90deg);

        .span2 {

            transform: rotateZ(-90deg);

            color: salmon;

        .div4 {

            transform: translate(-50%, -50%) rotateZ(150deg);

        .span3 {

            transform: rotateZ(210deg);

            color: powderblue;

        .div5 {

            transform: translate(-50%, -50%);

        .span4 {

            color: rgb(175, 206, 64);

        .div6 {

            transform: translate(-50%, -50%) rotateZ(-150deg);

        .span5 {

            transform: rotateZ(150deg);

            color: plum;

        .div7 {

            transform: translate(-50%, -50%) rotateZ(-120deg);

        .span6 {

            transform: rotateZ(120deg);

            color: rgb(238, 112, 227);

        .div8 {

            width: 16px;

            height: 16px;

            box-sizing: border-box;

            transform: translate(-30%, -50%);

            border-radius: 50%;

            border: 2px solid #000;

            z-index: 1000;

            background-color: rgb(68, 120, 192);

        .com {

            width: 6px;

            border-left: 4px solid transparent;

            border-right: 4px solid transparent;

            transform-origin: 50% 100% 0;

        .div9 {

            height: 40%;

            border-bottom: 320px solid rgba(194, 195, 196, 0.5);

            top: 10%;

            transform: translate(-50%);

        .div10 {

            height: 30%;

            border-bottom: 240px solid rgba(222, 223, 220, 0.5);

            top: 20%;

        .div11 {

            height: 20%;

            border-bottom: 160px solid rgba(207, 214, 216, 0.5);

            top: 30%;

        .div12 {

            background-image: url(./bg1.PNG);

            top: 0;

            left: 0;

        .div13 {

            background-image: url(./11.jpg);

            right: 0;

        .commonB {

            width: 140px;

            height: 140px;

        #div14 {

            top: -7%;

        #in1 {

            width: 280px;

            height: 50px;

            outline: none;

            border: 0;

            font-size: 20px;

            text-indent: 1em;

            background-color: #F80;

    </style>

</head>

<body>

    <div id="div1" style="border-image: linear-gradient(#F80, #2ED) 20 20;">

        <div class="div2 common_style">

            <div class="span1 fs">1</div>

            <div class="span1 fs">7</div>

        </div>

        <div class="div3 common_style">

            <div class="span2 fs">12</div>

            <div class="span2 fs">6</div>

        <div class="div4 common_style">

            <div class="span3 fs">2</div>

            <div class="span3 fs">8</div>

        <div class="div5 common_style">

            <div class="span4 fs">9</div>

            <div class="span4 fs">3</div>

        <div class="div6 common_style">

            <div class="span5 fs">4</div>

            <div class="span5 fs">10</div>

        <div class="div7 common_style">

            <div class="span6 fs">5</div>

            <div class="span6 fs">11</div>

        <div class="div8"></div>

        <div class="div9 com"></div>

        <div class="div10 com"></div>

        <div class="div11 com"></div>

        <div class="div12 commonB"></div>

        <div class="div13 commonB"></div>

        <div id="div14"><input type="text" id="in1"></div>

    </div>

    <script>

        var secondEle = document.getElementsByClassName("div9")[0];

        var f = document.getElementsByClassName("div10")[0];

        var g = document.getElementsByClassName("div11")[0];

        secondEle.style.display = "none";

        f.style.display = "none";

        g.style.display = "none";

        setInterval(function () {

            secondEle.style.display = "block";

            var time = new Date();

            var second = time.getSeconds();

            var deg = second / 60 * 360;

            secondEle.style.transform = "rotate(" + deg + "deg)";

        }, 1000)

            f.style.display = "block";

            var first = time.getMinutes();

            var deg = first / 60 * 360 + second / 60 * 6;

            f.style.transform = "rotate(" + deg + "deg)";

            g.style.display = "block";

            var thrid = time.getHours();

            var deg = thrid / 12 * 360 + first / 60 * 30 + second / 60 * 0.5;

            g.style.transform = "rotate(" + deg + "deg)";

            var year = time.getFullYear();

            var mouth = time.getMonth() + 1;

            var date = time.getDate();

            var day = time.getDay();

            var hour = time.getHours();

            var minutes = time.getMinutes();

            var seconds = time.getSeconds();

            var str = "  ";

            var s = ".";

            var strp = ":";

            var st = year + s + mouth + s + date + str + "星期" + day + str + hour + strp + minutes + strp + seconds;

            in1.value = st;

        function randomNum(min, max) {

            return Math.round(Math.random() * (max - min)) + min;

html v9 v8
上一篇: python3爬虫(二)实战- 爬糗事百科
下一篇: 置信区间

继续阅读