-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponents.html
160 lines (123 loc) · 7.47 KB
/
components.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小组件</title>
<link rel="icon" href="./assets/favicon.ico">
<script>
console.log("Hello,world!");
</script>
<style>
@import url(./css/main.css);
</style>
</head>
<body style="display: flex;margin: 0;flex-direction: column;align-items: center; font-family: 微软雅黑;">
<!--首页-->
<firstpage id="bar_top_link_1" style="width: 100%;color: white;letter-spacing: 1px;line-height: 1.8;display: flex;flex-direction: column;align-items: flex-start;">
<!--顶部导航栏-->
<bar_top style="display: flex;width: 100%;height: 45px;background-color: #1c1c1c;justify-content: space-between;position: fixed;z-index: 1;">
<bar_top_links style="display: flex; margin-left: 10px;align-items: center;">
<a href="./index.html" class="bar_top_links"><b>首页</b></a>
<a href="./components.html" class="bar_top_links"><b>小组件</b></a>
<a href="javascript:alert('清除失败！请坐和放宽~')" class="bar_top_links"><b>清除缓存</b></a>
</bar_top_links>
<bar_top_img style="display:flex; align-items:center;margin-right: 10px;">
<img src="https://pic1.afdiancdn.com/user/682959ec152611eb802752540025c377/avatar/c8960e10408c9479b83ebf7c3c58db04_w1077_h1078_s317.jpg?imageView2/1/w/240/h/240" alt="头像" width="35px" height="35px" style="border-radius:100px;">
</bar_top_img>
</bar_top>
</firstpage>
<!--页面主体部分-->
<main style="display: flex;flex-direction: column;align-items: center;width: 100%; padding-top: 45px;">
<page2 id="bar_top_link_2" style="display: flex;flex-direction: column;width: 100%;">
<div style="margin:0;padding-left:40px;background-color: #f7f8f9;">
<p class="common_title" style="font-size: 36px;margin-bottom: 0;">这里有一些小组件（更多功能加入中）</p>
</div>
<features_main style="display:flex; flex-direction:row;width: 100%;background-color: #f7f8f9;margin: 0; align-items: center;flex-wrap: wrap;">
<!--梗图（板块#3）-->
<xiaomi class="block_box">
<xiaomi_title>
<p class="block_title">Are you OK!<br>学会CSS，立省200w！[doge]</p>
</xiaomi_title>
<xiaomi_text>
<p class="block_text">
↓ 这张梗图我很早就看过，现在居然刚好学到了 ↓
<br>
<del>现学现卖</del> 活学活用
</p>
</xiaomi_text>
<xiaomi_img>
<img src="http://pic.rmb.bdstatic.com/bjh/news/0eac74e7e77fb5b8034bb98c8ef93e53.gif" alt="梗图" width="90%" >
</xiaomi_img>
</xiaomi>
<!--JS测试（板块#4）-->
<js_test class="block_box">
<js_test_title>
<p style="border:0;" class="block_title">点我翻倍</p>
</js_test_title>
<js_test_text>
<!--点赞按钮-->
<button class="button_blue" id="dzs" onclick="dianZan()" style="width:100%;">1</button>
<script>
//点赞函数
function dianZan(){
let dianZanShuBiaoQian = window.document.getElementById('dzs');//获取按钮内点赞数（字符）并存入dianZanShuBiaoQian
let dianZanShu = parseInt(dianZanShuBiaoQian.innerText);//将dianZanShuBiaoQian内的字符转为数字（数字和字符不能相加）并存入dianZanShu
let xinShuZi = dianZanShu * 2;//运算部分
dianZanShuBiaoQian.innerText = xinShuZi;//将算完的数字输出至按钮内
return//返回函数
}
</script>
</js_test_text>
</js_test>
<!--JS测试（板块#5）-->
<js_test class="block_box">
<js_test_title>
<p style="border:0;" class="block_title">两点间距离计算</p>
</js_test_title>
<js_test_text style="display: flex;flex-direction: column;">
<!--输入框-->
<row1 style="margin-bottom:20px">
<input id="x1_input" class="input" placeholder="第一个点x坐标">
<input id="x2_input" class="input" placeholder="第一个点y坐标">
</row1>
<row2 style="margin-bottom:25px">
<input id="y1_input" class="input" placeholder="第二个点x坐标">
<input id="y2_input" class="input" placeholder="第二个点y坐标">
</row2>
<!--计算按钮-->
<button class="button_blue" id="dzs" onclick="distanceCalculate()" style="width:100%;">计算</button>
<p style="font-size:18px;margin-bottom:5px">计算结果</p>
<button class="button_grey" id="result_output"></button>
<script>
//两点间距离计算函数
function distanceCalculate(){
let x1_input = window.document.getElementById('x1_input').value;
let x1 = parseFloat(x1_input);
let x2_input = window.document.getElementById('x2_input').value;
let x2 = parseFloat(x2_input);
let y1_input = window.document.getElementById('y1_input').value;
let y1 = parseFloat(y1_input);
let y2_input = window.document.getElementById('y2_input').value;
let y2 = parseFloat(y2_input);
let left = x1 - x2;
let right = y1 - y2;
let left_2 = Math.pow(left,2);
let right_2 = Math.pow(right,2);
let result = left_2 + right_2;
let result_2 = Math.sqrt(result);
result_output.innerText = result_2;
}
</script>
</js_test_text>
</js_test>
</page2>
<!--页脚-->
<bar_bottom style="height: 100px;display: flex;align-items: center; background-color: #f7f8f9;width: 100%;justify-content: center;">
<p>2022 bilibili@弗头嘿嘿嘿</p>
</bar_bottom>
</main>
</page2>
</body>
</html>