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

随机推荐

伪造IP及获取客户端真实IP地址
Fiddler支持自定义规则,可以实现对HTTP请求数据发送给Server前或HTTP应答数据发送给浏览器前进行修改.下面的例子将演示如何向所有HTTP请求数据中增加一个头.1)打开Fiddler,点 ...
防止XSRF 解决方案
1.首先在表单提交页面生成校验使用的Token public ActionResult Index() { //Token验证需要使用的token string token = System.Guid ...
Java提取文本文档中的所有网址（小案例介绍正则基础知识）
正则表达式基础以及Java中使用正则查找定义: 正则表达式是一些用来匹配和处理文本的字符串正则的基础(先大致了解下) 1. 正则表达式的作用查找特定的信息(搜索) 替换一些文本(替换) 2. 正 ...
FileSystemObject详解
FSO是FileSystemObject 或 Scripting.FileSystemObject 的缩写,为 IIS 内置组件,用于操作磁盘.文件夹或文本文件.FSO 的对象.方法和属性非常的多,这 ...
package.json说明
package.json是什么? 直接的说:就是管理你本地安装的npm包一个package.json文件可以做如下事情: 展示项目所依赖的npm包允许你指定一个包的版本[范围] 让你建立起稳定,意 ...
Qt之UI文件设计和运行机制
1.项目文件组成在QtCreator中新建一个WidgetApplocation项目,选中窗口基类中选中QWidget作为窗口基类,并选中"GnerateForm"复选框.创建后项 ...
P5445 [APIO2019]路灯
传送门· 对于询问 $(a,b)$ ,感觉一维很不好维护,考虑把询问看成平面上的一个点,坐标为 $(a,b)$ 每个坐标 $(x,y)$ 的值表示到当前 $x$ 和 $y$ 联通的时间和考虑一个修改 ...
swiper和tab相结合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
第7章 PTA查找练习题
这道题与第7章查找有关,当时提前看到,翻到书里面的算法,然后打进去,虽然是正确的,但是那时候并不知道二叉排序树的基础知识,包括插入查找的来龙去脉,现在已经学到了,有了一定了解,发现题目只用到了其中部分 ...
如何设置 ComboBox 下拉列表的高度或间距
ComboBox 的下拉列表部分总是很挤,看起不舒服,但是设置了 ItemHeight 没用,怎么办呢? 首先设置一个较大的 ItemHeight 值,比如 20: 然后设置 ComboBox 的 D ...

JS自定义随机键盘

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

随机推荐

热门专题