<!DOCTYPE html>
<html lang="en">
<head>
<meta 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>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background-image: url("image/jianyue.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.first-container {
padding-left: 400px;
padding-top: 200px;
font-size: large;
}
.first-container input {
margin-bottom: 20px;
border-radius: 5px;
font-size: 30px;
}
.first-container div {
color: white;
font-size: 25px;
border-bottom: 1px solid blue;
}
.first-container button {
font-size: 25px;
border-radius: 5px;
background-color: green;
cursor: pointer;
}
.second-container {
padding-left: 400px;
padding-top: 200px;
font-size: large;
}
.second-container input {
margin-bottom: 20px;
border-radius: 5px;
font-size: 30px;
}
.second-container div {
color: white;
font-size: 25px;
border-bottom: 1px solid blue;
}
.second-container button {
font-size: 25px;
border-radius: 5px;
background-color: green;
cursor: pointer;
}
.second-container #ccc {
padding-left: 20px;
}
table {
border-collapse: collapse;
margin: 100px auto;
}
th,
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="first-container">
<input id="firstnum3" type="text" placeholder="请在这里输入背包容积">
<input id="firstnum1" type="text" placeholder="请在这里输入values">
<input id="firstnum2" type="text" placeholder="请在这里输入weights">
<button onclick="firstclick()">确定</button>
<div>排序后价值:<span id="res4"></span></div>
<div>排序后重量:<span id="res5"></span></div>
<div>装入价值:<span id="res1"></span></div>
<div>装入重量:<span id="res2"></span></div>
<div>装入总价值:<span id="res3"></span></div>
</div>
<div class="second-container">
<input id="secondnum1" type="text" placeholder="请在这里输入活动个数">
<input id="secondnum2" type="text" placeholder="请在这里输入活动开始时间">
<input id="secondnum3" type="text" placeholder="请在这里输入活动结束时间">
<button onclick="secondclick()">确定</button>
<div>排序后活动:<div id="res6"></div>
</div>
<div>选取活动个数:<span id="res7"></span></div>
<div>选取活动情况:<div id="res8"></div>
</div>
</div>
</div>
<script>
var finalValue = [];
var finalWeight = [];
var sortedValue = [];
var sortedWeight = [];
function greedy(values, weights, capacity) {
var returnValue = 0;
var remainCapacity = capacity;
var sortArray = [];
values.map((cur, index) => {
sortArray.push({
'value': values[index],
'weight': weights[index],
'ratio': values[index] / weights[index]
})
})
sortArray.sort(function (a, b) {
return b.ratio - a.ratio;
})
sortArray.forEach((res) => {
sortedValue.push(res.value);
sortedWeight.push(res.weight)
})
sortArray.map((cur, index) => {
if (remainCapacity == 0) return returnValue;
if (remainCapacity >= cur.weight) {
remainCapacity -= cur.weight;
returnValue += cur.value;
finalValue.push(cur.value);
finalWeight.push(cur.weight);
}
else {
returnValue += cur.ratio * remainCapacity;
finalValue.push(cur.ratio * remainCapacity);
finalWeight.push(remainCapacity);
remainCapacity = 0;
}
})
return returnValue
}
// var values = 50 220 60 60
// var weights = 5 20 12 10
// var capacity = 32 //背包容积
//11
//6 8 8 2 12 5 3 5 0 3 1
//10 11 12 13 14 9 5 7 6 8 4
function firstclick() {
var res1 = document.getElementById('res1');
var res2 = document.getElementById('res2');
var res3 = document.getElementById('res3');
var res4 = document.getElementById('res4');
var res5 = document.getElementById('res5');
var num1 = document.getElementById('firstnum1');
var num2 = document.getElementById('firstnum2');
var num3 = document.getElementById('firstnum3');
num1 = num1.value;
num1 = num1.split(" ");
num2 = num2.value;
num2 = num2.split(" ");
num3 = parseInt(num3.value);
var nums1 = [];
var nums2 = [];
for (let i = 0; i < num1.length; i++) {
nums1.push(parseInt(num1[i]));
nums2.push(parseInt(num2[i]));
}
var result1 = greedy(nums1, nums2, num3)
res1.innerText = finalValue;
res2.innerText = finalWeight;
res3.innerText = result1;
res4.innerText = sortedValue;
res5.innerText = sortedWeight;
}
function sort(s, f) {
f.forEach((res1, index1) => {
f.forEach((res2, index2) => {
if (res1 < res2) {
[f[index1], f[index2]] = [f[index2], f[index1]];
[s[index1], s[index2]] = [s[index2], s[index1]];
}
})
})
}
var A = [];
function activityArrange(n, s, f) {
var k = 0;
A[k] = 0;
var j = 0, count = 1;
for (let i = 1; i < n; i++) {
if (s[i] >= f[j]) {
A[++k] = i;
j = i;
count++;
}
}
return count;
}
function secondclick() {
var res6 = document.getElementById('res6');
var res7 = document.getElementById('res7');
var res8 = document.getElementById('res8');
var num1 = document.getElementById('secondnum1');
var num2 = document.getElementById('secondnum2');
var num3 = document.getElementById('secondnum3');
var table1 = document.createElement('table');
var table2 = document.createElement('table');
res6.appendChild(table1);
res8.appendChild(table2);
num1 = parseInt(num1.value);
num2 = num2.value;
num2 = num2.split(" ");
num3 = num3.value;
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript-HTML-css实现算法可视化
共9个文件
jpeg:5个
html:4个
需积分: 5 2 下载量 10 浏览量
2022-04-28
15:03:42
上传
评论 1
收藏 302KB ZIP 举报
温馨提示
分治法,动态规划法,贪心法,回溯法 用js可视化页面实现一些经典算法 一、分治法 1.用分治算法求解最大子段和问题。要求算法的时间复杂度不超过O(nlogn)。 2.给定含有n个元素的多重集合S,用分治法设计并实现在多重集合中找众数及其重数的算法。要求算法的时间复杂性在最坏情况下不超过O(nlogn)。 在多重集合中找众数及其重数问题描述:每个元素在S中出现的次数称为该元素的重数。多重集合S中重数最大的元素称为众数。 例如多重集合S={1,2,2,7,2,7,5},其中众数是2,其重数为3 二、动态规划法 1.采用动态规划策略设计并实现算法,求解最大子段和问题。要求算法的时间复杂性不超过O(n)。 2. 采用动态规划策略设计并实现算法,求解最长公共子序列问题。要求时间复杂性不超过O(m*n)。 三、贪心法 1.用贪心策略设计与实现一个贪心算法,求解背包问题。 2. 假设活动已经按照结束时间递增的次序排序。用贪心策略设计与实现一个贪心算法,求解活动安排问题。 四、回溯法 1.用回溯法求解n后问题。n后问题描述:要求在一个n*n格的棋盘上放置n个皇后 2.用回溯法求解求解子集合和问题。
资源详情
资源评论
资源推荐
收起资源包目录
algorithm.zip (9个子文件)
algorithm
3.html 10KB
image
yuzhou2.jpeg 92KB
jianyue.jpeg 145KB
dianzan.jpeg 34KB
yuzhou1.jpeg 10KB
hui.jpeg 24KB
2.html 6KB
4.html 8KB
1.html 5KB
共 9 条
- 1
Orekrigo
- 粉丝: 1
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0