加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
calculate.html 18.02 KB
一键复制 编辑 原始数据 按行查看 历史
zhaolinxu 提交于 2019-07-17 12:56 . 更新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>构造-工艺品编码计算工具</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.notice {
width: 877px;
height: 650px;
margin: 10px;
border: 1px solid #7c7c7c;
overflow: hidden;
}
.notice-tit {
height: 27px;
background-color: #eaeaea;
position: relative;
}
.notice-tit ul {
position: absolute;
width: 300px;
left: -1px;
}
.notice-tit ul li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
border-bottom: 1px solid #7c7c7c;
padding: 0 1px;
}
.notice-tit ul a {
text-decoration: none;
display: block;
}
.notice-tit ul .select {
background-color: white;
border-right: 1px solid #7c7c7c;
border-left: 1px solid #7c7c7c;
border-bottom: 1px solid white;
padding: 0;
}
.data-length {
width: 210px;
height: 50px;
font-size: 32px;
float: left;
margin-left: 2px;
}
#guide {
width: 460px;
height: 52px;
border: 1px solid #A9A9A9;
float: left;
margin-left: 2px;
}
#guide2 {
width: 400px;
height: 52px;
border: 1px solid #A9A9A9;
float: left;
margin-left: 2px;
font-size: 12px;
}
.td {
width: 24px;
height: 19px;
text-align: center;
vertical-align: middle;
font-size: 10px;
vertical-align: middle;
}
td:hover, .click-td, .result {
box-shadow: 0 0 1px 1px #313463, inset 0 0 10px 5px
rgba(49, 52, 99, 0.20);
}
.left {
width: 682px;
height: 620px;
float: left;
}
.result-div {
width: 192px;
height: 620px;
float: left;
border: 1px solid #A9A9A9;
}
.result {
height: 32px;
text-align: center;
vertical-align: middle;
float: left;
font-size: 24px;
vertical-align: middle;
padding: 4px;
}
.red {
color: red;
font-weight: bold;
}
.td2 {
width: 290px;
height: 40px;
text-align: center;
vertical-align: middle;
font-size: 10px;
vertical-align: middle;
}
.span {
width: 36px;
height: 40px;
display: block;
float: left;
vertical-align: middle;
font-size: 36px;
}
.span2 {
width: 40px;
height: 40px;
display: block;
float: left;
vertical-align: middle;
font-size: 14px;
}
.input2 {
width: 150px;
height: 40px;
text-align: center;
vertical-align: middle;
font-size: 10px;
vertical-align: middle;
font-size: 55px;
}
#calculate2 {
width: 60px;
height: 54px;
margin-left: 1px;
font-size: 22px;
background-color: white;
}
</style>
<script type="text/javascript">
// 非常烂的js水平,轻喷----怀秋
//加载字母按钮
var b = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var data = new Array();
var lengthInput = null;
function load()
{
// 加载编码长度输入框
lengthInput = document.getElementById("data-length");
var mainTable = document.getElementById("main");
var innerHTMLStr = "";
for(var i=0; i<b.length; i++)
{
var tr = "<tr id='tr_" + i + "'>";
data[i] = new Array();
for(var j=0; j<b.length; j++)
{
var text = b[i] + b[j];
var td = "<td onclick='changetd(this)' id='td_" + i + "_" + j + "' class='td'>";
td += text;
td += "</td>";
tr += td;
data[i][j] = {flag: false, value: text};
}
tr += "</tr>";
innerHTMLStr += tr;
}
mainTable.innerHTML = innerHTMLStr;
}
// 更改答案范围 并计算
function changetd(e)
{
var value = lengthInput.value;
  if (value=="")
{
   alert("请首先输入编码长度,正整数");
   return ;
  }
else
{
//重置答案
resultArr = [];
var resultDiv = document.getElementById("result-div");
resultDiv.innerHTML = "暂时无法计算出答案";
var index = e.id.split("_");
var rowIndex = index[1];
var colIndex = index[2];
data[rowIndex][colIndex].flag = !data[rowIndex][colIndex].flag;
if(data[rowIndex][colIndex].flag)
{
e.classList.add("click-td");
}else
{
e.classList.remove("click-td");
}
collect();
}
}
// 收集答案范围编码
function collect()
{
var collectArr = new Array();
for(var i=0; i<data.length; i++)
{
for(var j=0; j<data[i].length; j++)
{
if(data[i][j].flag)
{
collectArr.push(data[i][j].value);
}
}
}
if(collectArr.length > 0)
{
for(var i=0; i<collectArr.length; i++)
{
calculate(collectArr[i], "result-div", document.getElementById("data-length").value, collectArr);
}
}
}
//计算答案
var resultArr = [];
function calculate(str, id, length, collectArr)
{
var dataLength = length;
if(str.length == parseInt(dataLength))
{
resultArr.push(str);
show(id);
}
else
{
for(var j=0; j<collectArr.length; j++)
{
var word2 = collectArr[j];
if(str != word2 && str.substr(-2, 2) != word2 && str.charAt(str.length-1) == word2[0])
{
// 限制出现"ABABAB"这样的答案
var temp = str + word2[1];
var flag = false;
for(var i=0; i<temp.length-2; i++)
{
var subTemp = temp.substr(i, 2);
if(countSubstr(temp, subTemp, false) > 1)
{
flag = true;
}
}
if(!flag)
{
calculate(str + word2[1], id, length, collectArr);
}
}
}
}
}
//判断substr字符串在str中出现的次数 isIgnore是否忽略大小写
function countSubstr(str, substr, isIgnore)
{
var count;
var reg = "";
if (isIgnore == true) {
reg = "/" + substr + "/gi";
} else {
reg = "/" + substr + "/g";
}
reg = eval(reg);
if (str.match(reg) == null) {
count = 0;
} else {
count = str.match(reg).length;
}
return count;
}
// 展示答案
function show(id)
{
if(resultArr.length > 0)
{
var innerHTMLStr = "";
for(var i=0; i<resultArr.length; i++)
{
var div = "<div id='r_" + i + "' class='result' onmousemove='change(this);' onmouseout='clearclass();'>";
div += resultArr[i];
div += "</div>";
innerHTMLStr += div;
}
// 加载答案div
var resultDiv = document.getElementById(id);
resultDiv.innerHTML = innerHTMLStr;
}
}
//更换答案样式
function change(e)
{
var answer = e.innerText;
for(var i=0; i<data.length; i++)
{
for(var j=0; j<data[i].length; j++)
{
if(answer.indexOf(data[i][j].value) > -1)
{
var td = document.getElementById("td_" + i + "_" + j);
td.classList.add("red");
}
}
}
}
function clearclass()
{
var tdArr = document.getElementsByTagName("td");
for(var i=0; i<tdArr.length; i++)
{
tdArr[i].classList.remove("red");
}
}
</script>
<script type="text/javascript">
var c = ['A', 'J', 'S', 'B', 'K', 'T', 'C', 'L', 'U', 'D', 'M', 'V', 'E', 'N', 'W', 'F', 'O', 'X', 'G', 'P', 'Y', 'H', 'Q', 'Z', 'I', 'R'];
function load2()
{
var mainTable = document.getElementById("main_2");
var innerHTMLStr = "";
for(var i=0; i<c.length; i++)
{
if(i % 3 == 0 || i == 0)
{
innerHTMLStr += "<tr id='tr2_" + i + "'>";
}
innerHTMLStr += "<td id='td2_" + i + "' class='td2'>";
innerHTMLStr += "<span class='span'>" + c[i] + "</span>";
innerHTMLStr += "<input class='input2' id='input" + i + "' title='请输入" + c[i] + "对应编码' type='number' min='10' max='9999' step='10'/>";
innerHTMLStr += "</td>";
if((i + 1) % 3 == 0)
{
innerHTMLStr += "</tr>";
}
}
mainTable.innerHTML = innerHTMLStr;
}
// 第二种石碑更改长度之后
var length2 = 0;
function changeLength2(value)
{
var mainTable = document.getElementById("main_3");
value = parseInt(value);
if(value > 0)
{
length2 = value - 1;
var innerHTMLStr = "";
for(var i=0; i< value - 1; i++)
{
if(i % 3 == 0 || i == 0)
{
innerHTMLStr += "<tr id='tr2'>";
}
innerHTMLStr += "<td id='td2' class='td2'>";
innerHTMLStr += "<span class='span2'>第" + (i+1) + "个编码</span>";
innerHTMLStr += "<input class='input2' style='font-size:22px;' id='input-number" + i + "' title='请输入第" + (i+1) + "个编码对应数字' type='number' min='1' step='10'/>";
innerHTMLStr += "</td>";
if((i + 1) % 3 == 0)
{
innerHTMLStr += "</tr>";
}
}
mainTable.innerHTML = innerHTMLStr;
}
}
// 计算第二种石碑
function calculate2()
{
resultArr = [];
var resultDiv = document.getElementById("result-div2");
resultDiv.innerHTML = "暂时无法计算出答案";
// 收集每个字母对应的数字
var calculateLetter = [];
for(var i=0; i<b.length; i++)
{
var inputValue = document.getElementById("input" + i).value;
if(inputValue != "")
{
calculateLetter.push({letter: b[i], value: inputValue});
}
else
{
alert("有部分字母没有输入数字");
return;
}
}
// 收集每一位编码对应的数字
var calculateProduct = [];
for(var i=0; i<length2; i++)
{
var inputNumberValue = document.getElementById("input-number" + i).value;
if(inputNumberValue != "")
{
calculateProduct.push({index: i, value: inputNumberValue});
// calculateProduct.push(inputNumberValue);
}
else
{
alert("有部分编码没有输入数字");
return;
}
}
// 计算每一位编码对应的字母 即答案范围编码
var collectArr2 = [];
for(var i=0; i<calculateProduct.length; i++)
{
// 目标结果
var target = calculateProduct[i].value;
var index = calculateProduct[i].index;
var tempArr = [];
for(var j=0; j<calculateLetter.length; j++)
{
// 第一个字母
var firstLetter = calculateLetter[j];
for(var k=0; k<calculateLetter.length; k++) //此处k=0表示容许AB BA 这种情况
{
// 第二个字母
var lastLetter = calculateLetter[k]
if(firstLetter.value * lastLetter.value == target)
{
tempArr.push(firstLetter.letter + lastLetter.letter);
}
}
}
collectArr2.push({index: index, value: tempArr});
}
//计算答案
if(collectArr2.length > 0)
{
collectArr2 = collectArr2.sort(compare('index'));
var tempArr = collectArr2[0].value;
for(var i=0; i<tempArr.length; i++)
{
combination(tempArr[i], "result-div2", document.getElementById("data-length2").value, collectArr2, 1);
}
}
}
// 组合石碑2的答案
function combination(str, id, length, collectArr, index)
{
var dataLength = length;
if(str.length == parseInt(dataLength))
{
resultArr.push(str);
show(id);
}
else
{
for(var j=0; j<collectArr.length; j++)
{
if(collectArr[j].index == index)
{
var word2Arr = collectArr[j].value;
for(var k=0; k<word2Arr.length; k++)
{
var word2 = word2Arr[k];
if(str != word2 && str.substr(-2, 2) != word2 && str.charAt(str.length-1) == word2[0])
{
// 限制出现"ABABAB"这样的答案
var temp = str + word2[1];
var flag = false;
for(var i=0; i<temp.length-2; i++)
{
var subTemp = temp.substr(i, 2);
if(countSubstr(temp, subTemp, false) > 1)
{
flag = true;
}
}
if(!flag)
{
var nextIndex = 1 + index;
combination(str + word2[1], id, length, collectArr, nextIndex);
}
}
}
}
}
}
}
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
</script>
<script type="text/javascript">
//获取id封装成一个函数$()方便调用
function $(id)
{
//如果传入的参数类型为字符串则获取当前ID元素,否则返回id
return typeof id==="string"?document.getElementById(id):id;
}
//window.onload表示当文档加载完毕时执行函数
window.onload=function()
{
//获取#notice-tit下面的全部li元素
var titles = $('notice-tit').getElementsByTagName('li');
//获取#notice-con下面的全部div元素
var childNodes = $('notice-con').childNodes;
var divs = [];
for(var i=0; i<childNodes.length; i++)
{
if(childNodes[i].tagName == "DIV"){
divs.push(childNodes[i]);
}
}
//遍历所有li标签,给每个li加上id和值,并且绑定事件
for(var i=0; i<titles.length; i++){
if(titles[i].className != "go")
{
//给每个li加上id和值
titles[i].id = i;
//给每个li绑定事件
titles[i].onmouseover = function(){
//悬浮后首先应该初始化每个li和div上的类和display
for(var j=0;j<titles.length;j++){
if(titles[j]) titles[j].className = "";
if(divs[j]) divs[j].style.display = "none";
}
//给当前悬浮元素添加属性
titles[this.id].className = "select";
divs[this.id].style.display = "block";
}
}
}
load(); // 加载石碑1
load2(); // 加载石碑2
console.log("轻喷哈");
}
</script>
<script type="text/javascript">
var time =5000
var ICU = ["","","","",""]
var counter=0;
var flag=0;
var s = null;
var changeId = "main";
var innerT = "";
function Random(n)
{
return Math.floor(Math.random()*n)
}
function sleep(numberMillis)
{
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true)
{
now = new Date();
if (now.getTime() > exitTime) return;
}
}
// 判断是否含有小写字母
function hasLowercaseOrNumber(str)
{
if(str != null)
{
var result = str.match(/^.*[a-z0-9]+.*$/);
if(result==null) return false;
return true;
}
else
{
return true;
}
}
// 判断是否含有其他字符
function hasOther(str)
{
if(str != null)
{
var result = str.match(/^.*[<>/_\-='\"2():;]+.*$/);
if(result==null) return false;
return true;
}
else
{
return true;
}
}
function Change(str)
{
try
{
var content=str.split("");
var cache = Random(content.length);
for(i=0;i<5;i++)
{
if(cache+i > content.length-1) break;
if(!hasLowercaseOrNumber(content[cache+i]) && !hasOther(content[cache+i]) && content[cache+i] != " " && content[cache+i] != "\n" && content[cache+i] != "\t")
{
content[cache+i] = ICU[i];
}
else
{
if(content[cache+i] == "\n" || content[cache+i] == "\t")
{
content[cache+i] = "";
}
cache = Random(content.length);
i--;
}
}
if(time>1000) time=time-1000
else if(time>500) time=time-500
else if(time>100) time=time-100
else if(time>50) time=time-50
else if(time>30) time=time-1
else counter++
if(counter > 500)
{
clearInterval(s);
throw new Error("stop here");
}
// document.getElementById(changeId).innerHTML = content.join("");
document.body.innerHTML = content.join("");
if(time>20)
{
clearInterval(s);
s = setInterval("go()",time)
}
return content.join("")
}
catch(err)
{
if(flag==0)
{
document.body.innerHTML = "";
document.write("<div> Site-CN-34监控系统发现你可能已受SCP-CN-994影响。请在原地保持不动并保持镇静,机动特遣队MTF-庚午-23“目不可及” <strong>已经看到你了</strong> </div>")
flag = flag + 1
sleep(5000)
document.write("<div style='text-align: center;'><img src='http://scp-wiki-cn.wdfiles.com/local--files/scp-cn-994/I%20See%20You.png' width='75%' style='margin: 0 auto;' /></div>")
}
}
}
var content1 = "";
function go()
{
if(content1 == ""){
document.getElementById("go").style.display="none";
content1 = document.body.innerHTML;
innerT = document.body.innerText;
}
content1 = Change(content1);
}
</script>
</head>
<body><div class="notice"><div class="notice-tit" id="notice-tit"><ul><li class="select"><a href="#">石碑Ⅰ</a></li><li><a href="#">石碑2</a></li><li onclick="go();" class="go" id="go"style="cursor: help; font-size: 12px; font-weight: bold; width: 100px; color: red;">不要点击这个</li></ul></div><div class="notice-con" id="notice-con"><div style="display: block" title="石碑Ⅰ"><div id="left" class="left"><input id="data-length" class="data-length" title="请首先输入编码长度"placeholder="输入编码长度" type="number" min="1" max="20" step="1" /><div id="guide" title="帮助">请首先输入编码长度,然后点击可能组成答案编码的字母,系统会自动将可能的组合展示在右边</div><table id="main" title="请点击在答案范围内的编码"></table></div><div id="result-div" class="result-div" onmouseout=""title="所有可能的答案"></div></div><div style="display: none" title="石碑2"><div id="left2" class="left"><input id="data-length2" onchange="changeLength2(this.value);"class="data-length" title="请首先输入编码长度" placeholder="输入编码长度"type="number" min="1" max="9" step="1" /><div id="guide2" title="帮助">请首先输入编码长度,然后【按顺序】输入各编码对应的数字(顺序是从上至下从左往右1234),然后输入各字母对应的数字,系统会自动将可能的组合展示在右边</div><button type="button" id="calculate2" onclick="calculate2();">计算</button><table id="main_2" title="请输入各字母对应的数字"></table><table id="main_3" title="请输入各字母对应的数字"></table></div><div id="result-div2" class="result-div" onmouseout=""title="所有可能的答案"></div></div></div></div></body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化