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>
posted @ 2019-10-23 10:07 GL_BKY 阅读(621) 评论(0) 收藏举报
刷新页面返回顶部
郭子仪

JS自定义随机键盘

公告
