Skip to content

Commit d0ba0ef

Browse files
doubleZ0108doubleZ0108
authored
内存管理_动态分区分配方式
1 parent 5636d58 commit d0ba0ef

File tree

12 files changed

+1677
-0
lines changed

12 files changed

+1677
-0
lines changed

‎内存管理_动态分区分配方式/README.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# 内存管理 - 动态分区分配方式模拟
2+
3+
###### 操作系统第二次课程作业 - 动态分区分配方式模拟
4+
5+
## 目录
6+
7+
- [开发环境](#开发环境)
8+
- [项目结构](#项目结构)
9+
- [操作说明](#操作说明)
10+
- [作者](#作者)
11+
12+
<a name="开发环境"></a>
13+
14+
## 开发环境
15+
16+
- **开发环境:** Windows 10
17+
18+
- **开发软件:**
19+
20+
1. **Visual Studio Code** *1.34.0*
21+
2. **WebStorm** *2019.1.1.WS-191.6707.60*
22+
23+
- **开发语言:** html, javascript, css, jQuery
24+
25+
- **主要引用块内容:**
26+
27+
```html
28+
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
29+
```
30+
31+
32+
33+
<a name="项目结构"></a>
34+
35+
## 项目结构
36+
37+
│ README.md
38+
│ 动态分区分配方式模拟_设计方案报告.md
39+
│ 动态分区分配方式模拟_设计方案报告.pdf
40+
│
41+
├─Resource
42+
│ memory.png
43+
│
44+
└─src
45+
│ Dynamic partition allocation.html
46+
│
47+
└─static
48+
├─css
49+
│ range.css
50+
│ style.css
51+
│
52+
└─js
53+
clear.js
54+
nextAssingment.js
55+
randColor.js
56+
RangeSlider.js
57+
select.js
58+
59+
<a name="操作说明"></a>
60+
61+
## 操作说明
62+
63+
- 双击目录`src`下的`Dynamic partition allocation.html`文件, 并在浏览器中打开,打开后界面如下图所示
64+
65+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-22558ddc5899d061.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
66+
67+
- 选择希望进行模拟的动态分区分配算法*(首次适应算法/最佳适应算法)*
68+
69+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-7d9372a86b1fe872.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
70+
71+
- 调节滑动条改变当前内存大小*(上方模拟链式空间长度会随着滑动条滑动而动态变化)*
72+
73+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-37acbe2ad52f2b02.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
74+
75+
- 点击**下一步**进行作业调度
76+
77+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-e9e2c23eb0309973.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
78+
79+
- 上方的模拟内存会显示每次分配和回收后的空闲分区链的情况*(不同作业的颜色不同, 以区分不同作业在内存中的位置分布情况)*
80+
81+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-0b336d12d32d0cd8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
82+
83+
- 下方的日志信息会显示作业*申请/释放*等信息
84+
85+
![image.png](https://upload-images.jianshu.io/upload_images/12014150-0914b96b65d60558.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
86+
87+
- 点击**清空内存**会清空内存中的作业以及日志信息全部内容, 此时可再次调整内存空间大小, 并再次进行动态分区分配方式模拟
88+
89+
<a name="作者"></a>
90+
91+
#### 作者
92+
93+
​**学号**1754060
94+
95+
​**姓名**张喆
96+
97+
​**指导老师**王冬青老师
98+
99+
​**上课时间**周三/周五 上午一二节
100+
101+
​**联系方式***email:* doubleZ0108@gmail.com

‎内存管理_动态分区分配方式/Resource/memory.png‎

2.6 KB
Loading

‎内存管理_动态分区分配方式/src/Dynamic partition allocation.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Dynamic partition allocation</title>
9+
<link rel="icon" href="../Resource/memory.png" >
10+
11+
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
12+
<link rel="stylesheet" type="text/css" href="static/css/style.css">
13+
<link rel="stylesheet" type="text/css" href="static/css/range.css">
14+
<script src="static/js/RangeSlider.js"></script>
15+
<script src="static/js/randColor.js"></script>
16+
<script src="static/js/nextAssingment.js"></script>
17+
<script src="static/js/clear.js"></script>
18+
</head>
19+
20+
<body>
21+
22+
<!--项目标题-->
23+
<div class="container" style="margin-top: 8%;text-align: center;font-size: 35px;">
24+
<strong>动态分区分配方式模拟</strong>
25+
</div>
26+
27+
<!--模拟内存(可以动态调节大小 & 动态增加作业)-->
28+
<div class="container">
29+
<center>
30+
<div class="memory" id="memory">
31+
32+
</div>
33+
</center>
34+
</div>
35+
36+
<div class="container" style="display: flex; margin-top: 3%;margin-left: 16%;">
37+
<!--下拉框(选择分区算法)-->
38+
<div class="algorithm"">
39+
<div>请选择分区分配算法</div>
40+
<div class=" model-box" style="width:180px; margin-top: 5px;">
41+
<div id="box" class="model-select-text" data-value="首次适应算法">首次适应算法</div>
42+
43+
<ul class="model-select-option">
44+
<li data-option="首次适应算法">首次适应算法</li>
45+
<li data-option="最佳适应算法">最佳适应算法</li>
46+
</ul>
47+
</div>
48+
</div>
49+
50+
<!--滑动条(动态调节内存大小)-->
51+
<div class="memory-size" id="memory-size" style="margin-left: 100px;">
52+
<div style="display: inline-flex;">请选择内存空间大小&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
53+
<div id="current-size">200</div>
54+
K</div>
55+
56+
<div class="range-slider" style="margin-top: 10px;">
57+
<input id="slider" type="range" value="200" min="200" max="1000" step="20">
58+
</div>
59+
</div>
60+
61+
<!--执行下一指令-->
62+
<div class="next-btn" style="margin-left: 100px">
63+
<button style="border-color: rgb(50, 196, 233);background-color: rgb(50, 196, 233);
64+
height: 45px; width: 70px;" onclick="nextAssignment()">
65+
下一步
66+
</button>
67+
</div>
68+
69+
<!--清空内存-->
70+
<div class="clear-btn">
71+
<button style="border-color: rgb(252, 0, 0);background-color: rgb(252, 0, 0);
72+
height: 45px; width: 70px;" onclick="clearbtnClick()">
73+
清空内存
74+
</button>
75+
</div>
76+
</div>
77+
78+
<!--日志信息滚动窗口-->
79+
<div class="container" style="margin-top: 3%;">
80+
<center>
81+
<div>日志信息</div>
82+
<div id="board" style="height: 150px;width: 500px;background-color: #C1BDA3;
83+
overflow:auto; ">
84+
</div>
85+
</center>
86+
</div>
87+
88+
<script>
89+
//滑动条改变触发事件
90+
var change = function ($input) {
91+
console.log($input.value)
92+
//将slider的值进行函数映射
93+
document.getElementById('current-size').innerHTML = $input.value;
94+
document.getElementById('memory').style.width = String($input.value) + "px";
95+
}
96+
97+
$('input').RangeSlider({
98+
min: 200,
99+
max: 1000,
100+
step: 20,
101+
callback: change
102+
});
103+
</script>
104+
105+
</body>
106+
107+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
108+
<script src="static/js/select.js"></script>
109+
110+
</html>

‎内存管理_动态分区分配方式/src/static/css/range.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*去除系统默认的样式*/
2+
input[type=range] {
3+
-webkit-appearance: none;
4+
width: 300px;
5+
border-radius: 10px;
6+
/*这个属性设置使填充进度条时的图形为圆角*/
7+
}
8+
9+
input[type=range]::-webkit-slider-thumb {
10+
-webkit-appearance: none;
11+
}
12+
13+
/*自定义滑动控件的轨道*/
14+
input[type=range]::-webkit-slider-runnable-track {
15+
height: 15px;
16+
border-radius: 10px;
17+
/*将轨道设为圆角的*/
18+
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
19+
/*轨道内置阴影效果*/
20+
}
21+
/*原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。*/
22+
input[type=range]:focus {
23+
outline: none;
24+
}
25+
26+
input[type=range]::-webkit-slider-thumb {
27+
-webkit-appearance: none;
28+
height: 25px;
29+
width: 25px;
30+
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
31+
background: #ffffff;
32+
border-radius: 50%; /*外观设置为圆形*/
33+
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
34+
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
35+
}

‎内存管理_动态分区分配方式/src/static/css/style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/*中部链式内存样式*/
2+
.memory {
3+
margin-top: 5%;
4+
height: 100px;
5+
width: 200px;
6+
border-top: 4px solid black;
7+
border-bottom: 4px solid black;
8+
display: flex;
9+
position: relative;
10+
}
11+
12+
/*内存中的每一个作业*/
13+
.memory-proj {
14+
margin-top: 1px;
15+
background-color: rgb(111, 120, 172);
16+
height: 98px;
17+
width: 100px;
18+
position: absolute;
19+
}
20+
21+
22+
/*下拉框*/
23+
.model-box {
24+
position: relative;
25+
width: 200px;
26+
height: 30px;
27+
line-height: 30px;
28+
background-color: #fff;
29+
border: 1px solid #e4e4e4;
30+
border-radius: 3px;
31+
text-indent: 5px;
32+
}
33+
34+
/*下拉框中待选文字*/
35+
.model-box .model-select-text {
36+
position: relative;
37+
width: 100%;
38+
height: 28px;
39+
color: #666;
40+
text-indent: 10px;
41+
font-size: 14px;
42+
cursor: pointer;
43+
user-select: none;
44+
}
45+
46+
.model-box .model-select-text:after {
47+
position: absolute;
48+
top: 10px;
49+
right: 10px;
50+
content: '';
51+
width: 0;
52+
height: 0;
53+
border-width: 10px 8px 0;
54+
border-style: solid;
55+
border-color: #666 transparent transparent;
56+
}
57+
58+
.model-box .model-select-option {
59+
position: absolute;
60+
top: 30px;
61+
left: -1px;
62+
display: none;
63+
list-style: none;
64+
border: 1px solid #e4e4e4;
65+
border-top: none;
66+
padding: 0;
67+
margin: 0;
68+
width: 100%;
69+
z-index: 99;
70+
background-color: #fff;
71+
}
72+
73+
.model-box .model-select-option li {
74+
height: 28px;
75+
line-height: 28px;
76+
color: #333;
77+
font-size: 14px;
78+
margin: 0;
79+
padding: 0;
80+
cursor: pointer;
81+
}
82+
83+
.model-box .model-select-option li:hover {
84+
background-color: #f3f3f3;
85+
}
86+
87+
.model-box .model-select-option li.seleced {
88+
background-color: #f3f3f3;
89+
}
90+
91+
92+
.disable {
93+
pointer-events: none;
94+
}

‎内存管理_动态分区分配方式/src/static/js/RangeSlider.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
$.fn.RangeSlider = function (cfg) {
2+
this.sliderCfg = {
3+
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
4+
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
5+
step: cfg && Number(cfg.step) ? cfg.step : 1,
6+
callback: cfg && cfg.callback ? cfg.callback : null
7+
};
8+
9+
var $input = $(this);
10+
var min = this.sliderCfg.min;
11+
var max = this.sliderCfg.max;
12+
var step = this.sliderCfg.step;
13+
var callback = this.sliderCfg.callback;
14+
15+
$input.attr('min', min)
16+
.attr('max', max)
17+
.attr('step', step);
18+
19+
$input.bind("input", function (e) {
20+
$input.attr('value', this.value);
21+
$input.css('background', 'linear-gradient(to right, #059CFA, white ' + (this.value - 200) / 8 + '%, white)');
22+
//其中要将this.value进行从[200,1000]到[0,100]的函数映射
23+
24+
if ($.isFunction(callback)) {
25+
callback(this);
26+
}
27+
});
28+
};

‎内存管理_动态分区分配方式/src/static/js/clear.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function clearbtnClick(){
2+
console.log('clear...')
3+
var Mem = document.getElementById('memory');
4+
while(Mem.hasChildNodes()){
5+
Mem.removeChild(Mem.firstChild)
6+
}
7+
8+
var Board = document.getElementById('board');
9+
while(Board.hasChildNodes()){
10+
Board.removeChild(Board.firstChild)
11+
}
12+
13+
now = 0; //重置作业列表(从头开始作业调度)
14+
occupyMem.length = 0; //清空占用列表
15+
useableMem.length = 0; //清空可用列表
16+
$("#memory-size").removeClass("disable") //重置滑动条为可用
17+
}

0 commit comments

Comments
 (0)