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

随机推荐

阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_2_字符输入流读取字符数据
读取的文件有中文也有英文强转为char类型缓冲读取多个字符使用string的构造方法转换为字符输出
测开之路九十七：js的引用方式
第一种:引用外部js文件准备一个js文件 <script src="../js/js01.js"></script& ...
python正则表达式整理
正则表达式在处理字符串时很大的作用,爬虫中也经常用到,下面就将一些常用正则表达式做一整理记录,方便以后查看. ^d 表示匹配以d开头的字符串 . 表示匹配任意字符串 * 表示前面 ...
Mac入门--通过Homebrew安装PHP(新)
1 首先安装homebrew,安装过的话更新安装:homebrew官网地址:https://brew.sh/index_zh-cn.html.或者直接复制下面代码: /usr/bin/ruby -e ...
Linked List Cycle（链表成环）
判断链表中是否有环来源:https://leetcode.com/problems/linked-list-cycle Given a linked list, determine if it ha ...
Vue 基础 day04
什么是路由后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器的资源: 前端路由: 对于单页面应用程序来说,主要是通过URL中的hash(#)来实现不同页面之间的跳转 ...
node.js多版本管理 nvm
安装nvm 1.nvm压缩包下载地址 https://github.com/coreybutler/nvm-windows/releases 注意:Windows用户下载nvm-setup.zip 2 ...
git 中添加用户名和密码
git 中添加用户名和密码:https://blog.csdn.net/qq_28602957/article/details/52154384 在使用git时,如果用的是HTTPS的方式,则每次提交 ...
P1973 [NOI2011]Noi嘉年华
传送门首先可以把时间区间离散化然后求出 $cnt[l][r]$ 表示完全在时间 $[l,r]$ 之内的活动数量设 $f[i][j]$ 表示当前考虑到时间 $i$,第一个会场活动数量为 $j$ 时 ...
使用Kafka的一些简单介绍: 1集群 2原理 3 术语
目录第一节 Kafka 集群 Kafka 集群搭建 Kafka 集群快速搭建第二节集群管理工具集群管理工具集群 Issues 第三节使用命令操纵集群第四节 Kafka 术语说明第五节 ...

JS自定义随机键盘

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

随机推荐

热门专题