个人中心
gpt4 book ai didi

javascript - 根据js中的搜索结果计算百分比

转载 作者：行者123 更新时间：2023-11-28 08:02:16 27 4
gpt4 key购买 nike

我正在尝试创建一个函数，该函数会根据搜索结果给我一个匹配百分比，例如，如果搜索与我的数组中的 2/9 字段匹配，那么我将获得该匹配的适当百分比，因此如果它匹配从 9/9 的数组收缩，它将显示 100%。

代码如下:

https://jsfiddle.net/f45gfx2p/2/

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

请考虑到我是 JS 的新手，但我想在我的作业中做得很好，这是我唯一缺少的功能(这不是必需的，但我想学习如何去做) .

最佳答案

一种简单的方法是将搜索的大 if block 分解为每个条件的一个 if。对于每个条件，递增一个指示匹配项数的变量 (matches)。如果 matches > 0 且百分比为 100 * matches/total_number_of_conditions，则契约(Contract)有效。

像这样:

...
var matches = 0;
var total_number_of_conditions = 9;

if (brandCheck == contract[p].brand) matches += 1;
if (model.value == contract[p].model) matches += 1;
if (networkCheck == contract[p].network) matches += 1;
if (minutes >= contract[p].minutes) matches += 1;
if (e.value == contract[p].texts) matches += 1;
if (f.value == contract[p].data) matches += 1;
if (g.value == contract[p].upcost) matches += 1;
if (h.value == contract[p].monthlycost) matches += 1;
if (i.value == contract[p].length) matches += 1;

if (matches > 0) {
    var percentage_matched = 100 * (matches / total_number_of_conditions);
    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 + 
        " " + percentage_matched + "% </br>");
}
...

当然，还有许多其他更可配置和更复杂的解决方案来分离和应用条件，例如“匹配器”对象列表，每个条件一个，等等。

关于javascript - 根据js中的搜索结果计算百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29682277/

27 4 0
文章推荐： javascript - 设置默认 Twitter 小部件的样式问题
文章推荐： Swift Firebase ServerTime.timestamp() 返回负日期。
文章推荐： css - WordPress 中的导航不一致
文章推荐： ios - Swift MKMapView 在 GameScene 中返回 nil
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com