-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (212 loc) · 6.14 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*创建button的布局*/
.Mybutton {
float: left;
padding-bottom: 20px;
width: 100%;
}
/* 创建三个相等的列 */
.Mycolumn {
float: left;
padding-right: 20px;
width: 33.33%;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.Mycolumn {
width: 100%;
}
}
</style>
<title>进程管理与调度模拟</title>
<link rel="stylesheet" href="./bulma.min.css">
<script src="./jquery-3.4.1.js"></script>
<script src="./index.js"></script>
</head>
<body>
<section class="section">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
<p class="title is-3">进程管理与调度模拟</p>
<div class="tabs">
<ul>
<li id="zhuye_item"><a>主页</a></li>
<li><a id="shezhi_item">设置</a></li>
</ul>
</div>
<div id="mian_fram">
<div class="Mybutton">
<div id="creat" class="Mycolumn">
<div class="box">
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">进程名称</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text"
placeholder="Small input" id="input_name">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">运行时间</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text"
placeholder="Small input" id="input_shijian">
</p>
</div>
</div>
</div>
<div class="buttons are-small is-centered">
<div class="field is-grouped">
<a class="button is-outlined" id="queding_button">确定</a>
<a class="button is-outlined" id="quxiao_button">取消</a>
</div>
</div>
</div>
</div>
<a id="init_thread" class="button is-success is-outlined">创建进程</a>
</div>
<div>
<div class="Mycolumn">
<div class="box">
<p class="subtitle is-5">运行态</p>
<div class="buttons are-small">
<a id="block_inthread" class="button is-primary is-outlined">阻塞进程</a>
<a id="del_inthread" class="button is-danger is-outlined">停止进程</a>
</div>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th> </th>
<th>PID</th>
<th>名称</th>
<th>时间片</th>
<th>剩余运行时间</th>
</tr>
</thead>
<tbody id="inthread_table">
</tbody>
</table>
</div>
</div>
<div class="Mycolumn">
<div class="box">
<p class="subtitle is-5">就绪态</p>
<div class="buttons are-small">
<a id="del_onthread" class="button is-danger is-outlined">停止进程</a>
</div>
<table id="ready" class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th> </th>
<th>PID</th>
<th>名称</th>
<th>剩余运行时间</th>
</tr>
</thead>
<tbody id="onthread_table">
</tbody>
</table>
</div>
</div>
<div class="Mycolumn">
<div class="box">
<p class="subtitle is-5">阻塞态</p>
<div class="buttons are-small">
<a id="wake_outthread" class="button is-primary is-outlined">激活进程</a>
<a id="del_outthread" class="button is-danger is-outlined">停止进程</a>
</div>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th> </th>
<th>PID</th>
<th>名称</th>
</tr>
</thead>
<tbody id="outthread_table">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="creat_fram" class="Mycolumn">
<div class="box">
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">时钟中断频率</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text" placeholder="Small input"
id="shizhong_zhongduan">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">进程时间片</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text" placeholder="Small input"
id="jincheng_shijianpian">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">进程池容量</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text" placeholder="Small input"
id="jincheng_rongliang">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label">CPU数量</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input is-small is-rounded" type="text" placeholder="Small input"
id="Cpu_shuliang">
</p>
</div>
</div>
</div>
<div class="buttons are-small is-centered">
<div class="field is-grouped">
<a class="button is-outlined" id="summit_but">确定</a>
<a class="button is-outlined">取消</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>