时间戳

首页 > 解决方案 > 使用 JS PHP 计算单击按钮时值的百分比

javascript - 使用 JS PHP 计算单击按钮时值的百分比

问题描述

我正在处理一个表格，其中显示用户可以使用 30 天、60 天、90 天选项质押的代币选项。数据库中指定了 30 天的默认百分比，但我想要这样一种情况，即当用户单击 60 天时，显示的百分比增加 30%，当他们单击 90 天时，显示百分比增加 60%。我是开发新手，不知道要使用的 Javascript 或 Jquery。我的桌子在下面。提前致谢！

编辑：我正在使用无线电输入，我希望无线电的值用于计算数据库中指定的默认百分比。

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  border: 1px solid #ffc107;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2rem;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #ffc107;
}

.headernew {
 text-align: center;
 
    }
    
 .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}
h2 small {
  font-size: 0.5em;
}

.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.responsive-table .table-header {
  background-color: #95A5A6;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.responsive-table .table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}
.responsive-table .col-1 {
  flex-basis: 10%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-left: -40px;
  margin-right: 32px;
  
}
.responsive-table .col-2 {
  flex-basis: 40%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-right: 30px;
}
.responsive-table .col-3 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
.responsive-table .col-4 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
@media all and (max-width: 356px) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
}
<head><link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css"></head>

<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <div class="col col-2" data-label="Percent"><font color="green">
15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all">
  <label for="radio1">30</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">60</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2" data-label="Percent"><font color="green">
10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios" value="all">
  <label for="radio7">30</label>

  <input type="radio" id="radio72" name="radios" value="false">
  <label for="radio72">60</label>
</div></div>
   
    </li>
    
  </ul>

标签： javascriptjquery

解决方案

根据您的描述，您想要这样的东西。

(function(){
    const def_val = //your database value
    $('60_days_btn_id').click(function(){
      dis_val = def_val
      dis_val = def_val + (def_val*0.3); // when clicking on 60 days
    }}
    $('90_days_btn_id').click(function(){
      dis_val = def_val
      dis_val = def_val + (def_val*0.6); // when clicking on 90 days
    }};
});

变量 dis_val 具有预期值

推荐阅读