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

随机推荐

项目开源-基于ASP.NET Core和EF Core的快速开发框架
前言:作为一名95后的程序猿,已经写了一年多的代码了,为了提升自己的技术水平,所以决定尝试编写一个快速开发框架开源出来,一来提升自己的技术水平,二来助力.NET Core生态发展写这个框架主要是为了 ...
【ABAP系列】SAP WEB GUI的实现，SAP在网页中使用
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP WEB GUI的实现,SAP ...
day17跨文件夹导入模块，模块的两种被执行方式，包，直接使用包中模块，包的管理
复习 ''' 1.模块 -- 一系列功能的集合体,用文件来管理一系列有联系的功能,该文件我们称之为模块,文件名就是模块名 -- import | from...import 来导入模块,从而使用模块中 ...
Good teachers,they inspire you, they entertain you,and you end up learning a ton even when you don't know it.
pardon. v. 原谅.抱歉.再说一次 honourable.adj.值得钦佩的 specification.n.规格.标准 amongst.prep.在...中 gallon.n.加仑 comp ...
linux启动内核源码分析
内核的启动时从main.c这个文件里面的start_kernel函数开始的,这个文件在linux源码里面的init文件夹下面下面我们来看看这个函数这个函数很长,可以看个大概过去 asmlinkag ...
解决django项目无法连接远程mysql的问题
我们都知道django项目可以通过修改settings.py文件中的DATABASES这个对象,使用不同的数据库. 如图所示,我们想连接远程的mysql,修改settings.py的配置然后我们在终 ...
虚拟机 vs 容器
虚拟机虚拟机本质上是模拟,模拟物理机上的硬件虚拟机必须安装操作系统一个虚拟机操作系统的崩溃不会影响到其他虚拟机容器容器的本质是经过隔离与限制的linux进程容器使用的是物理机的资源容器之 ...
[Python3 练习] 008 欧几里德算法
题目:写个"欧几里德算法"的小程序 (1) 描述我知识浅薄,一开始被"欧几里德"的大名唬住了,去搜了一下才知道这就是高中时学过的"辗转相除法&quo ...
MySQL的练习
mysql登录:方法1:使用Command Line Client登录,缺点:不显示报错信息方法2:使用cmd登录(cmd的常用:查看ip地址:ipcongfi-----定时关机:shutdown ...
Python库指南
Python库指南 1.time模块作用:time模块是一个时间模块,与datetime模块它提供的功能是更加接近于操作系统层面. 应用场景:平时用的比较多的时间戳,等时间方面的操作,在爬虫方面经常 ...

JS自定义随机键盘

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

随机推荐

热门专题