虽然用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 = "<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>
