Javascript 根据js中的搜索结果计算百分比
我正在尝试创建一个函数，该函数将根据搜索结果为我提供一个匹配百分比，例如，如果搜索与我的数组中的2/9字段相匹配，那么我将获得该匹配的适当百分比，因此如果它与9/9数组中的合同相匹配，它将显示100% 代码如下： HTML: JS:Javascript 根据js中的搜索结果计算百分比,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个函数，该函数将根据搜索结果为我提供一个匹配百分比，例如，如果搜索与我的数组中的2/9字段相匹配，那么我将获得该匹配的适当百分比，因此如果它与9/9数组中的合同相匹配，它将显示100% 代码如下： HTML: JS: /* var品牌=[“摩托罗拉”、“诺基亚”、“苹果”、“苹果”、“三星”、“三星”、“LG”、“诺基亚”、“LG”、“索尼”、“索尼”]； var模型=[“StarTAC”、“3310”、“iPhone 5C”、“iPhone 5C”、“Galaxy S5”、“
/*
var品牌=[“摩托罗拉”、“诺基亚”、“苹果”、“苹果”、“三星”、“三星”、“LG”、“诺基亚”、“LG”、“索尼”、“索尼”]；
var模型=[“StarTAC”、“3310”、“iPhone 5C”、“iPhone 5C”、“Galaxy S5”、“Galaxy S5”、“G3”、“Lumia 925”、“Optimus L7 2”、“Xperia Z3”、“Xperia Z3”]；
var网络=[“Z-Mobile”、“O3”、“Fodavone”、“NN”、“O3”、“Fodavone”、“NN”、“Fodavone”、“NN”、“O3”、“NN”]；
var分钟数=[“300”、“100”、“300”、“1000”、“500”、“600”、“1000”、“600”、“250”、“无限”、“无限”]；
var文本=[“3500”、“5000”、“无限”、“无限”、“无限”、“无限”、“无限”、“5000”、“无限”、“无限”、“无限”]；
var数据=[“不适用”、“不适用”、“250MB”、“2GB”、“500MB”、“1GB”、“500MB”、“500MB”、“500MB”、“1GB”、“10GB”]；
var ucost=[“0”、“0”、“0”、“49”、“0”、“0”、“0”、“0”、“0”、“79”、“0”]；
var mcost=[“5”、“2”、“22”、“34”、“24”、“27”、“31”、“27”、“12”、“38”、“44”]；
变量长度=[“24”、“24”、“24”、“18”、“24”、“24”、“24”、“24”、“18”、“24”、“24”、“24”、“24”、“24”]；
*/
功能电话合同（品牌、型号、网络、分钟、文本、数据、升级成本、月成本、长度）{
这个品牌=品牌；
this.model=模型；
这个网络=网络；
这个。分钟=分钟；
这个文本=文本；
这个数据=数据；
this.upcost=upcost；
this.monthlycost=monthlycost；
这个长度=长度；
}
var合约=[]；
合同推送（新电话合同（“摩托罗拉”、“StarTAC”、“Z-Mobile”、“300”、“3500”、“不适用”、“0”、“5”、“24”））；
合同推送（新电话合同（“诺基亚”、“3310”、“O3”、“100”、“5000”、“不适用”、“0”、“2”、“24”））；
合同推送（新的电话合同（“苹果”、“iPhone5C”、“福达丰”、“300”、“无限”、“250MB”、“0”、“22”、“24”））；
合同推送（新电话合同（“苹果”、“iPhone5C”、“NN”、“1000”、“无限”、“2GB”、“49”、“34”、“18”））；
合同推送（新电话合同（“三星”、“银河S5”、“O3”、“500”、“无限”、“500MB”、“0”、“24”、“24”））；
合同推送（新的电话合同（“三星”、“Galaxy S5”、“Fodavone”、“600”、“无限”、“1GB”、“0”、“27”、“24”））；
合同推送（新电话合同（“LG”、“G3”、“NN”、“1000”、“无限”、“1GB”、“0”、“31”、“24”））；
合同推送（新电话合同（“诺基亚”、“Lumia 925”、“Fodavone”、“600”、“无限”、“500MB”、“0”、“27”、“18”））；
合同推送（新电话合同（“LG”、“Optimus L7 2”、“NN”、“250”、“5000”、“500MB”、“0”、“12”、“24”））；
合同推送（新电话合同（“索尼”、“Xperia Z3”、“O3”、“无限”、“无限”、“1GB”、“79”、“38”、“24”））；
合同推送（新电话合同（“索尼”、“Xperia Z3”、“NN”、“无限”、“无限”、“10GB”、“0”、“44”、“24”））；
功能检查品牌（）{
var电话
var-brandCheck；
phone=document.getElementsByClassName（“phone”）；
对于（变量i=0；i=合同[p].分钟| e.value==合同[p].文本| f.value==合同[p].数据| g.value==合同[p].升级成本| h.value==合同[p].月成本| i.value==合同[p].长度）{
document.write（合同[p]。品牌+“”+合同[p]。模型+“”+合同[p]。网络+“”+合同[p]。分钟+“”+合同[p]。文本+“”+合同[p]。数据+“”+合同[p]。升级成本+“”+合同[p]。月成本+“”+合同[p]。长度+“”+“”“”；
}
}
}
请考虑我在JS上是新手，但我想在我的作业中做得很好，这是我唯一缺少的特点（它不是必需的，但我想学习如何做）。对于每个条件，递增一个变量，该变量指示匹配的数量（
匹配匹配100*匹配/条件总数。。。
var匹配=0；
风险值总风险值条件下的风险值=9；
如果（brandCheck==合同[p].品牌）匹配+=1；
如果（model.value==contract[p].model）匹配+=1；
如果（networkCheck==contract[p].network）匹配+=1；
如果（分钟>=合同[p].minutes）匹配+=1；
如果（e.value==contract[p].text）匹配+=1；
如果（f.value==contract[p].data）匹配+=1；
如果（g.valu
<!DOCTYPE html>
<!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB">
<!-- This tells the browser what language html is using-->
<head>
<!-- standard html tag -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
</script>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<title>Any Phone4You</title>
</head>
<body>
<header class="header">
<h1>Any Phone4You</h1>
</header>
<div class="main"></div>
<div class="search">
<form>
<fieldset>
<legend>Select phone brand</legend>
<label for="sony">Sony</label>
<input type="radio" name="brand" class="phone" value="Sony">
<label for="motorola">Motorola</label>
<input type="radio" name="brand" class="phone" value="Motorola">
<label for="samsung">Samsung</label>
<input type="radio" name="brand" class="phone" value="Samsung">
<label for="apple">Apple</label>
<input type="radio" name="brand" class="phone" value="Apple">
<label for="lg">LG</label>
<input type="radio" name="brand" class="phone" value="LG">
</fieldset>
<label for="phone_model">Model</label>
<input type="text" id="phone_model" />
<fieldset>
<legend>Select a network</legend>
<label for="zmobile">Z-Mobile</label>
<input type="radio" name="net" class="network" value="Z-Mobile">
<label for="o3">O3</label>
<input type="radio" name="net" class="network" value="O3">
<label for="fodavone">Fodavone</label>
<input type="radio" name="net" class="network" value="Fodavone">
<label for="nn">NN</label>
<input type="radio" name="net" class="network" value="NN">
</fieldset>
<input type="range" name="rating" min="0" max="1000" value="0" step="50" id="range.slider" /> <span id="range">0</span>
<br />
<br />
<label for="text_m">Text</label>
<input type="text" id="text_m" />
<label for="internet">Data</label>
<input type="text" id="internet" />
<label for="upcost">Upfront Cost</label>
<input type="number" id="upcost" />
<label for="month_cost">Monthly Cost</label>
<input type="number" id="month_cost" />
<label for="contract_length">Contract Length</label>
<input type="number" id="contract_length" />
<input type="button" value="click me" id="login">
</form>
</div>
<footer>@Copyright Reserved by Przemyslaw Wojtas @2015-2016 !Do not copy!</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.margin {
margin-left: auto;
margin-right: auto;
}
.textalign {
text-align: left;
}
.textalign2 {
text-align: center;
}
.header {
top: 2%;
height: 20%;
width: 100%;
background-color: rgb(39, 133, 203);
color: white;
font-size: 36px;
font-family:'Yanone Kaffeesatz', sans-serif;
display: inline-block;
}
h1 {
left: 5%;
padding-top: 1%;
padding-left: 1%;
margin: 0;
}
.main {
float: right;
width: 80%;
height: 1000px;
background-color: rgb(98, 204, 255);
}
.search {
float: left;
width: 20%;
height: 1000px;
background-color: rgb(39, 133, 203);
opacity: 0.9;
}
footer {
clear: both;
bottom: 0px;
width: 100%;
font-family:'Yanone Kaffeesatz', sans-serif;
}
fieldset {
display: block;
}
form {
font-size: 16px;
width:100%;
border: 1px solid;
box-shadow: 10px 10px 5px #000000;
background-color:rgba(255, 255, 255, 0.4);
}
/* this will style my form */
input, select, textarea {
display: block;
margin:2%;
}
/* this style all input, select and textarea tags */
input {
border:2px solid #CCC;
width: 70%;
margin-top: 2%;
}
/* further styling to input tag */
textarea {
width:50%;
border:3px solid #CCC;
}
/* further styling to textarea tag */
/*
overflow-y: scroll;
height: 200px;
*/
/*
var brand=["Motorola","Nokia","Apple","Apple","Samsung","Samsung","LG","Nokia","LG","Sony","Sony"];
var model=["StarTAC","3310","iPhone 5C","iPhone 5C","Galaxy S5","Galaxy S5","G3","Lumia 925","Optimus L7 2","Xperia Z3","Xperia Z3"];
var network=["Z-Mobile","O3","Fodavone","NN","O3","Fodavone","NN","Fodavone","NN","O3","NN"];
var minutes=["300","100","300","1000","500","600","1000","600","250","Unlimited","Unlimited"];
var texts=["3500","5000","Unlimited","Unlimited","Unlimited","Unlimited","Unlimited","Unlimited","5000","Unlimited","Unlimited"];
var data=["N/A","N/A","250MB","2GB","500MB","1GB","1GB","500MB","500MB","1GB","10GB"];
var ucost=["0","0","0","49","0","0","0","0","0","79","0"];
var mcost=["5","2","22","34","24","27","31","27","12","38","44"];
var length=["24","24","24","18","24","24","24","18","24","24","24"];
*/
function phoneContract(brand, model, network, minutes, texts, data, upcost, monthlycost, length) {
this.brand = brand;
this.model = model;
this.network = network;
this.minutes = minutes;
this.texts = texts;
this.data = data;
this.upcost = upcost;
this.monthlycost = monthlycost;
this.length = length;
}
var contract = [];
contract.push(new phoneContract("Motorola", "StarTAC", "Z-Mobile", "300", "3500", "N/A", "0", "5", "24"));
contract.push(new phoneContract("Nokia", "3310", "O3", "100", "5000", "N/A", "0", "2", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "Fodavone", "300", "Unlimited", "250MB", "0", "22", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "NN", "1000", "Unlimited", "2GB", "49", "34", "18"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "O3", "500", "Unlimited", "500MB", "0", "24", "24"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "Fodavone", "600", "Unlimited", "1GB", "0", "27", "24"));
contract.push(new phoneContract("LG", "G3", "NN", "1000", "Unlimited", "1GB", "0", "31", "24"));
contract.push(new phoneContract("Nokia", "Lumia 925", "Fodavone", "600", "Unlimited", "500MB", "0", "27", "18"));
contract.push(new phoneContract("LG", "Optimus L7 2", "NN", "250", "5000", "500MB", "0", "12", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "O3", "Unlimited", "Unlimited", "1GB", "79", "38", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "NN", "Unlimited", "Unlimited", "10GB", "0", "44", "24"));
function checkBrand() {
var phone
var brandCheck;
phone = document.getElementsByClassName("phone");
for (var i = 0; i < phone.length; i++) {
console.log(phone[i].checked)
if (phone[i].checked == true) {
brandCheck = phone[i].value;
}
}
return brandCheck;
}
function checkNetwork() {
var network
var networkCheck
network = document.getElementsByClassName("network");
for (var i = 0; i < network.length; i++) {
console.log(network[i].checked)
if (network[i].checked == true) {
networkCheck = network[i].value;
}
}
return networkCheck;
}
var button = document.getElementById("login");
button.addEventListener("click", search, false);
var minutes
function slidefunction() {
minutes = parseInt(slider.value)
document.getElementById("range").innerHTML = minutes + " Minutes";
console.log(minutes);
}
var slider = document.getElementById("range.slider");
slider.addEventListener("change", slidefunction, false);
function search() {
var brandCheck = checkBrand();
var networkCheck = checkNetwork();
var model
model = document.getElementById("phone_model"); //???
var e
e = document.getElementById("text_m"); //checkbox
var f
f = document.getElementById("internet"); //checkbox
var g
g = document.getElementById("upcost"); //auto
var h
h = document.getElementById("month_cost"); //auto ask
var i
i = document.getElementById("contract_length"); //dropdown
for (var p = 0; p < contract.length; p++) {
if (brandCheck == contract[p].brand || model.value == contract[p].model || networkCheck == contract[p].network || minutes >= contract[p].minutes || e.value == contract[p].texts || f.value == contract[p].data || g.value == contract[p].upcost || h.value == contract[p].monthlycost || i.value == contract[p].length) {
document.write(contract[p].brand + " " + contract[p].model + " " + contract[p].network + " " + contract[p].minutes + " " + contract[p].texts + " " + contract[p].data + " " + contract[p].upcost + " " + contract[p].monthlycost + " " + contract[p].length + " " + "</br>");
}
}
}