华为太空人表盘

little_shallot
224 阅读3分钟

最近看到蛮火的太空人表盘，就用html和js去写了一个，时间可以动，如果想要其他数字切换可以自己去改，，只有那几个icon是图片，其他全是布局，可以直接复制，代码都贴在下面了，不过需要自己下载个ttf时钟字体文件，在css里面引入。 这里是完整项目的下载链接

下载链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <script type="text/javascript" src="js/js.js"></script>
    <title>太空人表盘</title>
</head>
<body>
    <div class="box">
        <div class="topleft">
            <img src="./image/1.png" alt="">
            <span>80%</span>
        </div>
        <div class="topright">
            <div class="topright_t">
                <div class="title">空气优质</div>
                <img src="./image/2.png" alt="" class="img">
                <div class="up">
                    <div>
                        <div>晴天</div>
                        <div style="margin-top:10px;">25°C</div>
                    </div>
                    <div style="margin-left: 40px;" id="kongqi">
                        <div><span> 26°</span><img src="./image/3.png" alt="" style="margin-top:10px;"></div>
                        <div><span> 26°</span><img src="./image/3.png" alt="" style="transform:rotate(-60deg);"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="size">
            <span id="timeh" style=" font-family: MyFont;">15</span>
            <span class="time" style=" font-family: MyFont;">:</span>
            <span id="timem" style=" font-family: MyFont;">39</span>
            <span style="font-size: 60px;margin-left: 5px; font-family: MyFont;" id="times">00</span>
        </div>
        <div class="time_right">
            <div id="span"> <span>十一</span></div>
            <div style="margin-top: 15px;text-align: right;"><span id="zhou">周二</span><span style="margin-left: 5px;"
                    id="md">00-00</span>
            </div>
        </div>
        <div class="time_left">
            <div>80-129</div>
            <div>
                <img src="./image/4.png" alt=""> <span style="transform: scale(1.5,1);" id="heart">93</span>
            </div>
        </div>
        <div class="imgdata">
            <img src="./image/6.png" alt="">
        </div>
        <div class="imgdata1">
            <img src="./image/7.gif" alt="">
        </div>
        <div class="xie">
            <img src="./image/5.png" alt="" style="margin-right:10px"><span style="transform: scale(1,0.7);">6723</span>
        </div>
        <div class="centent"></div>
        <div class="butletf">
            <div class="div1">睡眠</div>
            <div class="div2"><span>7h</span><span>30m</span></div>
        </div>
        <div class="butright">
            <div class="div3">8.66km</div>
        </div>
    </div>
    <script>
        var h = document.getElementById('timeh')
        var m = document.getElementById('timem')
        var s = document.getElementById('times')
        var zhou = document.getElementById('zhou')
        var md = document.getElementById('md')
        var span = document.getElementById('span').getElementsByTagName('span')
        var divs = document.getElementById('kongqi').getElementsByTagName('div')
        var heart = document.getElementById('heart')
        var myDate = new Date();
        // 替换星期
        var arrt = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
        var arrtssss = new Array("一", "二", "三", "四", "五", "六", "日",);
        /*获取当前农历*/
        function showCal() {
            var D = new Date();
            var yy = D.getFullYear();
            var mm = D.getMonth() + 1;
            var dd = D.getDate();
            var ww = D.getDay();
            var ss = parseInt(D.getTime() / 1000);
            if (yy < 100) yy = "19" + yy;
            return GetLunarDay(yy, mm, dd);
        }

        //定义全局变量 
        var CalendarData = new Array(100);
        var madd = new Array(12);
        var tgString = "甲乙丙丁戊己庚辛壬癸";
        var dzString = "子丑寅卯辰巳午未申酉戌亥";
        var numString = "一二三四五六七八九十";
        var monString = "正二三四五六七八九十冬腊";
        var weekString = "日一二三四五六";
        var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
        var cYear, cMonth, cDay, TheDate;
        CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
        madd[0] = 0;
        madd[1] = 31;
        madd[2] = 59;
        madd[3] = 90;
        madd[4] = 120;
        madd[5] = 151;
        madd[6] = 181;
        madd[7] = 212;
        madd[8] = 243;
        madd[9] = 273;
        madd[10] = 304;
        madd[11] = 334;

        function GetBit(m, n) {
            return (m >> n) & 1;
        }
        //农历转换 
        function e2c() {
            TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
            var total, m, n, k;
            var isEnd = false;
            var tmp = TheDate.getYear();
            if (tmp < 1900) {
                tmp += 1900;
            }
            total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;

            if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
                total++;
            }
            for (m = 0; ; m++) {
                k = (CalendarData[m] < 0xfff) ? 11 : 12;
                for (n = k; n >= 0; n--) {
                    if (total <= 29 + GetBit(CalendarData[m], n)) {
                        isEnd = true; break;
                    }
                    total = total - 29 - GetBit(CalendarData[m], n);
                }
                if (isEnd) break;
            }
            cYear = 1921 + m;
            cMonth = k - n + 1;
            cDay = total;
            if (k == 12) {
                if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
                    cMonth = 1 - cMonth;
                }
                if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
                    cMonth--;
                }
            }
        }

        function GetcDateString() {
            var tmp = "";
            /*显示农历年：（ 如：甲午(马)年 ）*/
            /*tmp+=tgString.charAt((cYear-4)%10); 
            tmp+=dzString.charAt((cYear-4)%12); 
            tmp+="("; 
            tmp+=sx.charAt((cYear-4)%12); 
            tmp+=")年 ";*/
            if (cMonth < 1) {
                tmp += "(闰)";
                tmp += monString.charAt(-cMonth - 1);
            } else {
                tmp += monString.charAt(cMonth - 1);
            }
            tmp += "月";
            tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
            if (cDay % 10 != 0 || cDay == 10) {
                tmp += numString.charAt((cDay - 1) % 10);
            }
            return tmp;
        }

        function GetLunarDay(solarYear, solarMonth, solarDay) {
            //solarYear = solarYear<1900?(1900+solarYear):solarYear; 
            if (solarYear < 1921 || solarYear > 2021) {
                return "";
            } else {
                solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
                e2c(solarYear, solarMonth, solarDay);
                return GetcDateString();
            }
        }

        date_format()
        function date_format() {
            var myDate = new Date();
            if (myDate.getHours() < 10) {
                h.innerHTML = "0" + myDate.getHours()
            } else {
                h.innerHTML = myDate.getHours()
            }
            if (myDate.getMinutes() < 10) {
                m.innerHTML = "0" + myDate.getMinutes()
            } else {
                m.innerHTML = myDate.getMinutes()
            }
            if (myDate.getSeconds() < 10) {
                s.innerHTML = "0" + myDate.getSeconds();
            } else {
                s.innerHTML = myDate.getSeconds();
            }
            zhou.innerHTML = "周" + arrtssss[myDate.getDay() - 1];
            md.innerHTML = (myDate.getMonth() + 1) + "-" + myDate.getDate();
            span[0].innerHTML = showCal();
        };
        setInterval(() => {
            date_format()
        }, 300);
        // 温度变化
        function date_tow() {
            console.log(divs[0].getElementsByTagName('span')[0].innerText)
            divs[0].getElementsByTagName('span')[0].innerHTML = divs[0].getElementsByTagName('span')[0].innerText == '26°' ? '25°' : '26°';
            divs[1].getElementsByTagName('span')[0].innerHTML = divs[1].getElementsByTagName('span')[0].innerText == '20°' ? '19°' : '20°';
            heart.innerHTML = heart.innerText == 93 ? '94' : '93'
        }
        setInterval(() => {
            date_tow()
        }, 3000);

    </script>
