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

随机推荐

dojo 官方翻译 dojo/_base/array 版本1.10
官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/_base/array.html#dojo-base-array array模块dojo进行 ...
阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第4节多态_15_多态的概述
不是多种状态,而是有多种形态继承是多态的前提子类就是一个父类.学生就是一个人多态性说的是这个对象.
阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第6节权限修饰符_6_四种权限修饰符
四种权限修饰符.从大到小纵向再分成四种情况同一个类同一个类里面.private方式,可以访问到本类里面的 num成员变量前面不写修饰符也能访问到 (default)就是不写的这种情况受保护的 ...
红米note2 刷机注意问题：
其他的百度都有,用刷线宝刷红米note2 刷机注意问题: 关机状态线下,链接电脑,按着音量下键不松手,按电源键开机后松开,即进入刷机模式. 其中,红米,红米1s移动,红米note移动3g/联通 ...
类StringBuffer
1字符串声明和创建 public StringBuffer() 无参构造函数 public StringBuffer(int capacity) 指定容量的字符串缓冲区对象 public String ...
[Python3 练习] 005 汉诺塔1 递归解法
题目:汉诺塔 I (1) 描述传说,在世界中心贝拿勒斯(在印度北部)的圣庙外有左中右三根足够长的柱子(塔) 左边柱子上套着 64 片金片,金片按"上小下大"排,其余两根是空柱子 ...
关于mysql的使用命令（持续更新中...）
特别提示本说明中的mysql 是基于windwos平台下的5.5 版本安装完成后请到mysql中设置配置文件链接分享:链接:https://pan.baidu.com/s/1tv4ulZ ...
Leetcode Lect3 内存中的栈空间与堆空间
内存中的栈空间与堆空间我们通常所说的内存空间,包含了两个部分:栈空间(Stack space)和堆空间(Heap space) 当一个程序在执行的时候,操作系统为了让进程可以使用一些固定的不被其他进 ...
13-jQuery事件绑定和常用鼠标事件
# 关于事件 ## 事件绑定 1.**基本绑定** > $(element).click(function(){})>> $(element).dblclick(function() ...
启动ZOOKEEPER之后能查看到进程存在但是查不到状态，是因为。。。
一般我们在启动ZOOKEEPER之后能查看到进程并且能查到每个节点的状态,但是新手偶尔会遇到查不到状态的问题,这里主要说一下我自己遇到的问题. 是因为myid重复了.... 错误:总共三个节点,mas ...

JS自定义随机键盘

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

随机推荐

热门专题