js_求某范围的特征数

学到后面发现前面的内容都不是很巩固了。

知道自己的不足之后，最近在复习一些学过的知识。

做了一个求某范围的特征数

（题目的大致思想：输入范围，以及特征数，以及出现频率。输出结果）

贴代码：

html:

<div class="content">
         <h2>特征数字</h2>
         
         <div class="info">
             <label for="start" class="tips">开始范围:</label>
             <input type="text" name="start" id="start" class="txt" required>
        </div>
         
         <div class="info">
             <label for="en" class="tips">结束范围:</label>
             <input type="text" name="end" id="end" class="txt" required>
         </div>

         <div class="info">
             <label for="signature" class="tips">特征数字:</label>
             <input type="text" name="signature" id="signature" class="txt" required>
         </div>
 
         <div class="info">
             <label for="times" class="tips">出现频率:</label>
             <input type="text" name="times" id="times" class="txt" required>
         </div>

         <div>
             <input type="button" name="search" id="search" class="search" value="查&nbsp;&nbsp;找">
         </div>
         
         <div class="ans">
             <div class="title">查找结果:</div>
             <div id="result" class="result"></div>
         </div>

     </div>

View Code

css:

    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .content{
            width:800px;
            margin:100px auto;
            border:2px solid pink;
        }
        .content>h2{
            margin-top: 20px;
            text-align: center;
            color: #4682B4;
            margin-bottom: 30px
        }
        .info{
            margin-left: 250px;
            margin-bottom: 20px;
        }
        .tips{
            font-size:18x;
            color: #9F79EE;
            font-weight: bold;
        }
        .txt{
            height:28px;
            width: 200px;
            font-size:16px;
            border-radius: 10px;
            box-shadow: none;
            outline: none;
            background: #F8F8FF;
            color: #8968CD;
            border: 1px solid #F8F8FF;
            text-align: center;
        }
        .search{
            height: 40px;
            width: 140px;
            font-size:20px;
            font-weight: bold;
            margin: 20px 20px 20px 500px;
            border-radius: 10px;
            border:0;
            background: #436EEE;
            color: #fff;
            outline: none; 
            opacity: 0.8;
        }
        .search:hover{
            opacity: 1;
        }
        .ans{
            padding:20px;
            margin:0 30px;
            border-top:2px solid #FFDAB9;
        }
        .ans .title{
            font-size:20px;
            font-weight: bold;
            color: #FF7256;
            margin-bottom: 10px;
        }
        .result{
            color: #FFA54F;
            font-size:18px;
            font-weight: bold;
            margin-bottom: 10px;
            margin-left: 100px;
        }
    </style>

View Code

js:

  1 <script type="text/javascript">
  2          window.onload=function(){
  3 
  4              var start = document.getElementById("start");
  5              var end = document.getElementById("end");
  6              var signature = document.getElementById("signature");
  7              var times = document.getElementById("times");
  8              var search = document.getElementById("search");
  9              var result = document.getElementById("result");
 10 
 11              search.onclick=function(){
 12                  
 13                  result.innerHTML = "";
 14 
 15                  //为空
 16                  if(start.value == "" || end.value == "" || signature.value == "" || times.value==""){
 17                      
 18                      start.style.border="none";
 19                      end.style.border="none";
 20                      signature.style.border="none";
 21                      times.style.border="none";
 22 
 23                      if(start.value == ""){
 24                          start.style.border ="1px solid #FF4500";
 25                         alert("开始范围不能为空!");
 26                      }
 27                      else if(end.value == ""){
 28                          end.style.border ="1px solid #FF4500";
 29                          alert("结束范围不能为空!");
 30                      }
 31                      else if(signature.value == ""){
 32                          signature.style.border ="1px solid #FF4500";
 33                          alert("特征数字不能为空!");
 34                      }
 35                      else if(times.value == ""){
 36                          times.style.border ="1px solid #FF4500";
 37                          alert("出现频率不能为空!");
 38                      }
 39                  }
 40 
 41                  //不是整数
 42                  else if( parseInt(start.value)!=start.value || parseInt(end.value)!=end.value|| parseInt(signature.value)!=signature.value|| parseInt(times.value)!=times.value){
 43 
 44                      start.style.border="none";
 45                      end.style.border="none";
 46                      signature.style.border="none";
 47                      times.style.border="none";
 48 
 49                      if(parseInt(start.value)!=start.value){
 50                          start.style.border ="1px solid #FF4500";
 51                         alert("开始范围只能是整数!");
 52                      }
 53                      else if(parseInt(end.value)!=end.value){
 54                          end.style.border ="1px solid #FF4500";
 55                          alert("结束范围只能是整数!");
 56                      }
 57                      else if(parseInt(signature.value)!=signature.value){
 58                          signature.style.border ="1px solid #FF4500";
 59                          alert("特征数字只能是整数!");
 60                      }
 61                      else if(parseInt(times.value)!=times.value){
 62                          times.style.border ="1px solid #FF4500";
 63                          alert("出现频率只能是整数!");
 64                      }
 65                  }
 66                  //开始的数值比结束的数值大
 67                  else if(start.value>=end.value){
 68                      alert("开始的数值大于等于结束的数值！");
 69                      start.style.border ="1px solid #FF4500";
 70                      end.style.border ="1px solid #FF4500";
 71                  }
 72                  else{
 73 
 74                      start.style.border="none";
 75                      end.style.border="none";
 76                      signature.style.border="none";
 77                      times.style.border="none";
 78 
 79                      var n;
 80                      var arr = new Array();
 81                      
 82                      for(var i=start.value;i<=end.value;i++){
 83                          n = 0;
 84                          //特征数字出现频率
 85                          n = n + (i.toString().split(signature.value).length-1);
 86                          if(n>=times.value){
 87 
 88                              arr.push(i)
 89                          }
 90 
 91                      }
 92                      var len = arr.length
 93                      if(len==0){
 94                          result.innerHTML = "该范围没有特征数值！";
 95                      }
 96                      else{
 97 
 98                          for(var i=0;i<len;i++){
 99 
100                              result.innerHTML+=arr[i];
101                             result.innerHTML+="	";
102                             
103                             if((i+1)%10==0){
104                                 result.innerHTML+='<br>';
105                             }
106                          }
107 
108 
109                      }
110                      
111 
112                  }
113 
114              }
115          
116          }
117      </script>

效果展示：

特征数字

开始范围:

结束范围:

特征数字:

出现频率:

查找结果:

以上内容，如有错误请指出，不甚感激。