抽样检验的小程序

若♡

于 2022-11-28 16:14:44 发布

阅读量329

点赞数

文章标签：小程序 css html

本文链接：https://blog.csdn.net/weixin_67271870/article/details/127464541

版权

虽然用js很不专业，但是写起来快呀，哈哈，好久没写js都快忘完了。（本来想用java直接连接数据库，结果人家非要手动输入~反而简单了~口头需求，看excel和数据库看烦了，换换心情~~~）

需求：输入零件编号，点击《开始》滚动之前输入的零件编号，点击《停止》显示需要检验的零件编号。

贴波代码~大神勿喷~

<html lang="en">
<head>
  <meta charset="gb2312">
  <title>抽奖样检验</title>
  <script src="js/jquery.min.js"></script> 
  <style>
*{
 margin:0;padding:0;
}
#title1{
 color:red;padding-top:10px;margin-top: 15px;
}
#title{
 color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0);
}
#content{
 margin:0 auto;width:240px;height:35px;background:opacity(0);margin-top: 15px;
        vertical-align:middle;
        line-height:35px; 
        flex:1;
        border-color: beige;
}
#showList{
 display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;
}
.list{
    margin: 12px;
    display: block;
    width: 140px;
    height: 40px;
    text-align: center;
    background: #036;
    color: #fff;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: "微软雅黑";
    font-size: 28px;
    line-height: 40px;
}
#scannerIn{
 display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.btns{
 width:190px;height:30px;margin:0px auto;
}
.btns1{
 width:190px;height:30px;margin:0px auto;margin-top: 15px;
}
.btns1 span{
 display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微软雅黑";font-size:14px;line-height:28px;margin-left:45px;
}  
.btns span{
 display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微软雅黑";font-size:14px;line-height:28px;margin-right:10px;
}
#txt{
 font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px;
}
  </style>
  <script>
 var mytype=[],
   timer=null,
   count=0;
//加载时触发
 window.οnlοad=function(){
 var start = document.getElementById("start");
 var stop = document.getElementById("stop");
  
 start.οnclick=startFun;//这个函数后面加括号，就直接调用了该函数，所以不要加
 stop.οnclick=stopFun;
  
 //绑定键盘事件
 document.οnkeyup=function(e){
   e = e || window.event;
  if(e.keyCode==13){
    if(count==0){
    startFun();
    count=1;
    }
  else{  
    stopFun();
    count=0;
    }
  }
 }
 }
  
//点击开始，标题栏开始轮动
 function startFun(){
  clearInterval(timer);//开始时，清除计时器，避免二次触发
  var title = document.getElementById("title");
  var start = document.getElementById("start");
  
  timer = setInterval(function(){
    var num= Math.floor(Math.random()*mytype.length);
    title.innerHTML=mytype[num];
  },50);
  start.style.background="#ccc";
  
 }
 //点击停止，标题栏停止轮动并输出轮动结果
 function stopFun(){
  var start = document.getElementById("start"),
    txt = document.getElementById("txt"),
    title = document.getElementById("title");
  clearInterval(timer);//清除计时器，停止计时器
  start.style.background="#036";
 }
 //分割字符串
 function getContent(){
     //先清空原来的数据
     mytype = [];
     var content = document.getElementById("content").value;
     var str = content.replace(/，/g,',');
     var strs = new Array();
     strs=str.split(",");
     for (i=0;i<strs.length ;i++ )
     {
        // alert(strs[i]);
     mytype.push(strs[i]);
     } 
     render(mytype);
 }
 //画展示框
 function render(mytype){
     var oldDom =  document.getElementById("showList");
     //先清空原来的
     while(oldDom.hasChildNodes()) //oldDom下还存在子节点时 循环继续  
     {  
         oldDom.removeChild(oldDom.firstChild);  
     }
     //拼接html
     for (i=0;i<mytype.length ;i++ )
     {
         var html = "<span class= 'list'>"+mytype[i]+"</span>";
         $("#showList").append(html);
     } 
     
 }
 
  
  </script>
<body>
     <div id = "scannerIn">
         <h2 id="title1">请输入零件编号</h2>
         <input id="content" type="text">
         <div class="btns1">
             <span id="confrim"  onclick = "getContent()">确认输入</span>
         </div>
     </div>
 
     <div id = "showList">
     </div>
     
      <div>
         <h2 id="title">开始抽样！</h2>
      </div>
      
     <div class="btns">
         <span id="start">开始</span>
         <span id="stop">停止</span>
      </div>
      
     <div id="txt">可回车键(Enter)开始/停止。</div>
</body>
</html>