JAVAScript代码加CSS和HTML

<%--
Created by IntelliJ IDEA.
User: zengxiangcai
Date: 2018/6/27
Time: 11:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>大批量生成数组数据</title>
<style>
.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: 370px;
margin-left: 50px;
/*margin-top: -150px;*/
/**/
}
.FF{
width: 400px;
height: 300px;
position: absolute;
left:550px ;
top: 370px;
margin-left: 50px;
/*margin-top: -150px;*/
/**/
}
.GG{
width: 400px;
height: 300px;
position: absolute;
left:850px;
top: 10px;
margin-left: 50px;
/*margin-top: -150px;*/
/**/
}
.HH{
width: 400px;
height: 300px;
position: absolute;
left:850px;
top: 370px;
margin-left: 50px;
/*margin-top: -150px;*/
/**/
}
</style>
<script type="text/javascript">
var myArr=new Array();
var start;
var end; function newArray(){
var patrn = /^[0-9]*$/;
var qz = "COO";//前缀
var numStart=document.getElementById("textst").value; //数量起
var numEnd=document.getElementById("textEnd").value; //数量止
start = numStart;
end = numEnd;
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 z=0;
for(i = 0; i < dataNum ; i++) {
for(j = 0; j < numberCopies ; j++) {
myArr[z] = qz + numStart;
z++ ;
}
numStart++;
}
show();
repeat();
dataNum();
}
function show(){
var txt="";
for(var n=0;n<myArr.length;n++){
txt = txt + myArr[n] + " ";
}
document.getElementById("textAll").value=txt;
document.getElementById("textBll").value=txt;
}
//删除数据
function deleted() {
var data = myArr;
var arr = document.getElementById("arr").value;
var m = arr.split(",");
var value="";
var sumCll=0;
var sumEll=0;
var er="";
var index;
var patrn = /^COO+[0-9]*$/;
console.log(arr);
if(arr){
for(var i=0;i<m.length;i++){
if(patrn.test(m[i])==false){
er+="错误条码:"+m[i]+"\r\n";
sumEll+=1;
}else{
index = data.indexOf(m[i]);
console.log(index);
if (index != -1) {
data.splice(index,1);
console.log(data);
myArr = data;
show();
}else{
value += "条码:"+m[i]+"不存在\r\n";
sumCll+=1;
}
}
repeat();
document.getElementById("textCll").value=value;
document.getElementById("textEll").innerHTML=er;
re("not",sumCll);
re("error",sumEll);
}
}
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>numEnd) && !patrn.test(numberCopies<0)) {
document.getElementById("textCll").value=myArr;
}
var dataNum = numEnd - numStart + 1;
if (numberCopies < 0) {
var newData = data.replace(arr, "");
document.getElementById("textCll").value=myArr;
document.getElementById("textEll").value=myArr;
}
}
}
function repeat(){
var s = start;
var count = -1;
var qz = "COO";
var str;
var sum=0;
var my="";
for(var i=0;i<=end-start;i++){
str = qz + s;
for(var j=0;j<myArr.length;j++){
if(myArr[j]==str){
count+=1;
}
}
sum =sum +count;
if(count!=-1)
my = my + str+" 重复数:"+count+"\r\n";
count=-1;
s++;
}
document.getElementById("textDll").value = my;
re("repeat",sum);
}
function re(name,sum){
var re = document.getElementsByClassName(name);
for(var i=0;i<re.length;i++){
re[i].innerHTML=sum;
}
}
</script> <!--显示时间-->
<script language="javascript">
var t = null;
t = setTimeout(time,1000);//开始执行
function time()
{
clearTimeout(t);//清除定时器
dt = new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
document.getElementById("timeShow").innerHTML = h+"时"+m+"分"+s+"秒";
t = setTimeout(time,1000); //设定定时器,循环执行
}
</script> </head>
<body>
<form action="acions">
<div class="cc">
<div class="aa" >
<h6>根据条码规则生成原始数据( <span class=""></span> )</h6>
<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">
<h6>待检测条码( <span class=""></span> )</h6>
<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>重复条码( <span class = "not">0</span> )</h6>
<textarea style="width:200px; height:250px; overflow:scroll; border:1px solid;" id="textCll" ></textarea></br>
</div>
<div class="EE">
<h6>重复存在条码( <span class = "repeat">0</span> )</h6>
<textarea style="width:200px; height:250px; overflow:scroll; border:1px solid;" id="textDll" ></textarea></br>
</div>
<div class="FF">
<h6>错误条码( <span class = "error">0</span> )</h6>
<textarea style="width:200px; height:250px; overflow:scroll; border:1px solid;" id="textEll" ></textarea></br>
</div>
<div class="HH">
<h6>遗漏条码( <span class = "error">0</span> )</h6>
<textarea style="width:200px; height:250px; overflow:scroll; border:1px solid;" id="textFll" ></textarea></br>
</div>
<div class="GG">
<h3 style="size: auto">条码检测报告</h3>
<h6>----------------------------------</h6>
<h5>检测时间:&nbsp;&nbsp;<label id="timeShow"></label></h5>
<h5>检测人:*** &emsp;&emsp; </h5>
<h5>重复条码:( <span class = "not">0</span> )</h5>
<h5>重复条码:( <span class = "repeat">0</span> )</h5>
<h5>错误条码:( <span class = "error">0</span> )</h5>
<h5>遗漏条码:(<span class=""></span>)</h5>
<input type="button" onclick="aaaa()" value="提交" /></br>
</div>
</div>
</form>
</body>
</html>

