0
0

防华为手表太空人主题界面 | html5 代码实现

效果图

浏览器展示

项目代码结构

代码展示

index.html 主页代码

  1. <html>
  2. <head>
  3.     <title>太空人表盘</title>
  4.     <meta charset="UTF-8">
  5.     <link href="./assets/css/style.css" rel="stylesheet">
  6.     <script src="./assets/js/timeGeneration.js"></script>
  7. </head>
  8. <body>
  9. <div class="jun-meter">
  10.     <div class="jun-time-h-h" id="hh"></div>
  11.     <div class="jun-time-h-l" id="hl"></div>
  12.     <div class="jun-time-rect"></div>
  13.     <div class="jun-human"></div>
  14.     <div class="jun-time-m-h" id="mh"></div>
  15.     <div class="jun-time-m-l" id="ml"></div>
  16.     <div class="jun-time-s-h" id="sh"></div>
  17.     <div class="jun-time-s-l" id="sl"></div>
  18.     <div class="jun-date" id="date"></div>
  19.     <div class="jun-calendar-date" id="calendarDate"></div>
  20. </div>
  21. </body>
  23. <script>
  25.     function WatchMeter() {
  26.         // 初始化dom
  27.         this._initDom()
  28.         // 更新
  29.         this.update()
  31.         this.date = new TimeGeneration()
  33.     }
  35.     // 修改原型
  36.     WatchMeter.prototype = {
  37.         constructor: WatchMeter,
  38.         // 初始化Dom
  39.         _initDom: function () {
  40.             this.elem = {}
  41.             this.elem.hh = document.getElementById('hh')
  42.             this.elem.hl = document.getElementById('hl')
  43.             this.elem.mh = document.getElementById('mh')
  44.             this.elem.ml = document.getElementById('ml')
  45.             this.elem.sh = document.getElementById('sh')
  46.             this.elem.sl = document.getElementById('sl')
  47.             this.elem.date = document.getElementById('date')
  48.             this.elem.calendarDate = document.getElementById('calendarDate')
  49.         },
  51.         // 更新
  52.         update: function () {
  53.             var _this = this
  54.             setInterval(function () {
  55.                 _this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
  56.             }, 1000)
  57.         },
  59.         // 渲染
  60.         _render: function (date, calendarDate, time) {
  61.             this._setNumberImage(this.elem.hh, time[0])
  62.             this._setNumberImage(this.elem.hl, time[1])
  63.             this._setNumberImage(this.elem.mh, time[2])
  64.             this._setNumberImage(this.elem.ml, time[3])
  65.             this._setNumberImage(this.elem.sh, time[4])
  66.             this._setNumberImage(this.elem.sl, time[5])
  67.             this.elem.date.innerText = date[2] + " " +date[0] + "-" +date[1]
  68.             this.elem.calendarDate.innerText = calendarDate
  69.         },
  71.         // 设置数字图片
  72.         _setNumberImage: function (elem, value) {
  73.             elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)";
  74.         }
  75.     }
  77.     var myWatchMeter = new WatchMeter()
  79. </script>
  81. </html>

style.css样式代码

  1. .jun-meter {
  2.     position: relative;
  3.     width: 640px;
  4.     height: 640px;
  5.     background-image: url("../img/ring.svg");
  6.     background-repeat: no-repeat;
  7.     background-size: 100%;
  8.     margin: auto;
  9.     margin-top: 7%;
  10. }
  12. .jun-time-rect {
  13.     position: absolute;
  14.     width: 30px;
  15.     height: 80px;
  16.     left: 275px;
  17.     top: 180px;
  18.     background-image: url("../img/rect.svg");
  19.     background-size: 40px 40px;
  20. }
  22. .jun-time-h-h {
  23.     position: absolute;
  24.     width: 100px;
  25.     height: 100px;
  26.     left: 140px;
  27.     top: 170px;
  28.     background-image: url("../img/8.svg");
  29.     background-repeat: no-repeat;
  30.     background-size: 100%;
  31. }
  33. .jun-time-h-l {
  34.     position: absolute;
  35.     width: 100px;
  36.     height: 100px;
  37.     left: 200px;
  38.     top: 170px;
  39.     background-image: url("../img/8.svg");
  40.     background-repeat: no-repeat;
  41.     background-size: 100%;
  42. }
  44. .jun-time-m-h {
  45.     position: absolute;
  46.     width: 100px;
  47.     height: 100px;
  48.     left: 290px;
  49.     top: 170px;
  50.     background-image: url("../img/8.svg");
  51.     background-repeat: no-repeat;
  52.     background-size: 100%;
  53. }
  55. .jun-time-m-l {
  56.     position: absolute;
  57.     width: 100px;
  58.     height: 100px;
  59.     left: 350px;
  60.     top: 170px;
  61.     background-image: url("../img/8.svg");
  62.     background-repeat: no-repeat;
  63.     background-size: 100%;
  64. }
  66. .jun-time-s-h {
  67.     position: absolute;
  68.     width: 60px;
  69.     height: 60px;
  70.     left: 430px;
  71.     top: 208px;
  72.     background-image: url("../img/8.svg");
  73.     background-repeat: no-repeat;
  74.     background-size: 100%;
  75. }
  77. .jun-time-s-l {
  78.     position: absolute;
  79.     width: 60px;
  80.     height: 60px;
  81.     left: 470px;
  82.     top: 208px;
  83.     background-image: url("../img/8.svg");
  84.     background-repeat: no-repeat;
  85.     background-size: 100%;
  86. }
  88. .jun-calendar-date {
  89.     position: absolute;
  90.     width: 120px;
  91.     height: 30px;
  92.     left: 460px;
  93.     top: 310px;
  94.     line-height: 30px;
  95.     font-size: 20px;
  96.     text-align: center;
  97. }
  99. .jun-date {
  100.     position: absolute;
  101.     width: 120px;
  102.     height: 30px;
  103.     left: 460px;
  104.     top: 345px;
  105.     line-height: 30px;
  106.     font-size: 20px;
  107.     text-align: center;
  108. }
  110. .jun-human{
  111.     position: absolute;
  112.     width: 150px;
  113.     height: 150px;
  114.     left: 250px;
  115.     top: 280px;
  116.     background-image: url("../img/human.gif");
  117.     background-repeat: no-repeat;
  118.     background-size: 100%;
  119. }

