-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (129 loc) · 4.87 KB
/
index.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>bin-ui 展示页面</title>
<link rel="stylesheet" href="css/bin.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>头部展示</h1>
<p>bin-container-header只是一个头部颜色样式</p>
<p>bin-container-100 &bin-container-80 决定头部的宽度，两个样式都有居中</p>
<header class="bin-container-100 bin-container-header">
<p>bin-container-100 bin-container-header信息内容展示</p>
</header>
<header class="bin-container-80 bin-container-header">
<p>bin-container-80 bin-container-header信息内容展示</p>
</header>
</div>
<div>
<h1>按钮展示</h1>
bin-btn 默认无边框样式
<button class="bin-btn ">按钮1</button>
<br>
bin-border-radius 1号边框样式
<button class="bin-border-radius">按钮2</button>
<br>
bin-control 圆角边框样式
<button class="bin-btn bin-control">按钮3</button>
</div>
<div>
<h1>link展示 无样式链接展示</h1>
<a href="" class="bin-tag-link">link 展示</a>
</div>
<div>
<h1>nav展示:横向导航条样式展示</h1>
<ul class="bin-nav">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</div>
<!-- bin-no-footer-fixed -->
<footer class="bin-container-footer">
<h1>底部展示</h1>
<pre>
判断bin-container-footer类只有最后一个生效
底部展示：判断body高度没有到达屏幕底部，
让footer固定到底部，注意此处需要js判断，为了避免意外效果
请在全局加载完毕函数中执行Class Bin()
</pre>
</footer>
<p>
<label for="Province">省级城市：</label><select id="Province"></select>
<label for="City">市级地区：</label><select id="City"></select>
<label for="County">县级地区</label><select id="County"></select>
<label for="Township">乡、镇（街道）：</label><select id="Township"></select>
</p>
<p>
<label for="Province">省级城市：</label><select id="Province"></select>
<label for="City">市级地区：</label><select id="City"></select>
<label for="County">县级地区</label><select id="County"></select>
<label for="Township">乡、镇（街道）：</label><select id="Township"></select>
</p>
<script type="module">
import Bin from "./Bin.js";
onload = function () {
let bin = new Bin();
console.log('rem布局最高标签font-size大小:' + bin.remStyle());
console.log('中国城市级联：' + bin.chinaArea());
console.log('判断支付客户端' + bin.clientPay());
new Promise((resolve, reject) => {
console.log('resolve:'+resolve);
console.log('reject:'+reject);
})
/*City the Level Connection*/
!function(Province,City,County,Township){
/*Province*/
(function () {
Object.keys(bin.chinaArea()).forEach(item=>{
let option = document.createElement('option');
option.setAttribute('value',item);
option.innerText=item;
Province.append(option);
})
})()
/*City*/
~function(){
Object.keys(bin.chinaArea()[Province.value][0]).forEach(item=>{
let option = document.createElement('option');
option.setAttribute('value',item);
option.innerText=item;
City.append(option);
})
}()
/*County*/
~function () {
bin.chinaArea()[Province.value][0][City.value].forEach(item=>{
let option = document.createElement('option');
option.setAttribute('value',Object.keys(item)[0]);
option.innerText=Object.keys(item)[0];
County.append(option);
})
}()
/*Township*/
~function () {
bin.chinaArea()[Province.value][0][City.value].forEach(item=>{
if(Object.keys(item)[0]===County.value){
console.log(item[County.value].split('、'));
item[County.value].split('、').forEach(item=>{
let option = document.createElement('option');
option.setAttribute('value',item);
option.innerText= item.toString();
Township.append(option);
})
}
})
}()
}(document.getElementById('Province'),
document.getElementById('City'),
document.getElementById('County'),
document.getElementById('Township')
)
}
</script>
</body>
</html>