1. 首页
  2. 问答
  3. 创建于JS

创建于JS

2015-04-16 30 views
0

这里匹配/搜索功能是所有代码的jsfiddle链接创建于JS

https://jsfiddle.net/f45gfx2p/

HTML：

<!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>

CSS：

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; 
*/

JS：

/* 
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>"); 
    } 
    } 
}

基本上这个应用程序，如果从阵列中的所有信息只匹配工作，但我想工作，这样，例如，如果它匹配上，例如模型的品牌和网络的选项很少，显示它的结果根据那场比赛如此例如显示所有来自摩托罗拉等手机还我想给匹配％那场比赛那么多好:)怎么会是这样做

来源

2015-04-16 Przemek Wojtas

回答

1

小提琴 - https://jsfiddle.net/f45gfx2p/2/

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 &&

在您的代码上面，您正在使用'and' &&运算符 - 这意味着所有内容都必须匹配 - model.v alue必须匹配，并且networkCheck必须匹配......以此类推。
切换到'or' ||运营商，你可以有各种比赛。 model.value匹配或networkCheck匹配。或者你可以将它们组合起来，但是你认为合适

var percentage = 0; //create a percentage variable 
if(e.value){ //check if user has selected a form element 
    percentage += 1; //if an element is selected add one to percentage 
} 
//if a user selects 4 elements out of 8 then percentage is 50% 
percentage = Math.floor((percentage/8) * 100)); //get percentage as a percentage rather than fraction 
for (var p=0;p<contract.length;p++) { 
     if (brandCheck == contract[p].brand || //<---or instead of and 
      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 ||

在匹配百分比前面 - 查看有多少值，以及这些值有多少匹配。所以，如果g.value == contract[p].upcost返回true这就是8选1匹配等

来源

2015-04-16 16:22:59 Craicerjack

+0

哦，是这么简单我没有注意到的是，显然，这些结果将在框旁边的搜索栏形式，但我要搜索首先正确工作，以及如何根据结果插入一个百分比，让我们说如果我匹配所有我得到100％，但如果我匹配他们的一半，然后给它50％//编辑顺便说一句现在我的单选按钮无法正常工作，只有第一个单选按钮的作品，如果我选择例如O3作为自己的网络，功能不起作用 –

+0

它在我的小提琴中工作。 – Craicerjack

+1

以及这个匹配百分比的前端代码是怎么样的，我只在一个月前开始使用js，但我想确保这个网站真的很好，只是给我一个例子，我会弄清楚:)编辑//是的，它现在正在工作:) –

相关问题

 相关问题