代码如下：

<!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>

   <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;
        }

        //删除数据
        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>

</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>

   <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. SpringBoot使用消息队列RabbitMQ

    RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲.消息分发的作用.RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,AMQP,即Advan ...

  2. vim与程序员

    所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...

  3. HDU 5963(游戏 博弈+规律)

    题意是: 一群男生和一群女生玩游戏:给出一棵 n 个节点的树,这棵树的每条边有一个权值 0 或 1. 在一局游戏开始时,确定一个节点作为根.从女生开始,双方轮流进行操作. 当一方操作时,要先选择一个不 ...

  4. httpClient4.5 closeableHttpClient用法

    HttpClient一 简介1.尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能.HttpClient就是寻求弥补这项空白的组件,通过提 ...

  5. 第三节：总结.Net下后端的几种请求方式(WebClient、WebRequest、HttpClient)

    一. 前言 前端调用有Form表单提交,ajax提交,ajax一般是用Jquery的简化写法,在这里不再过多介绍: 后端调用大约有这些:WebCient.WebRequest.Httpclient.W ...

  6. Shiro 系列 - 基本知识

    和 Spring Security 项目一样, Apache Shiro 也是一个被广泛使用安全框架, 它们都能完成认证.授权.会话管理等. 简单对比一下 Apache Shiro 和 Spring ...

  7. File Upload XSS

    A file upload is a great opportunity to XSS an application. User restricted area with an uploaded pr ...

  8. 网络学习day01_计算机网络与分层思想

    2018.9.1 网络学习day01_计算机网络与分层思想 网络安全 计算机网络 分层思想    LAN与WAN   LAN(Local Area Network)--局域网   局域网(Local ...

  9. 51nod 1215 数组的宽度

    若一个数在一段区间内作为最大值存在,那么答案应该加上这个数 若一个数在一段区间内作为最小值存在,那么答案应该减去这个数 所以我们利用单调栈,高效求出a[i]在哪个区间内作为最大/最小值存在,从而确定, ...

  10. LOJ 3049: 洛谷 P5284: 「十二省联考 2019」字符串问题

    题目传送门:LOJ #3049. 题意简述: 给定一个长度为 \(n\) 的母串 \(S\). 有 \(n_a\) 个 A 类串,都是 \(S\) 的子串,以区间的形式给出. 有 \(n_b\) 个 ...