小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2018-05-13 14:11:03

摘要:抽样检验的小程序 (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

虽然用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.onload=function(){
 var start = document.getElementById("start");
 var stop = document.getElementById("stop");
  
 start.onclick=startFun;//这个函数后面加括号,就直接调用了该函数,所以不要加
 stop.onclick=stopFun;
  
 //绑定键盘事件
 document.onkeyup=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 = ""+mytype[i]+"";
         $("#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>

 

13阅读 | 0评论
你的回应