效果图
浏览器展示
项目代码结构
代码展示
index.html 主页代码
<html>
<head>
<title>太空人表盘</title>
<meta charset="UTF-8">
<link href="./assets/css/style.css" rel="stylesheet">
<script src="./assets/js/timeGeneration.js"></script>
</head>
<body>
<div class="jun-meter">
<div class="jun-time-h-h" id="hh"></div>
<div class="jun-time-h-l" id="hl"></div>
<div class="jun-time-rect"></div>
<div class="jun-human"></div>
<div class="jun-time-m-h" id="mh"></div>
<div class="jun-time-m-l" id="ml"></div>
<div class="jun-time-s-h" id="sh"></div>
<div class="jun-time-s-l" id="sl"></div>
<div class="jun-date" id="date"></div>
<div class="jun-calendar-date" id="calendarDate"></div>
</div>
</body>
<script>
function WatchMeter() {
// 初始化dom
this._initDom()
// 更新
this.update()
this.date = new TimeGeneration()
}
// 修改原型
WatchMeter.prototype = {
constructor: WatchMeter,
// 初始化Dom
_initDom: function () {
this.elem = {}
this.elem.hh = document.getElementById('hh')
this.elem.hl = document.getElementById('hl')
this.elem.mh = document.getElementById('mh')
this.elem.ml = document.getElementById('ml')
this.elem.sh = document.getElementById('sh')
this.elem.sl = document.getElementById('sl')
this.elem.date = document.getElementById('date')
this.elem.calendarDate = document.getElementById('calendarDate')
},
// 更新
update: function () {
var _this = this
setInterval(function () {
_this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
}, 1000)
},
// 渲染
_render: function (date, calendarDate, time) {
this._setNumberImage(this.elem.hh, time[0])
this._setNumberImage(this.elem.hl, time[1])
this._setNumberImage(this.elem.mh, time[2])
this._setNumberImage(this.elem.ml, time[3])
this._setNumberImage(this.elem.sh, time[4])
this._setNumberImage(this.elem.sl, time[5])
this.elem.date.innerText = date[2] + " " +date[0] + "-" +date[1]
this.elem.calendarDate.innerText = calendarDate
},
// 设置数字图片
_setNumberImage: function (elem, value) {
elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)";
}
}
var myWatchMeter = new WatchMeter()
</script>
</html>
style.css样式代码
.jun-meter {
position: relative;
width: 640px;
height: 640px;
background-image: url("../img/ring.svg");
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
margin-top: 7%;
}
.jun-time-rect {
position: absolute;
width: 30px;
height: 80px;
left: 275px;
top: 180px;
background-image: url("../img/rect.svg");
background-size: 40px 40px;
}
.jun-time-h-h {
position: absolute;
width: 100px;
height: 100px;
left: 140px;
top: 170px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-time-h-l {
position: absolute;
width: 100px;
height: 100px;
left: 200px;
top: 170px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-time-m-h {
position: absolute;
width: 100px;
height: 100px;
left: 290px;
top: 170px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-time-m-l {
position: absolute;
width: 100px;
height: 100px;
left: 350px;
top: 170px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-time-s-h {
position: absolute;
width: 60px;
height: 60px;
left: 430px;
top: 208px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-time-s-l {
position: absolute;
width: 60px;
height: 60px;
left: 470px;
top: 208px;
background-image: url("../img/8.svg");
background-repeat: no-repeat;
background-size: 100%;
}
.jun-calendar-date {
position: absolute;
width: 120px;
height: 30px;
left: 460px;
top: 310px;
line-height: 30px;
font-size: 20px;
text-align: center;
}
.jun-date {
position: absolute;
width: 120px;
height: 30px;
left: 460px;
top: 345px;
line-height: 30px;
font-size: 20px;
text-align: center;
}
.jun-human{
position: absolute;
width: 150px;
height: 150px;
left: 250px;
top: 280px;
background-image: url("../img/human.gif");
background-repeat: no-repeat;
background-size: 100%;
}
timeGeneration.js 控制代码
// 生成时间 农历 公历 时间
function TimeGeneration() {
}
TimeGeneration.prototype = {
constructor: TimeGeneration,
WEEKDAY_NAME: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
NUMBER_STRING: "一二三四五六七八九十",
MONTH_STRING: "正二三四五六七八九十冬腊",
MONTH_ADD: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
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],
_getBit: function (m, n) {
return (m >> n) & 1;
},
// 获取时间 array
getTime: function () {
var time = new Date();
return [parseInt(time.getHours() / 10),
parseInt(time.getHours() % 10),
parseInt(time.getMinutes() / 10),
parseInt(time.getMinutes() % 10),
parseInt(time.getSeconds() / 10),
parseInt(time.getSeconds() % 10)]
},
// 获取公历日期 array
getDate: function () {
var date = new Date();
return [
date.getMonth() + 1,
date.getDate(),
this.WEEKDAY_NAME[date.getDay()]
]
},
// 获取农历日期 string
getCalendarDate: function () {
var calendar = new Date();
var tmp = calendar.getFullYear();
if (tmp < 1900) {
tmp += 1900;
}
var total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.MONTH_ADD[calendar.getMonth()] + calendar.getDate() - 38;
if (calendar.getFullYear() % 4 == 0 && calendar.getMonth() > 1) {
total++;
}
var isEnd = false;
var n, m, k
for (m = 0; ; m++) {
k = (this.CALENDAR_DATA[m] < 0xfff) ? 11 : 12;
for (n = k; n >= 0; n--) {
if (total <= 29 + this._getBit(this.CALENDAR_DATA[m], n)) {
isEnd = true;
break;
}
total = total - 29 - this._getBit(this.CALENDAR_DATA[m], n);
}
if (isEnd) break;
}
var month = k - n + 1;
var day = total;
if (k == 12) {
if (month == Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
month = 1 - month;
}
if (month > Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
month--;
}
}
var tmp = "";
if (month < 1) {
tmp += "(闰)";
tmp += this.MONTH_STRING.charAt(-month - 1);
} else {
tmp += this.MONTH_STRING.charAt(month - 1);
}
tmp += "月";
tmp += (day < 11) ? "初" : ((day < 20) ? "十" : ((day < 30) ? "廿" : "三十"));
if (day % 10 != 0 || day == 10) {
tmp += this.NUMBER_STRING.charAt((day - 1) % 10);
}
return tmp;
}
}
仿造华为手边主题界面
svg素材和源码下载
html5华为手表太空人主题源码-网页制作文档类资源-CSDN下载
相关知识
HTML、CSS和JavaScript是构建现代网页的核心技术，它们相互配合，共同实现了网页的结构、样式和交互行为。下面将详细解释每种技术的特点和用法。
一、HTML（Hypertext Markup Language）
HTML 是一种标记语言，用于描述网页的结构和内容。它由一系列标签组成，通过这些标签可以定义不同的元素和其属性。以下是 HTML 的一些重要概念和常用标签：
-
标签（Tag）：HTML 使用标签来包围和定义文档中的元素。标签通常由尖括号表示，如
<tagname>。常见的标签有<html>、<head>、<body>等。 -
元素（Element）：元素是由开始标签和结束标签组成的整体，用于定义网页中的特定部分。例如，
<p>标签用来定义段落，<img>标签用来插入图片。 -
属性（Attribute）：属性提供了关于元素的额外信息。每个标签都可以具有不同的属性。例如，
<a>标签的href属性用于指定链接的目标地址。 -
结构化标签：HTML5 引入了一些新的结构化标签，如
<header>、<nav>、<section>、<article>等，使得页面的结构更加明确和语义化。
除了以上概念，HTML 还提供了丰富的标签来定义文本、链接、图像、表格、表单等各种元素。通过合理使用这些标签，可以创建出良好的页面结构和内容。
二、CSS（Cascading Style Sheets）
CSS 用于控制网页的样式和布局，通过选择器和声明来定位和修改 HTML 元素的外观。以下是 CSS 的一些重要概念和常用属性：
-
选择器（Selector）：选择器用于指定要应用样式的 HTML 元素。可以根据元素的标签名、类名、ID 等进行选择。例如，
h1选择器选择所有的标题元素。 -
声明块（Declaration Block）：在选择器中，可以使用声明块来定义元素的样式。声明块由花括号包围，包含一个或多个属性声明。例如，
{color: red; font-size: 16px;}定义了元素的文本颜色和字体大小。 -
属性（Property）：属性用于指定元素的样式特征，如颜色、字体、边距等。每个属性都有对应的值，用冒号与属性分隔。例如，
color: red;指定了文本的颜色为红色。 -
盒模型（Box Model）：CSS 使用盒模型来定义元素的布局和边框。盒模型包括内容区域、内边距、边框和外边距。通过调整这些属性，可以控制元素的大小和位置。
CSS 还提供了众多其他特性，如背景样式、浮动、定位、动画等，使开发者能够实现丰富的页面设计效果。
三、JavaScript
JavaScript 是一种脚本语言，用于实现网页的交互功能和动态效果。它可以通过操作 HTML 元素、响应用户事件和与后端进行数据交互来改变网页的行为。以下是 JavaScript 的一些重要概念和用法：
-
变量（Variable）：JavaScript 使用变量来存储和操作数据。变量可以容纳不同类型的值，如数字、字符串、数组、对象等。使用
var、let或const关键字声明变量。 -
数据类型（Data Types）：JavaScript 支持多种数据类型，如数字、字符串、布尔值、数组、对象等。可以使用适当的方法和运算符对它们进行操作。
-
函数（Function）：函数是一段可重复使用的代码块，用于执行特定的任务。通过定义函数，可以将逻辑封装起来，提高代码的可读性和复用性。
-
事件处理：JavaScript 可以捕捉用户在网页上的各种事件，如点击、鼠标移动、表单提交等。通过事件处理函数，可以对这些事件做出响应，并改变网页的状态。
-
DOM 操作：DOM（Document Object Model）是 HTML 文档的对象表示。JavaScript 可以使用 DOM API 来访问和操作网页的元素，例如更改文本内容、修改样式、添加或删除元素等。
-
AJAX 和异步编程：JavaScript 支持使用 AJAX 技术与后端进行数据交互，实现动态加载和更新页面内容。同时，JavaScript 还支持异步编程模式，使得在网络请求和其他耗时操作时不会阻塞页面的运行。
JavaScript 提供了丰富的内置函数和对象，用于处理字符串、日期、数学计算、数组操作等各种任务。此外，也可以通过引入第三方库和框架来扩展 JavaScript 的功能和能力。
总结： HTML 用于定义网页的结构和内容，CSS 用于控制网页的样式和布局，JavaScript 用于实现网页的交互和动态效果。它们共同构成了现代网页开发的基础，通过它们的结合使用，开发者可以创建出丰富、美观且具有良好交互性的网页应用。
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