运用JS判断代码可以参考学习的更多相关文章

  1. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  2. 最短的数字判断代码 js

    转自  http://www.cnblogs.com/snandy/p/3590186.html 我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是nu ...

  3. JS判断客户端是手机还是PC的2个代码(转)

    转载自:http://www.jb51.net/article/48939.htm Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的检测,源生的哦,方法一共有 ...

  4. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator,根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  5. js页面跳转参考代码大全

    整理一下JS页面跳转参考代码 第一种:     <script language=/"javascript/" type=/"text/javascript/&qu ...

  6. js判断屏幕分辨率的代码

    通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...

  7. js 判断checkbox是否选中的实例代码

    分享下js判断是否选中CheckBox的方法. 代码如下: <input type="checkbox" name="checkbox1" checked ...

  8. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  9. 【功能代码】---3 JS判断字符串是否包含某个字符串

    JS判断字符串是否包含某个字符串 var str ="abc"; if(str.indexOf("bc")>-1){ alert('str中包含bc字符串 ...

随机推荐

  1. Kubernetes之服务发现及负载Services

    Service 概述 kubernetes 中的pod是有生生灭灭的,时刻都有可能被新的pod所代替,而不可复活(pod的生命周期).一旦一个pod生命终止,通过ReplicaSets动态创建和销毁p ...

  2. mysql中常用的函数

    -- 基本上都是抄的别人整理的 -- 一.数学函数 ABS(x) -- 返回x的绝对值 BIN(x) -- 返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x) -- 返回大于 ...

  3. ACM-ICPC 2018 徐州赛区网络预赛 C Cacti Lottery(期望+暴力)

    https://nanti.jisuanke.com/t/31455 题意 给一个3*3的方格填入 1-9 九个数 有些数是已知的,有些数是对方已知但我未知的,有些数是大家都未知的 我要计算取得最大的 ...

  4. JavaScript数据类型 Boolean布尔类型

    前言 布尔值Boolean类型可能是三种包装对象Number.String和Boolean中最简单的一种.Number和String对象拥有大量的实例属性和方法,Boolean却很少.从某种意义上说, ...

  5. Geometric regularity criterion for NSE: the cross product of velocity and vorticity 1: $u\times \om$

    在 [Chae, Dongho. On the regularity conditions of suitable weak solutions of the 3D Navier-Stokes equ ...

  6. input(type="checkbox"|type="radio")+jquery使用

    1.用.is(":checked")判断input是否为选中状态 例: var value=$(this).is(":checked"); localStora ...

  7. CF1139E Maximize Mex

    题目地址:CF1139E Maximize Mex 这其实是一个二分图匹配匈牙利算法的巧妙运用 考虑倒序回答 则由原来的删除改为添加 把 potential 值作为左部,则一共有编号为 \(0~m\) ...

  8. vue之vuex学习

    知识点一:vuex是状态管理器(单向数据流) 每个Vuex应用程序的核心是商店.“商店”基本上是一个容纳您的应用程序状态的容器.有两件事使Vuex商店与普通的全局对象不同: Vuex商店是被动的.当V ...

  9. Linux 运维工作中的经典应用ansible(批量管理)Docker容器技术(环境的快速搭建)

    一 Ansible自动化运维工具 Python 在运维工作中的经典应用 ansible(批量管理操作) .安装ansible(需要bese epel 2种源) wget -O /etc/yum.rep ...

  10. vcenter新建虚拟机centos7作为虚拟机模板

    网卡选项 适配器类型算则E1000 Remote console选项 电源选项 加密 打开电源,连接iso安装系统 按一下tab键,修改网卡为eth0 点击Tab,打开kernel启动选项后,增加ne ...