代码如下：

  1. <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <head>
       <meta charset="UTF-8">
       <title>大批量生成数组数据</title>
       <style>
          body{background-color: #4c718a}
          .BB{
             width: 400px;
             height: 300px;
             position: absolute;
             left:400px ;
             top: 1px;
             margin-left: 50px;
             /*margin-top: -150px;*/
             /**/
          }
          .EE{
             width: 400px;
             height: 300px;
             position: absolute;
             left:250px ;
             top: 360px;
             margin-left: 50px;
             /*margin-top: -150px;*/
             /**/
          }
          .FF{
              width: 400px;
              height: 300px;
              position: absolute;
              left:550px ;
              top: 360px;
              margin-left: 50px;
              /*margin-top: -150px;*/
              /**/
           }
          .GG{
             width: 400px;
             height: 300px;
             position: absolute;
             left:850px;
             top: 310px;
             margin-left: 50px;
             /*margin-top: -150px;*/
             /**/
          }
       </style>
  2.  
  3.    <script type="text/javascript">
            function newArray(){
                var patrn = /^[0-9]*$/;
                var qz = "COO";//前缀
                var numStart=document.getElementById("textst").value;  //数量起
                var numEnd=document.getElementById("textEnd").value;  //数量止
                var numberCopies=document.getElementById("numberCopies").value; //份数
                if(!patrn.test(numStart) && !patrn.test(numEnd) && !patrn.test(numberCopies)){
                    alert("请输入合法的数字！！！");
                    return;
                }
                var dataNum = numEnd - numStart + 1;
                if(dataNum<0){
                    alert("请输入准确的起止数字！！！");
                }
                var myArr=new Array();
                var z=0;
                for(i = 0; i < dataNum ; i++) {
                    for(j = 0; j < numberCopies ; j++) {
                        myArr[z]  = qz + numStart;
                        z++ ;
                    }
                    numStart++;
                }
                document.getElementById("textAll").value=myArr;
                document.getElementById("textBll").value=myArr;
            }
  4.  
  5.         //删除数据
            function deleted() {
                var data = document.getElementById("textAll").value;
                var data = document.getElementById("textBll").value;
                var arr = document.getElementById("arr").value;
                console.log(arr);
                var index = data.indexOf(arr);
                console.log(index);
                if (index != -1) {
                    var newData = data.replace(arr, "");
                    document.getElementById("textAll").value = newData;
                    document.getElementById("textBll").value = newData;
                }
            }
       </script>
  6.  
  7. </head>
    <body>
    <form action="acions">
       <div class="cc">
       <div class="aa"  >
          <h5>根据条码规则生成原始数据( 0 )</h5>
          <textarea  style="width:300px;height:150px; overflow:scroll; border:1px solid;" id="textAll" >
          </textarea></br>
          <input type="text" id="textst"  placeholder="数量起"/></br>
          <input type="text" id="textEnd"  placeholder="数量止"/></br>
          <input type="text" id="numberCopies"  placeholder="份数" /></br>
          <input type="button" onclick="newArray()" value="数据生成" /></br>
          <input type="text" id="arr" placeholder="输入已有的数据" /></br>
          <input type="button" onclick="deleted()" value="删除数据" /></br>
       </div>
  8.  
  9.    <div class="BB">
          <h5>待检测条码( 0 )</h5>
       <textarea  style="width:300px; height:150px; overflow:scroll; border:1px solid;" id="textBll" ></textarea></br>
          <input type="text" id="text" placeholder="输入测试数据"/></br>
          <input type="button" onclick="newArray()" value="测试数据" /></br>
       </div>
          <div class="DD">
             <h6>不存在条码( 0 )</h6>
             <textarea  style="width:200px; height:200px; overflow:scroll; border:1px solid;" id="textCll" ></textarea></br>
          </div>
          <div class="EE">
             <h6>重复条码( 0 )</h6>
             <textarea  style="width:200px; height:200px; overflow:scroll; border:1px solid;" id="textDll" ></textarea></br>
          </div>
          <div class="FF">
             <h6>错误条码( 0 )</h6>
             <textarea  style="width:200px; height:200px; overflow:scroll; border:1px solid;" id="textEll" ></textarea></br>
          </div>
          <div class="GG">
             <h3 style="size: auto">条码检测报告</h3>
             <h6>----------------------------------</h6>
             <h5>检测时间:2018-06-26</h5>
             <h5>检测人:&emsp;&emsp;***</h5>
             <h5>不存在条码:( 0 )</h5>
             <h5>重复条码:( 0 )</h5>
             <h5>错误条码:( 0 )</h5>
             <input type="button" onclick="newArray()" value="提交" /></br>
          </div>
       </div>
    </form>
    </body>
    </html>

运用了css，js的更多相关文章

  1. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  2. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  3. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  4. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  5. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  6. nginx资源定向 css js路径问题

    今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...

  7. IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求

    今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...

  8. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  9. 【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码

    1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...

  10. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

随机推荐

  1. Centos7的目录结构

    CentOS 目录结构 : /: 根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中/bin:/usr/bin: 可执行二进制 ...

  2. Centos7安装vsftpd (FTP服务器)

    Centos7安装vsftpd (FTP服务器) 原文链接:https://www.jianshu.com/p/9abad055fff6 TyiMan 关注 2016.02.06 21:19* 字数 ...

  3. Java设计模式之抽象工厂

    概述 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. 设计模式 ...

  4. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  5. TED学习笔记

    20180621(如何做得更好) 多一些探索,询问,聆听,奋斗,成就自己,比一味的做事儿有效的多. 1.刻意让自己的生活在两个区域交替:(1)学习区Learning Zero (2)执行区Perfor ...

  6. JSON 之 SuperObject(11): TSuperTableString、TSuperAvlEntry

    JSON 之 SuperObject(11): TSuperTableString.TSuperAvlEntry - 万一 - 博客园http://www.cnblogs.com/del/archiv ...

  7. [Kubernetes]yaml文件详解

    应前一段时间夸下的海口:[Kubernetes]如何使用yaml文件使得可以向外暴露服务,说过要写一篇关于yaml文件详解的文章出来的,今天来总结一下.yaml文件用在很多地方,但是这里以介绍在Kub ...

  8. JS中 typeof,instanceof类型检测方式

    在js中的类型检测目前我所知道的是三种方式,分别有它们的应用场景: 1.typeof:主要用于检测基本类型. typeof undefined;//=> undefined typeof 'a' ...

  9. Jenkins的详细安装及使用--windows

    操作环境:Windows 一.环境准备 1 安装JDK 本文采用jdk-8u111-windows-x64.exe: 2 配置tomcat 本文采用tomcat8,无需安装,配置JAVA_HOME及J ...

  10. HTTP Status 500 - java.lang.reflect.InvocationTargetException

    type Exception report message java.lang.reflect.InvocationTargetException description The server enc ...