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