</body>

</html>

css

```c
@charset 'utf-8';

* {
    margin: 0;
    padding: 0;
    font-family: 'Sans-serif';
}

@font-face {
    font-family: "MyFont";
    /*字体名称*/
    /* src: url ("/11px2bus.TTF");
    src: url ("/11px3bus.TTF");*/
    /* src: url("./11pxbus.TTF"); */
    src: url('./DIGITAL-Regular.ttf');
    /* src: local ("./DIGITAL-Dreamfat.ttf"); */
    /*字体源文件*/
    font-weight: 600;
    font-style: normal;
}

.box {
    width: 800px;
    height: 800px;
    border-radius: 50%;
    border: 50px solid rgb(68, 68, 68);
    margin: auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    background: #DFE6F0;
}

.topleft {
    position: absolute;
    left: 0;
    top: -4px;
    height: 200px;
    width: 312px;
    border: 4px solid rgb(68, 68, 68);
    position: relative;
}

.topleft img {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 70px;
    transform: rotate(-86deg);

}

.topleft span {
    position: absolute;
    left: 50%;
    bottom: 5px;
    font-size: 40px;
    transform: translateX(-50%);
    transform: scale(2, 1.3);
}

.topright {
    position: absolute;
    right: 0;
    top: -4px;
    height: 200px;
    width: 476px;
    border: 4px solid rgb(68, 68, 68);
    border-left-width: 0;

}

.topright .img {
    position: absolute;
    right: 130px;
    bottom: 40px;
    width: 80px;
}

.topright_t {
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: 180px;
    font-size: 37px;
}

.topright .up {
    position: absolute;
    right: 50%;
    bottom: 80px;
    left: 30px;
    font-size: 32px;
    transform: translateY(50%);
    display: flex;
}

/* .topright .up div{ */
.topright .title {
    position: absolute;
    left: 30px;
}

.topright .up div div {
    display: flex;
    align-items: center;

}

.topright .up img {
    width: 40px;
    display: inline-block;
}

.centent {
    position: absolute;
    bottom: 160px;
    left: 0;
    right: 0;
    border-bottom: 4px solid rgb(68, 68, 68);

}

.butletf {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 312px;
    height: 80px;
    border-right: 4px solid rgb(68, 68, 68);
    /* position: relative; */
    display: flex;
}
.butletf::before{
    content:'距离';
    position: absolute;
    right: -140px;
    font-size: 45px;
    font-weight:500;
}
.butletf .div1{
    height: 100%;
    font-size: 45px;
    width: 50%;
    text-align: right;
}
.butletf .div2{
    height: 100%;
    font-size: 48px;
    margin-left: 50px;
    text-align:right;
    font-weight: 800;
}
.div3{
    height: 100%;
    font-size: 48px;
    width: 48%;
    margin-left: 20px;
    text-align: left;
    font-weight: 800;
}
.butletf::after {
    content: '';
    border: 2px solid rgb(68, 68, 68);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 280px;
}

.butright {
    position: absolute;
    left: 280px;
    right: 0;
    border-left: 4px solid rgb(68, 68, 68);
    bottom: 0px;
    height: 80px;

}

.size {
    position: absolute;
    top: 185px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'MyFont';

}

.size span {
    display: inline-block;
    font-size: 140px;
}

.size .time {
    position: relative;
    color: #DFE6F0;
}

.time::after {
    content: ":";
    position: absolute;
    left: 50%;
    font-size: 140px;
    transform: translate(-50%, -11%);
    color: black;
}

.xie{
    font-family: 'Sans-serif';
    position: absolute;
    bottom: 162px;
    left: 555px;
    font-size: 42px;
    display: flex;
    align-items: center;
}
.xie img{
    width: 65px;
    height: 85px;
}
/* 日期 */
.time_right{
    font-family: 'Sans-serif';
    position: absolute;
    right: 40px;
    top: 50%;
    font-size: 28px;
}

/* 心率 */
.time_left{
    position: absolute;
    bottom: 180px;
    left: 80px;
    font-size: 30px;
}
.time_left div{
    display: flex;
    align-items: center;
}
.time_left div img{
    width: 60px;
    margin:0 10px;
    margin-left: 20px;
}
.imgdata1{
  
    position: absolute;
    top: 45%;
    left: 38%;

    /* transform: translate(-50%,-50%); */
}
.imgdata1 img{
    width:200px;

}
.imgdata{
    display: none;
    position: absolute;
    top: 40%;
    left: 37%;
    transform:rotate(-60deg);
    /* transform: translate(-50%,-50%); */
}
.imgdata img{
    width:250px;
    animation: run 2s linear infinite;
}

@keyframes run {
    0%{transform:  rotateY(0deg);
    }
    /* 25%{transform:  rotateY(1460deg);
    } */
    50%{transform:  rotateY(180deg);
    }
    /* 75%{transform:  rotateY(5840deg);
    } */
    100%{transform:  rotateY(360deg);
    }
}

在这里插入图片描述 小白一个，多多包涵

avatar
文章
阅读
粉丝

友情链接：