前端快速学习记录：实现一个原神时钟（简易版）

最新推荐文章于 2024-06-26 19:39:06 发布

尼卡尼卡尼

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量1k

点赞数 3

分类专栏： Node.js 文章标签：前端

本文链接：https://blog.csdn.net/qq_42418728/article/details/126935788

版权

Node.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

正在学习React，今天先快速学一下前端页面的一些基础知识，并做一个小实践。上面是实现时钟的展示。（做得可能不够好，与原版的还是有许多差距，全当是玩）

前端实现分为html元素布局代码+css样式代码+js逻辑代码

1.html部分

页面由html文件来展示，html负责设计元素的布局（位置关系）

本次实践使用到的标签：

1. 文档框架：html，head，body，title

2. 编码设置：meta

3. 代码块标签: script

4. 链接标签：link

5. 容器标签：div

6. 其他标签：label（用来显示时钟的每一个部分）

每一个标签在文本中，构成一个个的元素，元素含有各自的属性，常用属性包括

class：将元素进行分类，便于统一管理，可以属于多个类别

id：每个元素的唯一标识，便于对特定元素的获取

href：相对链接，以当前文档的url为基准的链接路径

rel：关系属性，定义文件与链接的关系

src：外部资源属性，设置所引用的外部资源文件url

2.CSS部分

CSS样式表，部分基本语法：

选择器（负责筛选需要设置样式的元素）：类选择器、id选择器、全局选择器、标签选择器

举例：

常见选择器
选择器	例子	描述
.class	.intro	选择 class="intro" 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id="firstname" 的元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element.class	p.intro	选择 class="intro" 的所有 <p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。类推
:root	:root	选择文档的根元素。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。

筛选出元素后，进行设置属性

例子：
.container{
    position: relative;
    text-align: center;
    width: 500px;
    height: 500px;
    background: #83D0BC;
    margin: auto;
    display: flex;
}
属性：

1.使用相对位置

2.设置其内容文本行居中

3.4. 设置其宽高

5. 设置背景色

6.自动外边距（居中）

7.弹性布局

3.js部分

控制指针的转动（控制分针，时钟同理就懒得实现了）

let minute = document.getElementById("minute")
let count = 0
let timer = setInterval(function (){
    minute.style.transform = "rotate("+(180+count*6)+"deg)"
    count += 1
    count %= 60
}, 1000)

4.完整源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GenShin Clock</title>
    <script src="cfg/16.4.0/react-dom.development.js"></script>
    <script src="cfg/16.4.0/react.development.js"></script>
    <script src="cfg/16.4.0/babel.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container", id="can">
        <label class="clock_unit clock_bg"></label>
        <label class="clock_unit clock_hbg"></label>
        <label class="clock_unit star_particles"></label>
        <label class="clock_unit clock_horoscope04"></label>
        <label class="clock_unit clock_horoscope03"></label>
        <label class="clock_unit clock_horoscope06"></label>
        <label class="clock_unit clock_horoscope05"></label>
        <label class="clock_unit clock_dial"></label>
        <ClockHand class="clock_unit clock_hourHand" id="hour"></ClockHand>
        <label class="clock_unit clock_minuteHand" id="minute"></label>
        <label class="sun_state morning"></label>
        <label class="sun_state dusk"></label>
        <label class="sun_state night"></label>
        <label class="sun_state Noon"></label>
    </div>
    <script type="text/babel" src="script.js"></script>
</body>
</html>

body{
    background: #7acbeb;
    display: flex;
}
.container{
    position: relative;
    text-align: center;
    width: 500px;
    height: 500px;
    background: #83D0BC;
    margin: auto;
    display: flex;
}

.clock_unit{
    position: absolute;
    width: 500px;
    height: 500px;
    left: 0;
    top: 0;
    background: rgba(100, 80, 120, 0.2);
    text-align: center;
}

.clock_bg{
    background: url("images/Clock_BG.png");
    background-size: 100%, 100%;
}

.clock_hbg{
    background: url("images/UI_Img_HoroscopeBg.png");
    background-size: 100%, 100%;
}

.star_particles{
    background: url("images/star_particles.gif");
    background-size: 100%, 100%;
}

.clock_dial{
    background: url("images/UI_Clock_Dial.png");
    background-size: 100%, 100%;
}

.clock_horoscope03{
    background: url("images/UI_Img_Horoscope03.png") no-repeat;
    background-size: 68%, 68%;
    width: 425px;
    height: 425px;
    left: 45px;
    top: 130px;
    transform: rotate(40deg);
}

.clock_horoscope04{
    background: url("images/UI_Img_Horoscope04.png") no-repeat;
    transform: rotate(40deg);
    background-size: 47%;
    width: 425px;
    height: 425px;
    left: 32px;
    top: 195px;
    offset-position: 32px 195px;
}

.clock_hourHand{
    background: url("images/UI_Clock_HourHand.png");
    transform: rotate(45deg);
    background-size: 100%, 100%;
}

.clock_minuteHand{
    background: url("images/UI_Clock_MinuteHand.png");
    transform: rotate(180deg);
    background-size: 100%, 100%;
}

let minute = document.getElementById("minute")
let count = 0
let timer = setInterval(function (){
    minute.style.transform = "rotate("+(180+count*6)+"deg)"
    count += 1
    count %= 60
}, 1000)