timeGeneration.js 控制代码

  1. // 生成时间 农历 公历 时间
  2. function TimeGeneration() {
  4. }
  6. TimeGeneration.prototype = {
  7.     constructor: TimeGeneration,
  9.     WEEKDAY_NAME: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  10.     NUMBER_STRING: "一二三四五六七八九十",
  11.     MONTH_STRING: "正二三四五六七八九十冬腊",
  12.     MONTH_ADD: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
  13.     CALENDAR_DATA: [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],
  15.     _getBit: function (m, n) {
  16.         return (m >> n) & 1;
  17.     },
  19.     // 获取时间 array
  20.     getTime: function () {
  21.         var time = new Date();
  22.         return [parseInt(time.getHours() / 10),
  23.             parseInt(time.getHours() % 10),
  24.             parseInt(time.getMinutes() / 10),
  25.             parseInt(time.getMinutes() % 10),
  26.             parseInt(time.getSeconds() / 10),
  27.             parseInt(time.getSeconds() % 10)]
  28.     },
  30.     // 获取公历日期 array
  31.     getDate: function () {
  32.         var date = new Date();
  33.         return [
  34.             date.getMonth() + 1,
  35.             date.getDate(),
  36.             this.WEEKDAY_NAME[date.getDay()]
  37.         ]
  38.     },
  40.     // 获取农历日期 string
  41.     getCalendarDate: function () {
  42.         var calendar = new Date();
  43.         var tmp = calendar.getFullYear();
  45.         if (tmp < 1900) {
  46.             tmp += 1900;
  47.         }
  49.         var total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.MONTH_ADD[calendar.getMonth()] + calendar.getDate() - 38;
  50.         if (calendar.getFullYear() % 4 == 0 && calendar.getMonth() > 1) {
  51.             total++;
  52.         }
  54.         var isEnd = false;
  55.         var n, m, k
  56.         for (m = 0; ; m++) {
  57.             k = (this.CALENDAR_DATA[m] < 0xfff) ? 11 : 12;
  58.             for (n = k; n >= 0; n--) {
  59.                 if (total <= 29 + this._getBit(this.CALENDAR_DATA[m], n)) {
  60.                     isEnd = true;
  61.                     break;
  62.                 }
  63.                 total = total - 29 - this._getBit(this.CALENDAR_DATA[m], n);
  64.             }
  65.             if (isEnd) break;
  66.         }
  68.         var month = k - n + 1;
  69.         var day = total;
  71.         if (k == 12) {
  72.             if (month == Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
  73.                 month = 1 - month;
  74.             }
  75.             if (month > Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
  76.                 month--;
  77.             }
  78.         }
  80.         var tmp = "";
  81.         if (month < 1) {
  82.             tmp += "(闰)";
  83.             tmp += this.MONTH_STRING.charAt(-month - 1);
  84.         } else {
  85.             tmp += this.MONTH_STRING.charAt(month - 1);
  86.         }
  88.         tmp += "月";
  89.         tmp += (day < 11) ? "初" : ((day < 20) ? "十" : ((day < 30) ? "廿" : "三十"));
  90.         if (day % 10 != 0 || day == 10) {
  91.             tmp += this.NUMBER_STRING.charAt((day - 1) % 10);
  92.         }
  93.         return tmp;
  94.     }
  96. }

仿造华为手边主题界面

svg素材和源码下载

html5华为手表太空人主题源码-网页制作文档类资源-CSDN下载

标签： html js css
本文转载自: https://blog.csdn.net/weixin_40986713/article/details/122943386
版权归原作者 洛阳泰山 所有， 如有侵权，请联系我们删除。
登录后发布评论

“防华为手表太空人主题界面 | html5 代码实现”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。