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>

JS自定义随机键盘的更多相关文章

JS自定义随机数字键盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
Android开发案例 - 自定义虚拟键盘
所有包含IM功能的App(如微信, 微博, QQ, 支付宝等)都提供了Emoji表情之类的虚拟键盘, 如下图: 本文只着重介绍如何实现输入法键盘和自定义虚拟键盘的流畅切换, 而不介绍如何实现虚 ...
js自定义验证码
分享一个js自定义的验证码 window.onload = function () { var code; $('.changePassword').click(function () ...
iOS开发之自定义表情键盘(组件封装与自动布局)
下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自 ...
js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图效果预览实例代码 <div class="htmleaf-container"> <div ...
[译] 用 Swift 创建自定义的键盘
本文翻译自 How to make a custom keyboard in iOS 8 using Swift 我将讲解一些关于键盘扩展的基本知识,然后使用iOS 8 提供的新应用扩展API来创建一 ...
与你相遇好幸运，Sails.js自定义responses
在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js 自定义的数据错误 >serviceSucc ...

随机推荐

c# 解决Socket问题——由于目标机器积极拒绝,无法连接
关于单机出现这种问题不多赘述,主要阐述服务机和客户机出现这种问题的解决办法. 1.检查防火墙这种问题出现的最多,特别是你的服务机还是买的各家的云产品,比如阿里云就是到防火墙中添加出入站规则,Azur ...
log4j配置参数详解——按日志文件大小、日期切分日志文件
项目中尽管对log4j有基本的配置,例如按天生成日志文件以作区分,但如果系统日志文件过大,则就需要考虑以更小的单位切分或者其他切分方式.下面就总结一下log4j常用的配置参数以及切分日志的不同方式. ...
第一个spring boot应用
前提首先要确保已经安装了java和maven: $ java -version java version "1.8.0_102" Java(TM) SE Runtime Envi ...
python基础-4.1 open 打开文件练习：修改haproxy配置文件
1.如何在线上环境优雅的修改配置文件? 配置文件名称ini global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 in ...
PyTorch笔记之 scatter() 函数
scatter() 和 scatter_() 的作用是一样的,只不过 scatter() 不会直接修改原来的 Tensor,而 scatter_() 会 PyTorch 中,一般函数加下划线代表直接在 ...
nested exception is java.lang.NoClassDefFoundError: org/hibernate/validator/resourceloading/ResourceBundleLocator
原来的hibernate-validator-5.3.0.Final.jar里没有这个接口,换成 hibernate-validator-4.1.0.Final.jar 就好了
Spark-Core RDD概述
一.什么是RDD 1.RDD(Resilient Distributed DataSet)弹性分布式数据集 2.是Spark中最基本的数据抽象 3.在代码中是一个抽象类,它代表一个弹性的.不可变的.可 ...
10 个常用的 Linux 命令？
pwd 显示工作路径ls 查看目录中的文件 cd /home 进入 '/ home' 目录'cd .. 返回上一级目录cd ../.. 返回上两级目录mkdir dir1 创建一个叫做 'dir1' ...
Log4Net 之将日志记录到数据库的后台实现（二）
原文:Log4Net 之将日志记录到数据库的后台实现 (二) 大家下午好,昨天讲了配置,今天我们讲讲后台实现,在完成了后台实现后,我们才能真正意义上的解决把自定义属性字段值录入到数据库中. 在开写之前 ...
NodeJS、npm安装步骤和配置（windows版本）
https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 上面这个链接很详细了,怕它没了自己记一遍.我的简洁一点. 1. 打开no ...

JS自定义随机键盘

JS自定义随机键盘的更多相关文章

随机推荐

热门专题