mirror of
https://gitee.com/yanmu_ym/cpp.git
synced 2026-02-03 17:43:15 +08:00
148 lines
6.5 KiB
HTML
148 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="css/index.css" />
|
|
<script src="js/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/monokai.min.css">
|
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
|
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/cpp.min.js"></script>
|
|
|
|
<title>栈内存演示(MinGW)</title>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
类型
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-check form-check-inline" v-for="(value, typeName) in typeSize" :key="typeName">
|
|
<input class="form-check-input" type="radio" name="type" :id="typeName" :value="typeName" v-model="checkedType">
|
|
<label class="form-check-label" :for="typeName">{{typeName}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
声明
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn-success btn btn-sm" @click="handleOpration('var')">变量</button>
|
|
<button class="btn-success btn btn-sm" @click="handleOpration('pointer')">指针</button>
|
|
<button class="btn-success btn btn-sm" @click="handleOpration('struct')">结构体</button>
|
|
<button class="btn-success btn btn-sm" @click="handleOpration('arr')">数组</button>
|
|
<div class="row mt-3">
|
|
<div class="card col-6">
|
|
<div class="card-header font-sm">
|
|
结构体编辑
|
|
</div>
|
|
<div class="card-body">
|
|
<div>
|
|
<table class="table table-bordered font-sm text-center" >
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>名称</th>
|
|
<th> </th>
|
|
</tr>
|
|
<tr v-for="(item, index) in struct.fields">
|
|
<td>{{item.type}}</td>
|
|
<td>{{item.name}}</td>
|
|
<td>
|
|
<button class="btn w-100 h-100 btn-struct m-0 p-0" @click="handleStructDel(index)">-</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="text-center">
|
|
<button class="btn w-100 btn-struct" @click="handleStructAdd">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card col-6">
|
|
<div class="card-header" style="font-size: 18px;">
|
|
数组
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group row">
|
|
<div class="form-check form-check-inline col-4">
|
|
<input class="form-check-input" type="radio" name="dim" id="dim-1" value="1" v-model="arr.dim">
|
|
<label class="form-check-label" for="dim-1">一维</label>
|
|
</div>
|
|
<div class="col-4">
|
|
<input type="number" class="form-control" min="1" v-model="arr.dim1" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row mt-2">
|
|
<div class="form-check form-check-inline col-4">
|
|
<input class="form-check-input" type="radio" name="dim" id="dim-2" value="2" v-model="arr.dim">
|
|
<label class="form-check-label" for="dim-2">二维</label>
|
|
</div>
|
|
<div class="col-6 d-flex">
|
|
<input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.row" />
|
|
<input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.col"/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
运算
|
|
</div>
|
|
<div class="card-body">
|
|
<div>指针当前位置：{{posHexStr}} 移动字节数：{{steps}}</div>
|
|
<div class="input-group mt-3 row">
|
|
<label for="step" class="form-label col-2">步长：</label>
|
|
<div class="col-3">
|
|
<input type="number" min="1" class="form-control" id="step" v-model="step">
|
|
</div>
|
|
<div class="col-7">
|
|
<button class="btn btn-info" @click="handleMove('add')">+</button>
|
|
<button class="btn btn-info" @click="handleMove('minus')">-</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 text-center memory">
|
|
<div class="row" v-for="pt in pointers.list" :key="pt.id">
|
|
<div class="col item">{{pt.id}}</div>
|
|
<div class="col item" :style="{backgroundColor: pt.color}" contenteditable="true"></div>
|
|
<div class="col text-start p-0">
|
|
<img src="img/pointer.png" v-show="pt.id == posHexStr" class="h-100" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 memory code-table">
|
|
<pre>
|
|
<code class="language-cpp" ref="code" contenteditable="true">
|
|
{{code}}
|
|
</code>
|
|
</pre>
|
|
<table class="table table-bordered text-center">
|
|
<tr>
|
|
<th>变量</th>
|
|
<th>&返回地址</th>
|
|
</tr>
|
|
<tr v-for="item in vars.list" :key="item.addr">
|
|
<td>{{item.name}}</td>
|
|
<td>{{item.addr}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |