JS自定义随机键盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style></style> </head> <body> <script> //生成大写字母 A的Unicode值为65 function generateBig_1(){ var str = []; for(var i=65;i<91;i++){ str.push(String.fromCharCode(i)); } return str; } //生成大写字母 a的Unicode值为97 function generateSmall_1(){ var str = []; for(var i=97;i<123;i++){ str.push(String.fromCharCode(i)); } return str; } //将字符串转换成Unicode码 function toUnicode(str){ var codes = []; for(var i=0;i<str.length;i++){ codes.push(str.charCodeAt(i)); } return codes; } function generateSmall(){ var ch_small = 'a'; var str_small = ''; for(var i=0;i<26;i++){ str_small += String.fromCharCode(ch_small.charCodeAt(0)+i); } return str_small; } function generateBig(){ var ch_big = 'A'; var str_big = ''; for(var i=0;i<26;i++){ str_big += String.fromCharCode(ch_big.charCodeAt(0)+i); } return str_big; } console.log(generateSmall()); console.log(generateBig()); function suijiNum(){ var codes = []; var nums = []; for(var i=0;i<10;i++){ nums.push(i+1); } for(var i=1;i>0;i++){ var suiji =Math.floor(Math.random()*10+1); if(codes.length == 0){ codes.push(suiji); }else{ var indexs = arr.indexOf(suiji) //-1 if(indexs ==-1){ codes.push(suiji); } } for(var j=0;j<nums.length;j++){ var cs = nums[j]; var cd = codes.indexOf(cs) //-1 if(cd == -1){ } } } return codes; } function b(){ var l = generateBig_1(); var k = []; var lenl = 26; for(var i=0; i<26; i++){ var index = Math.floor(Math.random() * lenl); k[i] = l[index]; l[index] = l[lenl - 1]; lenl -= 1; } console.log("26sd",k) } b(); function a(){ var l = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var k = []; var lenl = 10; for(var i=0; i<10; i++){ var index = Math.floor(Math.random() * lenl); k[i] = l[index]; l[index] = l[lenl - 1]; lenl -= 1; } console.log("k",k) } a() console.log(); console.log(generateBig_1()); console.log(generateSmall_1()); function miniNumberKeyboard (callback) { var div = document.createElement('div'); div.id = 'div' document.body.appendChild(div); div.style.backgroundColor = '#3d414d'; div.style.width = '500px'; div.style.height = '340px'; div.style.borderRadius = '15px'; div.style.position = 'relative'; var inputBox = document.createElement('div'); inputBox.style.backgroundColor = '#353945'; document.body.appendChild(inputBox); inputBox.id = 'inputBox'; inputBox.innerHTML = ''; inputBox.style.position = 'absolute'; inputBox.style.top = '35px'; inputBox.style.left = '55px'; inputBox.style.width = '392px'; inputBox.style.height = '45px'; inputBox.style.lineHeight = '45px'; inputBox.style.fontSize = '20px'; inputBox.style.color = '#f7fcff'; inputBox.style.paddingLeft = '8px'; //删除 确认 取消 var cancel = document.createElement('div'); cancel.id = 'cancel'; cancel.innerHTML = '取消'; document.body.appendChild(cancel); cancel.style.color = '#f7fcff'; cancel.style.position = 'absolute'; cancel.style.top = '95px'; cancel.style.left = '110px'; cancel.style.backgroundColor = '#454955'; cancel.style.width = '40px'; cancel.style.height = '35px'; cancel.style.lineHeight = '35px'; cancel.style.textAlign = 'center'; var del = document.createElement('div'); del.innerHTML = '删除'; del.id = 'del'; document.body.appendChild(del); del.style.color = '#f7fcff'; del.style.position = 'absolute'; del.style.top = '95px'; del.style.left = '57px'; del.style.backgroundColor = '#454955'; del.style.width = '40px'; del.style.height = '35px'; del.style.lineHeight = '35px'; del.style.textAlign = 'center'; var trueBtn = document.createElement('div'); document.body.appendChild(trueBtn); trueBtn.id = 'trueBtn'; trueBtn.innerHTML = '确认'; trueBtn.style.color = '#f7fcff'; trueBtn.style.position = 'absolute'; trueBtn.style.top = '95px'; trueBtn.style.left = '384px'; trueBtn.style.width = '70px'; trueBtn.style.height = '35px'; trueBtn.style.backgroundColor = '#454955'; trueBtn.style.lineHeight = '35px'; trueBtn.style.textAlign = 'center'; var number = document.createElement('div'); number.style.width = '425px'; number.style.height = '190px'; number.style.position = 'absolute'; number.style.top = '143px'; number.style.left = '58px'; // number.style.backgroundColor = '#fff'; number.id = 'number'; document.body.appendChild(number); var Box = document.getElementById('number'); var str = generateBig_1(); for (var i = 0; i < str.length; i++) { var numberBox = document.createElement('div'); numberBox.innerHTML = str[i]; numberBox.id = i; numberBox.className = 'numberkey color'; numberBox.style.width = '80px'; numberBox.style.height = '45px'; numberBox.style.backgroundColor = '#454955'; numberBox.style.cssFloat = 'left'; numberBox.style.marginRight = '25px'; numberBox.style.marginTop = '15px'; numberBox.style.lineHeight = '40px'; numberBox.style.textAlign = 'center'; numberBox.style.fontSize = '25px'; numberBox.style.color = '#f7fcff'; Box.appendChild(numberBox); document.getElementById('0').onclick = function cc() { if (document.getElementById('inputBox').innerHTML == '0') { document.getElementById('0').onclick = null; document.getElementById('0').onclick = cc; } else if (document.getElementById('inputBox').innerHTML.substr(0,1) == '.') { var zeroArray = inputBox.innerHTML.split(''); var value = zeroArray.shift(); var newSrt = document.getElementById('0').innerHTML + zeroArray.join(''); document.getElementById('inputBox').innerHTML = newSrt; } else { document.getElementById('inputBox').innerHTML = document.getElementById('inputBox').innerHTML + numberBox[0].innerHTML; } } }; //正负号 var minus = document.createElement('div'); minus.className = 'color'; minus.id = 'minus'; minus.style.width = '80px'; minus.style.height = '45px'; minus.innerHTML = '-/+'; minus.style.backgroundColor = '#454955'; minus.style.marginTop = '135px'; minus.style.marginLeft = '210px'; minus.style.fontSize = '35px'; minus.style.lineHeight = '45px'; minus.style.textAlign = 'center'; minus.style.color = '#f7fcff'; minus.style.fontSize = '22px'; Box.appendChild(minus); document.getElementById('minus').onclick = function aa() { if ( document.getElementById('inputBox').innerHTML == '0') { document.getElementById('minus').onclick = null; document.getElementById('minus').onclick = aa; } else if (document.getElementById('inputBox').innerHTML.indexOf('-') != -1) { document.getElementById('inputBox').innerHTML = document.getElementById('inputBox').innerHTML.split('').join('').replace('-',''); } else { var showArr = document.getElementById('inputBox').innerHTML.split('') showArr.unshift('-'); var newString = showArr.join(''); document.getElementById('inputBox').innerHTML = newString; } } //小数点 var point = document.createElement('div'); point.className = 'color'; point.id = 'point'; point.style.width = '80px'; point.style.height = '45px'; point.innerHTML = '.'; point.style.backgroundColor = '#454955'; point.style.marginTop = '-45px'; point.style.marginLeft = '315px'; point.style.fontSize = '35px'; point.style.lineHeight = '25px'; point.style.textAlign = 'center'; point.style.color = '#f7fcff'; Box.appendChild(point); document.getElementById('point').onclick = function bb () { if(document.getElementById('inputBox').innerHTML.indexOf('.') != -1) { document.getElementById('point').onclick = null; document.getElementById('point').onclick = bb; } else { var newInnerHTML = document.getElementById('inputBox').innerHTML.split(''); newInnerHTML.push(point.innerHTML) var pushNew = newInnerHTML.join(''); document.getElementById('inputBox').innerHTML = pushNew; } } //input框展示内容 var numberBox = document.querySelectorAll('.numberkey'); for (let i = 1; i < numberBox.length; i++) { numberBox[i].onclick = function () { var inputInHTML = document.getElementById('inputBox').innerHTML; var newHTML = inputInHTML + numberBox[i].innerHTML; inputBox.innerHTML = newHTML; if (newHTML.substr(0,1) == '0' && newHTML.indexOf('.') == -1 || newHTML.substr(0,1) == '.') { var array = inputBox.innerHTML.split(''); var value = array.shift(); var newSrt = array.join('') document.getElementById('inputBox').innerHTML = newSrt; } } } //取消按钮的功能 document.getElementById('cancel').onclick = function () { document.body.removeChild(document.getElementById('div')); document.body.removeChild(document.getElementById('inputBox')); document.body.removeChild(document.getElementById('del')); document.body.removeChild(document.getElementById('trueBtn')); document.body.removeChild(document.getElementById('number')); document.body.removeChild(document.getElementById('cancel')); } //取消按钮的移入移出 var cancelBtn = document.getElementById('cancel'); cancelBtn.onmouseover = function over () { cancelBtn.style.backgroundColor = '#e75e61'; } cancelBtn.onmouseout = function out() { cancelBtn.style.backgroundColor = '#454955'; } //删除按钮 document.getElementById('del').onclick = function () { var length = document.getElementById('inputBox').innerHTML.length; inputBox.innerHTML = inputBox.innerHTML.substr(0, length - 1); } //删除按钮移入移出 var delBtn = document.getElementById('del'); delBtn.onmouseover = function over () { delBtn.style.backgroundColor = '#e75e61'; } delBtn.onmouseout = function out () { delBtn.style.backgroundColor = '#454955'; } //确定按钮 document.getElementById('trueBtn').onclick = function () { callback(document.getElementById('inputBox').innerHTML); document.body.removeChild(document.getElementById('div')); document.body.removeChild(document.getElementById('inputBox')); document.body.removeChild(document.getElementById('del')); document.body.removeChild(document.getElementById('trueBtn')); document.body.removeChild(document.getElementById('number')); document.body.removeChild(document.getElementById('cancel')); } //确认按钮移入移出 var trueBtn = document.getElementById('trueBtn'); trueBtn.onmouseover = function over () { trueBtn.style.backgroundColor = '#39bdb5'; } trueBtn.onmouseout = function out () { trueBtn.style.backgroundColor = '#454955'; } //按钮移入样式 var mouseColor = document.querySelectorAll('.color'); for (let i = 0; i < mouseColor.length; i++) { mouseColor[i].onmouseover = function () { mouseColor[i].style.backgroundColor = '#fec107'; }; mouseColor[i].onmouseout = function () { mouseColor[i].style.backgroundColor = '#454955'; } } }; miniNumberKeyboard(callback); function callback (LastNumber) { console.log(LastNumber); } </script> </body> </html>